Ajax从入门到搞定，一篇文章就够了

英文原文：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

翻译者：不想成熟的大叔

什么是 Ajax？

Ajax 的意思就是异步的 JavaScript 和 XML。简而言之，它是使用 XMLHttpRequest 对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息，包括 JSON、XML、HTML 和文本文件。

Ajax 最为吸引人的就是它的“异步”特性，这意味着 Ajax 可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。

可以考虑的两个特性：

• 向服务器端发送请求，而不用重新加载页面。

• 从服务器端接收数据并处理。

第一步：如何发送一个 HTTP 请求

需要通过 XMLHttpRequest 实现使用 JavaScript 向服务器端发送一个 HTTP 请求。而 Internet Explorer（IE）中引入一个名为 XMLHTTP 的ActiveX对象实现与 XMLHttpRequest 相同的功能，Mozilla、Safari 和其他浏览器则使用 XMLHttpRequest。

如果要兼容各个浏览器的话，可以这样来做：

var httpRequest;if (window.XMLHttpRequest) {  // Mozilla, Safari, IE7+ ...  httpRequest = new XMLHttpRequest();} else if (window.ActiveXObject) {  // IE 6 and older  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}

注意：出于演示目的，上面创建 XMLHTTP 实例是简化了的代码。关于更加真实的例子，请参阅本文的第三步。

接下来，当接收到服务器端响应时，需要告诉 HTTP 请求对象使用 JavaScript 函数来处理响应。将 XMLHttpRequest 对象的 onreadystatechange 属性设置为该函数的名称，当请求的状态变化时，该函数会被调用。

httpRequest.onreadystatechange = nameOfTheFunction;

注意：该函数名没有传递参数的括号和参数，这表示只是分配了一个函数的引用，而不是真正调用该函数。当然，也可以动态定义一个匿名函数，这样可以实时地处理响应。

httpRequest.onreadystatechange = function () {  // process the server response};

在处理完服务器端的响应之后，我们就可以调用 XMLHttpRequest 对象的 open() 和 send() 方法向服务器端发送请求了。

httpRequest.open("GET", "http://www.example.org/some.file", true);httpRequest.send(null);

• open() 方法的第一个参数：HTTP 请求方法 – GET、POST、HEAD 及任何服务器端支持的方法。根据 HTTP 标准保持大写，否则一些浏览器（例如火狐）可能无法处理请求。关于 HTTP 请求方法的更多信息，你可以查看W3C 规范

• open() 方法的第二个参数：请求的 URL。出于安全考虑，不能调用第三方域的页面内容。当调用 open() 方法时，一定确认使用相同域名内的页面，否则会得到“permission denied”的错误提示。常见的错误是使用 domain.tld 访问网站，却使用 www.domain.tld 来请求页面。如果真的需要发送一个请求到另一个域的话，可以查看 HTTP 访问控制

• open() 方法的第三个参数：可选，是否是异步请求。如果是 true（默认值），表示是异步请求。

send() 方法的参数表示当请求为 POST 时，向服务器端发送请求的数据内容。如果发送的是表单数据格式的话，服务器端可以向字符串一样地解析。

"name=value&anothername=" + encodeURIComponent(myVar) + "&so=on";

向服务器端发送的数据格式也可以是 JSON、SOAP 等格式。

注意：如果使用 POST 方式发送数据的话，在调用 send() 方法前，需要设置请求的 MIME 类型。

httpRequest.setRequestHeader(  "Content-Type",  "application/x-www-form-urlencoded");

第二步：处理服务器端的响应

当发送请求时，已经定义了一个函数来处理响应。

httpRequest.onreadystatechange = nameOfTheFunction;

这个函数可以做什么呢？首先，该函数需要检查请求的状态。如果状态值为 4 的话，这表示接收到完成的服务器端响应，可以继续处理。

if (httpRequest.readyState === 4) {  // everything is good, the response is received} else {  // still not ready}

readyState 的值列表如下：

• 0 – 未初始化

• 1 – 正在加载

• 2 – 加载完毕

• 3 – 交互中

• 4 – 完成

接下来需要检查 HTTP 服务器端响应的状态代码，W3C 网站 列出了所有的状态代码。下面的例子中，通过是否为 200 OK 的状态码来判断 Ajax 调用是否是成功的。

if (httpRequest.status === 200) {  // perfect!} else {  // there was a problem with the request,  // for example the response may contain a 404 (Not Found)  // or 500 (Internal Server Error) response code}

在检查了请求的状态和响应的状态码后，就可以接收服务器端发送的数据并处理。有两种选项访问这些数据：

• httpRequest.responseText：将服务器端响应作为文本字符串返回

• httpRequest.responseXML：将响应作为一个 XMLDocument 对象返回，该对象可以使用 JavaScript DOM 函数进行遍历。

注意，上述步骤只有异步请求（open() 方法的第三个参数设置为 true）时才是有效的。如果使用同步请求的话，是不需要指定函数的。在调用 send() 方法后就可以访问到服务器端返回的数据，因为脚本会停止并等待服务器端的响应。

第三步：一个简单的例子

下面来做一个简单的 HTTP 请求。JavaScript 将请求一个包含“I’m a test.”文本的“test.html”HTML 文档，然后使用alert() 方法打印 test.html 文件的内容。

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">  Make a requestspan><script type="text/javascript">  (function () {    var httpRequest;    document.getElementById("ajaxButton").onclick = function () {      makeRequest("test.html");    };
    function makeRequest(url) {      if (window.XMLHttpRequest) {        // Mozilla, Safari, ...        httpRequest = new XMLHttpRequest();      } else if (window.ActiveXObject) {        // IE        try {          httpRequest = new ActiveXObject("Msxml2.XMLHTTP");        } catch (e) {          try {            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");          } catch (e) {}        }      }
      if (!httpRequest) {        alert("Giving up :( Cannot create an XMLHTTP instance");        return false;      }      httpRequest.onreadystatechange = alertContents;      httpRequest.open("GET", url);      httpRequest.send();    }
    function alertContents() {      if (httpRequest.readyState === 4) {        if (httpRequest.status === 200) {          alert(httpRequest.responseText);        } else {          alert("There was a problem with the request.");        }      }    }  })();script>

在这个例子中：

• 在浏览器中用户单击“Make a request”链接；

• 事件处理器调用 makeRequest() 方法，通过向该函数传递的参数，请求一个处在同一目录中的“test.html”HTML 文件；

• 请求后，（onreadystatechange）执行 alertContents() 方法；

• alertContents() 方法用于检查如果正确地接收到响应，利用 alert() 方法打印“test.html”文件包含的内容。

注意：

• 如果你发送一个请求后返回的是一段 XML 代码，而不是一个静态的 XML 文件的话，在 Internet Explorer 中必须设置一些响应头。如果没有设置响应头“Content-Type: application/xml”的话，当试图访问 XML 元素时 IE 将抛出一个 "Object Expected" 的 JavaScript 错误。

• 如果没有设置头“Cache-Control: no-cache”的话，浏览器将缓存响应并不会重新提交请求。可以添加像时间戳或一个随机数的不同 GET 请求参数（参考 bypassing the cache）。

• 如果 httpRequest 变量是全局的，makeRequest() 方法因为冲突可能会被重写。将 httpRequest 变量定义在一个闭包中的话，可以避免 Ajax 函数的冲突。

• 如果出现通信错误（如服务器端被关闭），当试图访问状态字段时在 onreadystatechange 的方法中将会抛出一个异常。确保 if 语句声明在 try..catch 语句中。

function alertContents() {  try {    if (httpRequest.readyState === 4) {      if (httpRequest.status === 200) {        alert(httpRequest.responseText);      } else {        alert("There was a problem with the request.");      }    }  } catch (e) {    alert("Caught Exception: " + e.description);  }}

第四步：使用 XML 进行响应

在前面的例子中，当接收到响应后使用 XMLHttpRequest 对象的 responseText 属性访问“test.html”文件包含的内容。现在尝试一下 responseXML 属性。

首先，创建一个用于请求的名为“test.xml”的有效 XML 文档，代码如下：

<root>    I'm a test.root>

在脚本中，只需要修改请求行：

onclick="makeRequest('test.xml')"

然后在 alertContents() 方法中，需要使用如下代码替换 alert(httpRequest.responseText); 这一行代码：

var xmldoc = httpRequest.responseXML;var root_node = xmldoc.getElementsByTagName("root").item(0);alert(root_node.firstChild.data);

这段代码需要由 responseXML 给予的 XMLDocument 对象，然后使用 DOM 方法来访问 XML 文档中的数据。

第五步：处理数据

最后，向服务器端发送一些数据并接收响应。这次 JavaScript 脚本请求一个动态页面“test.php”，该页面将根据发送的数据返回一个“computedString”-“Hello, [user data]!”，并使用 alert() 方法进行打印。

首先，向 HTML 页面中添加一个文本框，用户可以通过该文本框输入他们的名字：

<label  >Your name:  <input type="text" id="ajaxTextbox" />label><span id="ajaxButton" style="cursor: pointer; text-decoration: underline">  Make a requestspan>

还需要添加一行事件处理器用于从文本框获取用户的数据，并将该数据随着 URL 传递给 makeRequest() 方法：

document.getElementById("ajaxButton").onclick = function () {  var userName = document.getElementById("ajaxTextbox").value;  makeRequest("test.php", userName);};

修改 makeRequest() 方法用于接收用户数据并发送给服务器端。将请求方式从 GET 修改为 POST，用户数据作为参数传递给 httpRequest.send() 方法：

function makeRequest(url, userName) {
    ...
    httpRequest.onreadystatechange = alertContents;    httpRequest.open('POST', url);    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');    httpRequest.send('userName=' + encodeURIComponent(userName));}

alertContents() 方法可以向第三步一样利用 alert() 方法打印服务器端返回的数据。假设服务器端返回的是 computedString 和用户数据的话，如果用户在文本框中输入“Jane”服务器端响应的内容会像是这样：

{"userData":"Jane","computedString":"Hi, Jane!"}

在 alertContents() 方法中使用这些数据，不仅可以使用 alert() 方法打印 responseText 的内容，还可以将其解析并打印 computedString 属性内容：

function alertContents() {  if (httpRequest.readyState === 4) {    if (httpRequest.status === 200) {      var response = JSON.parse(httpRequest.responseText);      alert(response.computedString);    } else {      alert("There was a problem with the request.");    }  }}

本文完〜