Ajax快速入門

全棧講師-金雲龍發表於2015-06-15

什麼是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.');
      }
    }
  }
})();

在這個例子中:

  • 在瀏覽器中使用者單擊“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