摘要：而中引入一個(gè)名為的對(duì)象實(shí)現(xiàn)與相同的功能，和其他瀏覽器則使用。如果是默認(rèn)值，表示是異步請(qǐng)求。下面的例子中，通過是否為的狀態(tài)碼來判斷調(diào)用是否是成功的。在檢查了請(qǐng)求的狀態(tài)和響應(yīng)的狀態(tài)碼后，就可以接收服務(wù)器端發(fā)送的數(shù)據(jù)并處理。

AJAX的意思就是異步的JavaScript和XML。簡(jiǎn)而言之，它是使用XMLHttpRequest對(duì)象與服務(wù)器端通信的腳本語言。它可以發(fā)送及接收各種格式的信息，包括JSON、XML、HTML和文本文件。AJAX最為吸引人的就是它的“異步”特性，這意味著AJAX可以無需刷新頁面而與服務(wù)器端進(jìn)行通信。允許你根據(jù)用戶事件來更新部分頁面內(nèi)容。

可以考慮的兩個(gè)特性：

向服務(wù)器端發(fā)送請(qǐng)求，而不用重新加載頁面。

從服務(wù)器端接收數(shù)據(jù)并處理。

需要通過XMLHttpRequest實(shí)現(xiàn)使用JavaScript向服務(wù)器端發(fā)送一個(gè)HTTP請(qǐng)求。而Internet Explorer（IE）中引入一個(gè)名為XMLHTTP的ActiveX對(duì)象實(shí)現(xiàn)與XMLHttpRequest相同的功能，Mozilla、Safari和其他瀏覽器則使用XMLHttpRequest。

如果要兼容各個(gè)瀏覽器的話，可以這樣來做：

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

  
注意：出于演示目的，上面創(chuàng)建XMLHTTP實(shí)例是簡(jiǎn)化了的代碼。關(guān)于更加真實(shí)的例子，請(qǐng)參閱本文的第三步。

接下來，當(dāng)接收到服務(wù)器端響應(yīng)時(shí)，需要告訴HTTP請(qǐng)求對(duì)象使用JavaScript函數(shù)來處理響應(yīng)。將XMLHttpRequest對(duì)象的onreadystatechange屬性設(shè)置為該函數(shù)的名稱，當(dāng)請(qǐng)求的狀態(tài)變化時(shí)，該函數(shù)會(huì)被調(diào)用。

httpRequest.onreadystatechange = nameOfTheFunction;

注意：該函數(shù)名沒有傳遞參數(shù)的括號(hào)和參數(shù)，這表示只是分配了一個(gè)函數(shù)的引用，而不是真正調(diào)用該函數(shù)。當(dāng)然，也可以動(dòng)態(tài)定義一個(gè)匿名函數(shù)，這樣可以實(shí)時(shí)地處理響應(yīng)。

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

在處理完服務(wù)器端的響應(yīng)之后，我們就可以調(diào)用XMLHttpRequest對(duì)象的open()和send()方法向服務(wù)器端發(fā)送請(qǐng)求了。

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

open()方法的第一個(gè)參數(shù)：HTTP請(qǐng)求方法 - GET、POST、HEAD及任何服務(wù)器端支持的方法。根據(jù)HTTP標(biāo)準(zhǔn)保持大寫，否則一些瀏覽器（例如火狐）可能無法處理請(qǐng)求。關(guān)于HTTP請(qǐng)求方法的更多信息，你可以查看W3C規(guī)范

open()方法的第二個(gè)參數(shù)：請(qǐng)求的URL。出于安全考慮，不能調(diào)用第三方域的頁面內(nèi)容。當(dāng)調(diào)用open()方法時(shí)，一定確認(rèn)使用相同域名內(nèi)的頁面，否則會(huì)得到“permission denied”的錯(cuò)誤提示。常見的錯(cuò)誤是使用domain.tld訪問網(wǎng)站，卻使用www.domain.tld來請(qǐng)求頁面。如果真的需要發(fā)送一個(gè)請(qǐng)求到另一個(gè)域的話，可以查看HTTP訪問控制

open()方法的第三個(gè)參數(shù)：可選，是否是異步請(qǐng)求。如果是true（默認(rèn)值），表示是異步請(qǐng)求。

send()方法的參數(shù)表示當(dāng)請(qǐng)求為POST時(shí)，向服務(wù)器端發(fā)送請(qǐng)求的數(shù)據(jù)內(nèi)容。如果發(fā)送的是表單數(shù)據(jù)格式的話，服務(wù)器端可以向字符串一樣地解析。

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

向服務(wù)器端發(fā)送的數(shù)據(jù)格式也可以是JSON、SOAP等格式。

注意：如果使用POST方式發(fā)送數(shù)據(jù)的話，在調(diào)用send()方法前，需要設(shè)置請(qǐng)求的MIME類型。：

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

當(dāng)發(fā)送請(qǐng)求時(shí)，已經(jīng)定義了一個(gè)函數(shù)來處理響應(yīng)。

httpRequest.onreadystatechange = nameOfTheFunction;

這個(gè)函數(shù)可以做什么呢？首先，該函數(shù)需要檢查請(qǐng)求的狀態(tài)。如果狀態(tài)值為4的話，這表示接收到完成的服務(wù)器端響應(yīng)，可以繼續(xù)處理。

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

readyState的值列表如下：

0 - 未初始化

1 - 正在加載

2 - 加載完畢

3 - 交互中

4 - 完成

接下來需要檢查HTTP服務(wù)器端響應(yīng)的狀態(tài)代碼，W3C網(wǎng)站 列出了所有的狀態(tài)代碼。下面的例子中，通過是否為200 OK的狀態(tài)碼來判斷AJAX調(diào)用是否是成功的。

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
}

在檢查了請(qǐng)求的狀態(tài)和響應(yīng)的狀態(tài)碼后，就可以接收服務(wù)器端發(fā)送的數(shù)據(jù)并處理。有兩種選項(xiàng)訪問這些數(shù)據(jù)：

httpRequest.responseText - 將服務(wù)器端響應(yīng)作為文本字符串返回

httpRequest.responseXML - 將響應(yīng)作為一個(gè)XMLDocument對(duì)象返回，該對(duì)象可以使用JavaScript DOM函數(shù)進(jìn)行遍歷。

注意，上述步驟只有異步請(qǐng)求（open()方法的第三個(gè)參數(shù)設(shè)置為true）時(shí)才是有效的。如果使用同步請(qǐng)求的話，是不需要指定函數(shù)的。在調(diào)用send()方法后就可以訪問到服務(wù)器端返回的數(shù)據(jù)，因?yàn)槟_本會(huì)停止并等待服務(wù)器端的響應(yīng)。

下面來做一個(gè)簡(jiǎn)單的HTTP請(qǐng)求。JavaScript將請(qǐng)求一個(gè)包含“I"m a test.”文本的“test.html”HTML文檔，然后使用alert()方法打印test.html文件的內(nèi)容。

  Make a request

在這個(gè)例子中：

在瀏覽器中用戶單擊“Make a request”鏈接；

事件處理器調(diào)用makeRequest()方法，通過向該函數(shù)傳遞的參數(shù)，請(qǐng)求一個(gè)處在同一目錄中的“test.html”HTML文件；

請(qǐng)求后，（onreadystatechange）執(zhí)行 alertContents()方法；

alertContents()方法用于檢查如果正確地接收到響應(yīng)，利用alert()方法打印“test.html”文件包含的內(nèi)容。

  
注意：如果你發(fā)送一個(gè)請(qǐng)求后返回的是一段XML代碼，而不是一個(gè)靜態(tài)的XML文件的話，在Internet Explorer中必須設(shè)置一些響應(yīng)頭。如果沒有設(shè)置響應(yīng)頭“Content-Type: application/xml”的話，當(dāng)試圖訪問XML元素時(shí)IE將拋出一個(gè)"Object Expected"的JavaScript錯(cuò)誤。

  
注意：如果沒有設(shè)置頭“Cache-Control: no-cache”的話，瀏覽器將緩存響應(yīng)并不會(huì)重新提交請(qǐng)求。可以添加像時(shí)間戳或一個(gè)隨機(jī)數(shù)的不同GET請(qǐng)求參數(shù)（參考 bypassing the cache）。

  
注意：如果httpRequest變量是全局的，makeRequest()方法因?yàn)闆_突可能會(huì)被重寫。將httpRequest變量定義在一個(gè)閉包中的話，可以避免AJAX函數(shù)的沖突。

  
注意：如果出現(xiàn)通信錯(cuò)誤（如服務(wù)器端被關(guān)閉），當(dāng)試圖訪問狀態(tài)字段時(shí)在onreadystatechange的方法中將會(huì)拋出一個(gè)異常。確保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);
  }
}

在前面的例子中，當(dāng)接收到響應(yīng)后使用XMLHttpRequest對(duì)象的responseText屬性訪問“test.html”文件包含的內(nèi)容。現(xiàn)在嘗試一下responseXML屬性。

首先，創(chuàng)建一個(gè)用于請(qǐng)求的名為“test.xml”的有效XML文檔，代碼如下：

    I"m a test.

在腳本中，只需要修改請(qǐng)求行：

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對(duì)象，然后使用DOM方法來訪問XML文檔中的數(shù)據(jù)。

最后，向服務(wù)器端發(fā)送一些數(shù)據(jù)并接收響應(yīng)。這次JavaScript腳本請(qǐng)求一個(gè)動(dòng)態(tài)頁面“test.php”，該頁面將根據(jù)發(fā)送的數(shù)據(jù)返回一個(gè)“computedString”-“Hello, [user data]!”，并使用alert()方法進(jìn)行打印。

首先，向HTML頁面中添加一個(gè)文本框，用戶可以通過該文本框輸入他們的名字：

Your name: 
  


  Make a request

還需要添加一行事件處理器用于從文本框獲取用戶的數(shù)據(jù)，并將該數(shù)據(jù)隨著URL傳遞給makeRequest()方法：

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

修改makeRequest()方法用于接收用戶數(shù)據(jù)并發(fā)送給服務(wù)器端。將請(qǐng)求方式從GET修改為POST，用戶數(shù)據(jù)作為參數(shù)傳遞給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()方法打印服務(wù)器端返回的數(shù)據(jù)。假設(shè)服務(wù)器端返回的是computedString和用戶數(shù)據(jù)的話，如果用戶在文本框中輸入“Jane”服務(wù)器端響應(yīng)的內(nèi)容會(huì)像是這樣：

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

在alertContents()方法中使用這些數(shù)據(jù)，不僅可以使用alert()方法打印responseText的內(nèi)容，還可以將其解析并打印computedString屬性內(nèi)容：

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.");
    }
  }
}

注明：
本文翻譯于Mozilla Developer Network
翻譯者：金云龍
原文地址：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started