XMLHttpRequest物件是當今所有AJAX和Web 2.0應用程式的技術基礎。儘管軟體經銷商和開源社團現在都在提供各種AJAX框架以進一步簡化XMLHttpRequest物件的使用；但是，我們仍然很有必要理解這個物件的詳細工作機制。

　　一、 引言

　　AJAX利用一個構建到所有現代瀏覽器內部的物件-XMLHttpRequest-來實現傳送和接收HTTP請求與響應資訊。一個經由XMLHttpRequest物件傳送的HTTP請求並不要求頁面中擁有或回寄一個＜form＞元素。AJAX中的"A"代表了"非同步"，這意味著XMLHttpRequest物件的send()方法可以立即返回，從而讓Web頁面上的其它HTML/JavaScript繼續其瀏覽器端處理而由伺服器處理HTTP請求併發送響應。儘管預設情況下請求是非同步進行的，但是，你可以選擇傳送同步請求，這將會暫停其它Web頁面的處理，直到該頁面接收到伺服器的響應為止。

　　微軟在其Internet Explorer(IE) 5中作為一個ActiveX物件形式引入了XMLHttpRequest物件。其他的認識到這一物件重要性的瀏覽器製造商也都紛紛在他們的瀏覽器內實現了XMLHttpRequest物件，但是作為一個本地JavaScript物件而不是作為一個ActiveX物件實現。而如今，在認識到實現這一型別的價值及安全性特徵之後，微軟已經在其IE 7中把XMLHttpRequest實現為一個視窗物件屬性。幸運的是，儘管其實現(因而也影響到呼叫方式)細節不同，但是，所有的瀏覽器實現都具有類似的功能，並且實質上是相同方法。目前，W3C組織正在努力進行XMLHttpRequest物件的標準化，並且已經發行了有關該W3C規範的一個草案。

　　本文將對XMLHttpRequest物件API進行詳細討論，並將解釋其所有的屬性和方法。

　　二、 XMLHttpRequest物件的屬性和事件

　　XMLHttpRequest物件暴露各種屬性、方法和事件以便於指令碼處理和控制HTTP請求與響應。下面，我們將對此展開詳細的討論。
readyState屬性

　　當XMLHttpRequest物件把一個HTTP請求傳送到伺服器時將經歷若干種狀態：一直等待直到請求被處理；然後，它才接收一個響應。這樣以來，指令碼才正確響應各種狀態-XMLHttpRequest物件暴露一個描述物件的當前狀態的readyState屬性，如表格1所示。

　　表格1.XMLHttpRequest物件的ReadyState屬性值列表。

ReadyState取值 描述 
0  描述一種"未初始化"狀態；此時，已經建立一個XMLHttpRequest物件，但是還沒有初始化。 
1  描述一種"傳送"狀態；此時，程式碼已經呼叫了XMLHttpRequest open()方法並且XMLHttpRequest已經準備好把一個請求傳送到伺服器。 
2  描述一種"傳送"狀態；此時，已經通過send()方法把一個請求傳送到伺服器端，但是還沒有收到一個響應。 
3  描述一種"正在接收"狀態；此時，已經接收到HTTP響應頭部資訊，但是訊息體部分還沒有完全接收結束。 
4  描述一種"已載入"狀態；此時，響應已經被完全接收。 

　　onreadystatechange事件

　　無論readyState值何時發生改變，XMLHttpRequest物件都會激發一個readystatechange事件。其中，onreadystatechange屬性接收一個EventListener值-向該方法指示無論readyState值何時發生改變，該物件都將啟用。

　　responseText屬性

　　這個responseText屬性包含客戶端接收到的HTTP響應的文字內容。當readyState值為0、1或2時，responseText包含一個空字串。當readyState值為3(正在接收)時，響應中包含客戶端還未完成的響應資訊。當readyState為4(已載入)時，該responseText包含完整的響應資訊。

　　responseXML屬性

　　此responseXML屬性用於當接收到完整的HTTP響應時(readyState為4)描述XML響應；此時，Content-Type頭部指定MIME(媒體)型別為text/xml，application/xml或以+xml結尾。如果Content-Type頭部並不包含這些媒體型別之一，那麼responseXML的值為null。無論何時，只要readyState值不為4，那麼該responseXML的值也為null。

　　其實，這個responseXML屬性值是一個文件介面型別的物件，用來描述被分析的文件。如果文件不能被分析(例如，如果文件不是良構的或不支援文件相應的字元編碼)，那麼responseXML的值將為null。

　　status屬性

　　這個status屬性描述了HTTP狀態程式碼，而且其型別為short。而且，僅當readyState值為3(正在接收中)或4(已載入)時，這個status屬性才可用。當readyState的值小於3時試圖存取status的值將引發一個異常。

　　statusText屬性

　　這個statusText屬性描述了HTTP狀態程式碼文字；並且僅當readyState值為3或4才可用。當readyState為其它值時試圖存取statusText屬性將引發一個異常。

三、 XMLHttpRequest物件的方法

　　XMLHttpRequest物件提供了各種方法用於初始化和處理HTTP請求，下列將逐個展開詳細討論。

　　abort()方法

　　你可以使用這個abort()方法來暫停與一個XMLHttpRequest物件相聯絡的HTTP請求，從而把該物件復位到未初始化狀態。

　　open()方法

　　你需要呼叫open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一個XMLHttpRequest物件。其中，method引數是必須提供的-用於指定你想用來發送請求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。為了把資料傳送到伺服器，應該使用POST方法；為了從伺服器端檢索資料，應該使用GET方法。另外，uri引數用於指定XMLHttpRequest物件把請求傳送到的伺服器相應的URI。藉助於window.document.baseURI屬性，該uri被解析為一個絕對的URI-換句話說，你可以使用相對的URI-它將使用與瀏覽器解析相對的URI一樣的方式被解析。async引數指定是否請求是非同步的-預設值為true。為了傳送一個同步請求，需要把這個引數設定為false。對於要求認證的伺服器，你可以提供可選的使用者名稱和口令引數。在呼叫open()方法後，XMLHttpRequest物件把它的readyState屬性設定為1(開啟)並且把responseText、responseXML、status和statusText屬性復位到它們的初始值。另外，它還復位請求頭部。注意，如果你呼叫open()方法並且此時readyState為4，則XMLHttpRequest物件將復位這些值。

　　send()方法

　　在通過呼叫open()方法準備好一個請求之後，你需要把該請求傳送到伺服器。僅當readyState值為1時，你才可以呼叫send()方法；否則的話，XMLHttpRequest物件將引發一個異常。該請求被使用提供給open()方法的引數傳送到伺服器。當async引數為true時，send()方法立即返回，從而允許其它客戶端指令碼處理繼續。在呼叫send()方法後，XMLHttpRequest物件把readyState的值設定為2(傳送)。當伺服器響應時，在接收訊息體之前，如果存在任何訊息體的話，XMLHttpRequest物件將把readyState設定為3(正在接收中)。當請求完成載入時，它把readyState設定為4(已載入)。對於一個HEAD型別的請求，它將在把readyState值設定為3後再立即把它設定為4。

　　send()方法使用一個可選的引數-該引數可以包含可變型別的資料。典型地，你使用它並通過POST方法把資料傳送到伺服器。另外，你可以顯式地使用null引數呼叫send()方法，這與不用引數呼叫它一樣。對於大多數其它的資料型別，在呼叫send()方法之前，應該使用setRequestHeader()方法(見後面的解釋)先設定Content-Type頭部。如果在send(data)方法中的data引數的型別為DOMString，那麼，資料將被編碼為UTF-8。如果資料是Document型別，那麼將使用由data.xmlEncoding指定的編碼序列化該資料。

　　setRequestHeader()方法

　　該setRequestHeader(DOMString header，DOMString value)方法用來設定請求的頭部資訊。當readyState值為1時，你可以在呼叫open()方法後呼叫這個方法；否則，你將得到一個異常。

　　getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用於檢索響應的頭部值。僅當readyState值是3或4(換句話說，在響應頭部可用以後)時，才可以呼叫這個方法；否則，該方法返回一個空字串。

　　getAllResponseHeaders()方法

　　該getAllResponseHeaders()方法以一個字串形式返回所有的響應頭部（每一個頭部佔單獨的一行）。如果readyState的值不是3或4，則該方法返回null。

四、 傳送請求

　　在AJAX中，許多使用XMLHttpRequest的請求都是從一個HTML事件（例如一個呼叫JavaScript函式的按鈕點選(onclick)或一個按鍵(onkeypress)）中被初始化的。AJAX支援包括表單校驗在內的各種應用程式。有時，在填充表單的其它內容之前要求校驗一個唯一的表單域。例如要求使用一個唯一的UserID來登錄檔單。如果不是使用AJAX技術來校驗這個UserID域，那麼整個表單都必須被填充和提交。如果該UserID不是有效的，這個表單必須被重新提交。例如，一個相應於一個要求必須在伺服器端進行校驗的Catalog ID的表單域可能按下列形式指定：

1. ＜form name="validationForm" action="validateForm" method="post"＞  
2. ＜table＞  
3. 　＜tr＞＜td＞Catalog Id:＜/td＞  
4. 　　＜td＞  
5. 　　　＜input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" onkeyup="sendRequest()"＞  
6. 　　＜/td＞  
7. 　　＜td＞＜div id="validationMessage"＞＜/div＞＜/td＞  
8. 　＜/tr＞  
9. ＜/table＞＜/form＞   

　　前面的HTML使用validationMessage div來顯示相應於這個輸入域Catalog Id的一個校驗訊息。onkeyup事件呼叫一個JavaScript sendRequest()函式。這個sendRequest()函式建立一個XMLHttpRequest物件。建立一個XMLHttpRequest物件的過程因瀏覽器實現的不同而有所區別。如果瀏覽器支援XMLHttpRequest物件作為一個視窗屬性(所有普通的瀏覽器都是這樣的，除了IE 5和IE 6之外)，那麼，程式碼可以呼叫XMLHttpRequest的構造器。如果瀏覽器把XMLHttpRequest物件實現為一個ActiveXObject物件(就象在IE 5和IE 6中一樣)，那麼，程式碼可以使用ActiveXObject的構造器。下面的函式將呼叫一個init()函式，它負責檢查並決定要使用的適當的建立方法-在建立和返回物件之前。 [javascript] view plain copy

1. ＜script type="text/javascript"＞  
2. function sendRequest(){  
3. 　var xmlHttpReq=init();  
4. 　function init(){  
5. 　　if (window.XMLHttpRequest) {  
6. 　　　return new XMLHttpRequest();  
7. 　　}   
8. 　else if (window.ActiveXObject) {  
9. 　　return new ActiveXObject("Microsoft.XMLHTTP");  
10. 　}  
11. }  
12. ＜/script＞   

　　接下來，你需要使用Open()方法初始化XMLHttpRequest物件-指定HTTP方法和要使用的伺服器URL。 var catalogId=encodeURIComponent(document.getElementById("catalogId").value);
xmlHttpReq.open("GET"， "validateForm?catalogId=" + catalogId， true);  　　預設情況下，使用XMLHttpRequest傳送的HTTP請求是非同步進行的，但是你可以顯式地把async引數設定為true，如上面所展示的。
在這種情況下，對URL validateForm的呼叫將啟用伺服器端的一個servlet，但是你應該能夠注意到伺服器端技術不是根本性的；實際上，該URL可能是一個ASP，ASP.NET或PHP頁面或一個Web服務-這無關緊要，只要該頁面能夠返回一個響應-指示CatalogID值是否是有效的-即可。因為你在作一個非同步呼叫，所以你需要註冊一個XMLHttpRequest物件將呼叫的回撥事件處理器-當它的readyState值改變時呼叫。記住，readyState值的改變將會激發一個readystatechange事件。你可以使用onreadystatechange屬性來註冊該回調事件處理器。 xmlHttpReq.onreadystatechange=processRequest;  　　然後，我們需要使用send()方法傳送該請求。因為這個請求使用的是HTTP GET方法，所以，你可以在不指定引數或使用null引數的情況下呼叫send()方法。 xmlHttpReq.send(null);  五、 處理請求

　　在這個示例中，因為HTTP方法是GET，所以在伺服器端的接收servlet將呼叫一個doGet()方法，該方法將檢索在URL中指定的catalogId引數值，並且從一個數據庫中檢查它的有效性。

　　本文示例中的這個servlet需要構造一個傳送到客戶端的響應；而且，這個示例返回的是XML型別，因此，它把響應的HTTP內容型別設定為text/xml並且把Cache-Control頭部設定為no-cache。設定Cache-Control頭部可以阻止瀏覽器簡單地從快取中過載頁面。

1. public void doGet(HttpServletRequest request，   
2. HttpServletResponse response)  
3. throws ServletException， IOException {  
4. 　...  
5. 　...  
6. 　response.setContentType("text/xml");  
7. 　response.setHeader("Cache-Control"， "no-cache");  
8. }   

　　來自於伺服器端的響應是一個XML DOM物件，此物件將建立一個XML字串-其中包含要在客戶端進行處理的指令。另外，該XML字串必須有一個根元素。 out.println("＜catalogId＞valid＜/catalogId＞");  　　【注意】XMLHttpRequest物件的設計目的是為了處理由普通文字或XML組成的響應；但是，一個響應也可能是另外一種型別，如果使用者代理(UA)支援這種內容型別的話。

　　當請求狀態改變時，XMLHttpRequest物件呼叫使用onreadystatechange註冊的事件處理器。因此，在處理該響應之前，你的事件處理器應該首先檢查readyState的值和HTTP狀態。當請求完成載入（readyState值為4）並且響應已經完成（HTTP狀態為"OK"）時，你就可以呼叫一個JavaScript函式來處理該響應內容。下列指令碼負責在響應完成時檢查相應的值並呼叫一個processResponse()方法。 function processRequest(){
　if(xmlHttpReq.readyState==4){
　　if(xmlHttpReq.status==200){
　　　processResponse();
　　}
　}
}  　　該processResponse()方法使用XMLHttpRequest物件的responseXML和responseText屬性來檢索HTTP響應。如上面所解釋的，僅當在響應的媒體型別是text/xml，application/xml或以+xml結尾時，這個responseXML才可用。這個responseText屬性將以普通文字形式返回響應。對於一個XML響應，你將按如下方式檢索內容： var msg=xmlHttpReq.responseXML;  　　藉助於儲存在msg變數中的XML，你可以使用DOM方法getElementsByTagName()來檢索該元素的值： var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue;  　　最後，通過更新Web頁面的validationMessage div中的HTML內容並藉助於innerHTML屬性，你可以測試該元素值以建立一個要顯示的訊息： if(catalogId=="valid"){
　var validationMessage = document.getElementById("validationMessage");
　validationMessage.innerHTML = "Catalog Id is Valid";
}
else
{
　var validationMessage = document.getElementById("validationMessage");
　validationMessage.innerHTML = "Catalog Id is not Valid";
}  　　六、 小結

　　上面就是XMLHttpRequest物件使用的所有細節實現。通過不必把Web頁面寄送到伺服器而實現資料傳送，XMLHttpRequest物件為客戶端與伺服器之間提供了一種動態的互動能力。你可以使用JavaScript啟動一個請求並處理相應的返回值，然後使用瀏覽器的DOM方法更新頁面中的資料。  附：簡單的示例程式碼

1. html:  
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
3. <html xmlns="http://www.w3.org/1999/xhtml">  
4. <head runat="server">  
5.     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
6.     <title>示例</title>  
7.     <script src="Ajax.js"></script>  
8. </head>  
9. <body>     
10. <a href="#" onclick="ajaxReader('data5.xml'); return false"> 檢視</a>  
11. <div id="dataArea">  
12. </div>              
13. </body>  
14. </html>  
15. script:  
16. // JScript File  
17. function  ajaxReader(file)  
18.     {  
19.         //定義xmlobj物件  
20.         var xmlObj=null;  
21.         if(window.XMLHttpRequest)  
22.         {  
23.             xmlObj=new XMLHttpRequest();  
24.         }  
25.         else if(window.ActiveXObject)  
26.         {  
27.             xmlObj=new ActiveXObject("Microsoft.XMLHTTP");  
28.         }  
29.         else  
30.         {  
31.             return;  
32.         }  
33.         xmlObj.onreadystatechange=function(){  
34.                                                 if(xmlObj.readyState==4)  
35.                                                 {                                                  
36.                                                           processXML(xmlObj.responseXML);   
37.                                                  }  
38.                                                  }                                                                                                                                            
39.        xmlObj.open('GET',file,true);  
40.        xmlObj.send('');      
41.     }  
42. function processXML(obj)  
43. {  
44.  var dataArray=obj.getElementsByTagName('pets')[0].childNodes;  
45.     var dataArrayLength=dataArray.length;  
46.     var insertData='<table>';  
47.     insertData +='<tr><th>Pet5</th><th>Tasks</th></tr>';  
48.      for(var i=0;i<dataArrayLength;i++)  
49.      {  
50.         if(dataArray[i].tagName)  
51.         {  
52.             insertData+='<tr>';      
53.             insertData +='<td>'+dataArray[i].tagName+'</td>';  
54.             insertData +="<td>"+dataArray[i].getAttribute('tasks')+'</td>';  
55.             insertData+='</tr>';     
56.         }         
57.    }  
58.    insertData +=+'</table>';  
59.    document.getElementById('dataArea4').innerHTML =insertData;  
60. }