Ajax並不是一種技術(Ajax入門好文章)

Ajax 並不是一種技術。它實際上是幾種已經在各自領域大行其道技術的強強結合。Ajax混合了：

以下是引用片段 * 基於XHTML/CSS 
 * 由DOM（Document Object Model）實現動態顯示與互動 
 * 通過XML和XSLT進行資料交換及處理 
 * 使用JavaScript整合上述技術

　　XMLHttpRequest 是 Ajax 的關鍵技術，然而XMLHttpRequest 並非W3C標準。它目前所完成的大量功能將被過渡到W3C的新項目“DOM Level 3 Load and Save”標準裡面。通過　　XMLHttpReques,web頁可以從網頁伺服器得到反饋和需求而不用重新載入頁面。使用者將停留在相同的頁面，而不會注意到指令碼可能在後台需求某頁面或是在給伺服器發送資料。Google Suggest 就是用XMLHttpRequest對象來建立的一個動態web 介面：當你開始在Google 的搜尋方塊中打字時，一個JS指令碼發送字母到一伺服器並從伺服器返回一列建議。W3C “DOM Level 3 Load and Save”標準包含一些相似的功能，但是這些還不能在任何一瀏覽器中得到實現。所以就目前，如你需要從瀏覽器發送HTTP請求，你還是得用到 XMLHttpRequest 對象。Javascript 也是靠XMLHttpRequest 來擷取XML的。對於不同的瀏覽器，建立 XMLHttpRequest 對象的方式有些不一樣，經過綜合多方的指令碼，採用以下指令碼基本上能夠滿足在各種瀏覽器中建立XMLHttpRequest 的需求。

程式碼片段   

 <script type=”text/javascript”> 
    var xmlHttp; 
    function creatXMLHttpRequest() { 
    if (window.ActiveXObject) { 
    xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”); 
    } //51aspx.com
    else if (window.XMLHttpRequest) { 
    xmlHttp = new XMLHttpRequest(); 
    } 
    else { 
    return; 
    } 
    }
</script>

其中XMLHttpRequest對象包含了一些方法以及屬性，先不管它們，等用到了再看。

Methods（方法）

程式碼片段    abort()
    Cancels the current request

取消當前的請求

程式碼片段    getAllResponseHeaders()
    Returns the complete set of http headers as a string

以字串的形式返回完整的HTTP頭資訊

程式碼片段    getResponseHeader(”headername”)
    Returns the value of the specified http header

返回指定的HTTP頭資訊值

程式碼片段open(”method”,”URL”,async,”uname”,”pswd”)

    Specifies the method, URL, and other optional attributes of a request

為一請求指定發放，URL，和其他的任意屬性。

    The method parameter can have a value of “GET”, “POST”, or “PUT” (use “GET” when requesting data and use “POST” when sending data (especially if the length of the data is greater than 512 bytes 51aspx.com.

方法參數可以是 “GET”, “POST”, 或 “PUT” 中的一個（請求資料使用GET比較多而POST發送資料[特別是長度大於512位元組的資料]）

    The URL parameter may be either a relative or complete URL(http://www.51aspx.com).

URL可以是絕對路徑或是相對的路徑。

    The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response(51aspx.com). false means that the script waits for a response before continuing script processing

非同步參數指明是否應該處理請求。設定成“True”的意思是在send()方法結束後指令碼繼續執行，而不需要等待伺服器的回應。“False”則是指令碼必須等待伺服器的回應後才能繼續執行。

程式碼片段    send(content)
    Sends the request

發送請求   

程式碼片段setRequestHeader(”label”,”value”)

    Adds a label/value pair to the http header to be sent

Properties屬性

onreadystatechange* ：
An event handler for an event that fires at every state change, typically a call to a JavaScript function.
這個是個最重要的屬性，為每次狀態的變化而準備的事件處理，往往用於觸發一個JavaScript運行。

readyState ：
Returns the state of the object:
返回的狀態物件：

    * 0 = uninitialized[初始化]
    * 1 = loading[載入中]
    * 2 = loaded[載入完畢]
    * 3 = interactive[互動]
    * 4 = complete [完畢]

responseText ：
Returns the response as a string
以字串形式返回

responseXML ：
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties(51aspx.com)
以XML的形式返回，這個屬性返回一XML文檔對象，可用W3C的DOM點樹方法和屬性來進行解析和檢驗。

status ：
Returns the status as a number (e.g. 404 for “Not Found” or 200 for “OK”)
以數位形式返回狀態（比如404是”沒有找到“或200是”好的“）

statusText：
Returns the status as a string (e.g. “Not Found” or “OK”)
以字串形式返回狀態（比如”沒有找到“或”好的“）

步驟一：”請!” — 如何發送一個HTTP請求？

發送HTTP請求是關鍵，我們先總結一下步驟，一共是4步：

1. 獲得一個XMLHttpRequest執行個體，可以通過建立，或者訪問已存在的XMLHttpRequest對象執行個體。

程式碼片段<script type=”text/javascript”>
var xmlHttp; 
   function creatXMLHttpRequest() {
        if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
        }
        else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        } 
//51aspx.com
        else {
        return;
        } 
    }
</script>

2. 接下來要決定當收到伺服器的響應後，需要做什麼。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設定為要使用的JavaScript的函數名。

程式碼片段xmlHttp.onreadystatechange = handleStateChange;

注意:在函數名後沒有括弧,也無需傳遞參數。

3. 在定義了如何處理響應後,就要發送請求了。可以調用HTTP請求類的open()和send()方法, 如:

程式碼片段xmlHttp.open(”GET”, “simpleResponse.xml”, true);
xmlHttp.send(null);

　　關於open()後面的幾個參數這裡要解釋一下了。第一個參數是HTTP請求方式 – GET，POST，HEAD 或任何伺服器所支援的您想調用的方式。按照HTTP規範，該參數要大寫；否則，某些瀏覽器(如Firefox) 可能無法處理請求。第二個參數是請求頁面的 URL。由於自身安全特性的限制，該頁面不能為第三方網域名稱的頁面。同時一定要保證在所有的頁面中都使用準確的網域名稱，否則調用 open()會得到“permission denied”的錯誤提示。一個常見的錯誤是訪問網站時使用domain.tld，而當請求頁面時，卻使用“www.domain.tld”。第三個參數佈建要求是否為非同步模式。如果是ture, JavaScript函數將繼續執行，而不等待伺服器響應。這就是”AJAX”中的”Asynchronous”。

4. 向伺服器發送請求。send()方法向指定的目標資源發送請求。send()方法允許一個參數，可以是一個字串或者一個DOM對象。這個參數會作為請求本身的一部分被傳輸到目的URL。當send()方法裡麵包含有參數的時候，要確定open()方法裡面的第一個參數是“POST”。如果沒有資料要作為請求本身的一部分發送，就使用“null”，正如我們的例子中使用的。

步驟 2 – “收到!” — 處理伺服器的響應

當發送請求時,要提供指定處理響應的JavaScript函數名，步驟一的第二點我們已經定義了這個函數（handleStateChange）。我們來看看這個函數的功能是什麼。首先函數會檢查請求的狀態，如果狀態值是4，就意味著一個完整的伺服器響應已經收到了，您將可以處理該響應。

程式碼片段if (XMLHttp.readyState == 4) {
// everything is good, the response is received
} else {
// still not ready
}

readyState的取值如下:

0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (互動中)
4 (完成)

接著，函數會檢查HTTP伺服器響應的狀態值。完整的狀態取值可參見 W3C網站，我們著重看值為200（OK）的響應。

程式碼片段    if (XMLHttp.status == 200) {
    // perfect!
    } else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
    }

在檢查完請求的狀態值和響應的HTTP狀態值後, 您就可以處理從伺服器得到的資料了。有兩種方式可以得到這些資料:

    xmlHttp.responseText – 以文本字串的方式返回伺服器的響應
    xmlHttp.responseXML – 以XMLDocument對象方式返迴響應。處理XMLDocument對象可以用JavaScript DOM函數

整理一下步驟2的代碼，就是處理伺服器相應函數（handleStateChange)：

程式碼片段    function handleStateChange() {
    if(xmlHttp.readyState == 4) {
    if(xmlHttp.status == 200) {
    alert(”The server repilied with: ” + xmlHttp.responseText);
    }
    }
    }

步驟 3 – “萬事俱備!” - 簡單一實例

我們現在將整個過程完整地做一次。

發送一個簡單的HTTP請求。我們用JavaScript請求一個XML檔案，simpleResponse.xml，檔案的常值內容為”Hello from the server!”，然後我們”alert()”simpleResponse.xml檔案的內容。

程式碼片段<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head> 
 <title>Simple XMLHttpRequest</title>
<script type=”text/javascript”> 
    var xmlHttp; 
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
        }
        else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        }
        }

    function startRequest() {
        createXMLHttpRequest();
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.open(”GET”, “simpleResponse.xml”, true);
        xmlHttp.send(null);
        }

    function handleStateChange() {
        if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
        alert(”The server replied with: ” + xmlHttp.responseText);
        }
    }
    }
    </script>
    </head>
    <body>
    <form action=”#”>
    <input type=”button” value=”Start Basic Asynchronous Request” onclick=”startRequest();”/>
    </form>
    </body>
    </html>