AJAX基礎-第2章（2）

Ajax 由 HTML、JavaScript 技術、DHTML 和 DOM 組成，這一傑出的方法可以將笨拙的 Web 介面轉化成互動性的 Ajax 應用程式。

XMLHttpRequest 對象

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
擷取 Request 對象 

在 Microsoft 瀏覽器上建立 XMLHttpRequest 對象

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
根據 Internet Explorer 中安裝的 JavaScript 技術版本不同，MSXML 實際上有兩種不同的版本，因此必須對這兩種情況分別編寫代碼:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

和

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");。

如果選擇的瀏覽器不是 Internet Explorer，或者為非 Microsoft 瀏覽器編寫代碼：

xmlHttp = new XMLHttpRequest();

發出請求：

已經有了一個嶄新的 XMLHttpRequest 對象，接下來就是在所有 Ajax 應用程式中基本都雷同的流程：

1. 從 Web 表單中擷取需要的資料。
2. 建立要串連的 URL。
3. 開啟到伺服器的串連。
4. 設定伺服器在完成後要啟動並執行函數。
5. 發送請求。

處理響應：

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("ＸＸＸＸ").value = response;
  }
}
XMLHttpRequest幾個方法和屬性：

open()：建立到伺服器的新請求。

send()：向伺服器發送請求。

abort()：退出當前請求。

readyState：提供當前 HTML 的就緒狀態。

responseText：伺服器返回的請求響應文本。

建立請求 URL：

<input type="text" size="14" name="phone" id="phone"  onChange="getCustomerInfo();" />
var phone = document.getElementById("phone").value;
 var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

如果以前沒用見過 escape() 方法，它用於轉義不能用明文正確發送的任何字元。比如，電話號碼中的空格將被轉換成字元 %20，從而能夠在 URL 中傳遞這些字元。

可以根據需要添加任意多個參數。比如，如果需要增加另一個參數，只需要將其附加到 URL 中並用 “與”（&）字元分開 [第一個參數用問號（?）和指令碼名分開]。

 開啟請求：

有了要串連的 URL 後就可以配置請求了。可以用 XMLHttpRequest 對象的 open() 方法來完成。該方法有五個參數：

• request-type：發送請求的類型。典型的值是 GET 或 POST，但也可以發送 HEAD 請求。
• url：要串連的 URL。
• asynch：如果希望使用非同步串連則為 true，否則為 false。該參數是可選的，預設為 true。
• username：如果需要身分識別驗證，則可以在此指定使用者名稱。該選擇性參數沒有預設值。
• password：如果需要身分識別驗證，則可以在此指定口令。該選擇性參數沒有預設值。

通常使用其中的前三個參數。事實上，即使需要非同步串連，也應該指定第三個參數為 “true”。這是預設值。

設定好了 URL，多數請求使用 GET 就夠了（後面將看到需要使用 POST 的情況），再加上 URL，這就是使用 open() 方法需要的全部內容了：

request.open("GET", url, true);

發送請求：request.send(null);

send() 只有一個參數，就是要發送的內容。然可以使用 send() 發送資料，但也能通過 URL 本身發送資料。事實上，GET 請求（在典型的 Ajax 應用中大約佔 80%）中，用 URL 發送資料要容易得多。如果需要發送安全資訊或 XML，可能要考慮使用 send() 發送內容。如果不需要通過 send() 傳遞資料，則只要傳遞 null 作為該方法的參數即可。

指定回調方法：request.onreadystatechange =

需要特別注意的是該屬性在代碼中設定的位置 —— 它是在調用 send() 之前 設定的。

HTTP 就緒狀態：

在 Ajax 應用程式中需要瞭解五種就緒狀態：

function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert("Server is done!");
   }
讀取響應文本：

0：請求沒有發出（在調用 open() 之前）。

1：請求已經建立但還沒有發出（調用 send() 之前）。

2：請求已經發出正在處理之中（這裡通常可以從響應得到內容標題部）。

3：請求已經處理，響應中通常有部分資料可用，但是伺服器還沒有完成響應。

4：響應已完成，可以訪問伺服器響應並使用它。

HTTP 狀態代碼：

除了就緒狀態外，還需要檢查 HTTP 狀態。我們期望的狀態代碼是 200，它表示一切順利。如果就緒狀態是 4 而且狀態代碼是 200，就可以處理伺服器的資料了，而且這些資料應該就是要求的資料

最後我們可以處理伺服器返回的資料了。返回的資料儲存在 XMLHttpRequest 對象的 responseText 屬性中。

關於 responseText 中的常值內容，比如格式和長度，有意保持含糊。這樣伺服器就可以將文本設定成任何內容。比方說，一種指令碼可能返回逗號分隔的值，另一種則使用管道符（即 | 字元）分隔的值，還有一種則返回長文本字串。何去何從由伺服器決定。

XMLHttpRequest 的另一個重要屬性 responseXML。如果伺服器選擇使用 XML 響應則該屬性包含（也許您已經猜到）XML 響應。處理 XML 響應和處理普通文本有很大不同，涉及到解析、文件物件模型（DOM）和其他一些問題。後面將進一步介紹 XML。

我們可以處理伺服器返回的資料了，返回的資料儲存在 XMLHttpRequest 對象的 responseText 屬性中。

 XMLHttpRequest 的另一個重要屬性 responseXML。如果伺服器選擇使用 XML 響應則該屬性包含XML 響應。

處理 XML 響應和處理普通文本有很大不同，涉及到解析、文件物件模型（DOM）和其他一些問題。後面將進

一步介紹 XML。