AJAX快速入門

什麼是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 request
</span>


<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文檔，代碼以下：

<?xml version="1.0" ?>
<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 request
</span>

還須要添加一行事件處理器用於從文本框獲取用戶的數據，並將該數據隨着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.');
    }
  }
}

---

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