关于Ajax是运行在服务器端还是客户端的问题

「爱情、让人受尽委屈。」 2022-06-02 05:50 167阅读 0赞

其实对Ajax一点也不熟悉（或者说对前端这些东西一点也不熟悉），但是期末考试还要考类似的概念问题，听说会有这样的nc题，

Ajax是运行在服务器端还是客户端。一开始查定义对这个了解的不太清楚，之后又查了一下细节，觉得如果这样问的话，回答只能是在客户端吧，下面是查到的一些资料

## 什么是 AJAX ？ ##

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

## AJAX 实例解释 ##

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<html>
    <body>
    
    <div id="myDiv"><h3>Let AJAX change this text</h3></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
    
    </body>
    </html>

接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：

<head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
         
    .... AJAX script goes here ...
    }
    </script>
    </head>

XMLHttpRequest 是 AJAX 的基础。

## XMLHttpRequest 对象 ##

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

## 创建 XMLHttpRequest 对象 ##

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

### 创建 XMLHttpRequest 对象的语法： ###

variable=new XMLHttpRequest();

### 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： ###

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
    if (window.XMLHttpRequest)
      {
        // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {
        // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest 对象用于和服务器交换数据。

## 向服务器发送请求 ##

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

<table style="border-spacing:0px; margin-bottom:1.5em; border-width:1px 1px 1px 0px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-top-color:rgb(221,221,221); border-right-color:rgb(221,221,221); border-bottom-color:rgb(221,221,221); font-size:14px; line-height:1.3em; background-color:transparent"> 
 <tbody style="margin:0px; border:0px; padding:0px"> 
  <tr style="line-height:1.3em; margin:0px; border:0px; padding:0px"> 
   <th style="padding:8px; line-height:1.5em; vertical-align:top; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 方法</th> 
   <th style="padding:8px; line-height:1.5em; vertical-align:top; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 描述</th> 
  </tr> 
  <tr style="line-height:1.3em; margin:0px; border:0px; padding:0px"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> open(&nbsp;<span style="margin:0px; border:0px; padding:0px">method</span>&nbsp;,&nbsp;<span style="margin:0px; border:0px; padding:0px">url</span>&nbsp;,&nbsp;<span style="margin:0px; border:0px; padding:0px">async</span>&nbsp;)</td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <p style="margin-top:0px; margin-bottom:.75em; font-size:16px; line-height:1.7em; text-indent:1em"> 规定请求的类型、URL 以及是否异步处理请求。</p> 
    <ul style="padding:0px; margin:0px 0px .75em 25px; list-style-type:none; font-size:16px; line-height:1.7em"> 
     <li style="line-height:1.7em; list-style-type:disc"><span style="margin:0px; border:0px; padding:0px">method</span>&nbsp;：请求的类型；GET 或 POST</li> 
     <li style="line-height:1.7em; list-style-type:disc"><span style="margin:0px; border:0px; padding:0px">url</span>&nbsp;：文件在服务器上的位置</li> 
     <li style="line-height:1.7em; list-style-type:disc"><span style="margin:0px; border:0px; padding:0px">async</span>&nbsp;：true（异步）或 false（同步）</li> 
    </ul> </td> 
  </tr> 
  <tr style="line-height:1.3em; margin:0px; border:0px; padding:0px"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> send(&nbsp;<span style="margin:0px; border:0px; padding:0px">string</span>&nbsp;)</td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <p style="margin-top:0px; margin-bottom:.75em; font-size:16px; line-height:1.7em; text-indent:1em"> 将请求发送到服务器。</p> 
    <ul style="padding:0px; margin:0px 0px .75em 25px; list-style-type:none; font-size:16px; line-height:1.7em"> 
     <li style="line-height:1.7em; list-style-type:disc"><span style="margin:0px; border:0px; padding:0px">string</span>&nbsp;：仅用于 POST 请求</li> 
    </ul> </td> 
  </tr> 
 </tbody> 
</table>

## GET 还是 POST？ ##

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

*  无法使用缓存文件（更新服务器上的文件或数据库）
 *  向服务器发送大量数据（POST 没有数据量限制）
 *  发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

## GET 请求 ##

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);
    xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
    xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
    xmlhttp.send();

## POST 请求 ##

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);
    xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Bill&lname=Gates");

## url - 服务器上的文件 ##

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.asp",true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

## 异步 - True 或 False？ ##

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

*  在等待服务器响应时执行其他脚本
 *  当响应就绪后对响应进行处理

## Async = true ##

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

## Async = false ##

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

**注释：** 当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);
    xmlhttp.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

## 服务器响应 ##

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

## responseText 属性 ##

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

## responseXML 属性 ##

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

请求 [books.xml][] 文件，并解析响应：

xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;

## onreadystatechange 事件 ##

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

<table style="border-spacing:0px; margin-bottom:1.5em; border-width:1px 1px 1px 0px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-top-color:rgb(221,221,221); border-right-color:rgb(221,221,221); border-bottom-color:rgb(221,221,221); font-size:14px; line-height:1.3em; background-color:transparent"> 
 <tbody style="margin:0px; border:0px; padding:0px"> 
  <tr style="line-height:1.3em; margin:0px; border:0px; padding:0px"> 
   <th style="padding:8px; line-height:1.5em; vertical-align:top; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 属性</th> 
   <th style="padding:8px; line-height:1.5em; vertical-align:top; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 描述</th> 
  </tr> 
  <tr style="line-height:1.3em; margin:0px; border:0px; padding:0px"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> onreadystatechange</td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td> 
  </tr> 
  <tr style="line-height:1.3em; margin:0px; border:0px; padding:0px"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> readyState</td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <p style="margin-top:0px; margin-bottom:.75em; font-size:16px; line-height:1.7em; text-indent:1em"> 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。</p> 
    <ul style="padding:0px; margin:0px 0px .75em 25px; list-style-type:none; font-size:16px; line-height:1.7em"> 
     <li style="line-height:1.7em; list-style-type:disc">0: 请求未初始化</li> 
     <li style="line-height:1.7em; list-style-type:disc">1: 服务器连接已建立</li> 
     <li style="line-height:1.7em; list-style-type:disc">2: 请求已接收</li> 
     <li style="line-height:1.7em; list-style-type:disc">3: 请求处理中</li> 
     <li style="line-height:1.7em; list-style-type:disc">4: 请求已完成，且响应已就绪</li> 
    </ul> </td> 
  </tr> 
  <tr style="line-height:1.3em; margin:0px; border:0px; padding:0px"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> status</td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <p style="margin-top:0px; margin-bottom:.75em; font-size:16px; line-height:1.7em; text-indent:1em"> 200: "OK"</p> <p style="margin-top:0px; margin-bottom:.75em; font-size:16px; line-height:1.7em; text-indent:1em"> 404: 未找到页面</p> </td> 
  </tr> 
 </tbody> 
</table>

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

**注释：** onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

## 使用 Callback 函数 ##

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个 **标准** 的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
    {
          
    loadXMLDoc("ajax_info.txt",function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
    }

好了，以上都是摘自W3C上的权威指南，是关于ajax的一些基本的概念，原理以及简单的用法，希望对大家有帮助

[books.xml]: http://www.w3school.com.cn/example/xmle/books.xml