Ajax中的XMLHttpRequest對象詳解

   XMLHttpRequest對象是Ajax技術的核心。在Internet Explorer 5中，XMLHttpRequest對象以ActiveX對象引入，被稱之爲XMLHTTP，它是一種支持異步請求的技術。後來Mozilla、Netscape、Safari、Firefox和其餘瀏覽器也提供了XMLHttpRequest類，雖然這些瀏覽器都提供了XMLHttpRequest類，但它們建立XMLHttpRequest類的方法並不相同。XMLHttpRequest使咱們可使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶的其餘操做。

   不刷新頁面就和服務器進行交互是Ajax最大的特色。這個重要的特色主要歸功於XMLHttpRequest對象。使用XMLHttpRequest對象使得網頁應用程序像windows應用程序同樣，可以及時響應用戶與服務器之間的交互，沒必要進行頁面刷新或者跳轉，而且可以進行一系列的數據處理，這些功能可使用戶的等待時間縮短，同時也減輕了服務器端的負載。

   目前XMLHttpRequest對象已經獲得了大部分瀏覽器的支持，所以使用Ajax技術開發Web應用程序的時候通常狀況下不會出現問題。不過，當開發人員肯定使用Ajax技術來開發時，仍然須要考慮用戶會使用什麼樣的瀏覽器來對網站進行訪問，雖然不支持XMLHttpRequest對象的瀏覽器佔少數。

   在使用XMLHttpRequest對象向服務器發送請求和處理響應以前，必修先用JavaScript建立一個XMLHttpRequest對象，而後經過這個對象來和服務器創建請求並接收服務器返回的數據。因爲XMLHttpRequest不是一個W3C標準，因此能夠採用多種方法使用JavaScript來建立XMLHttpRequest的實例。Internet Explorer把XMLHttpRequest實現爲一個ActiveX對象，其餘瀏覽器（如Firefox、Safari和Opera等）把它實現爲一個本地JavaScript對象。因爲存在這些差異，JavaScript代碼中必須包含有關的邏輯，從而使用ActiveX技術或者使用本地JavaScript對象技術來建立XMLHttpRequest的一個實例。

   正由於在不一樣的瀏覽器中，XMLHttpRequest對象的建立方式不一樣，所以在程序中建立XMLHttpRequest對象以前須要對瀏覽器進行判斷。使用詳細編寫代碼方式來區別瀏覽器類型的方式不只代碼量大，並且很不方便也不靈活。在這裏咱們能夠換一種思路來解決，只須要檢查瀏覽器是否提供對ActiveX對象的支持便可。若是瀏覽器支持ActiveX對象，就可使用ActiveX來建立XMLHttpRequest對象。不然，就須要在程序中使用本地JavaScript對象技術來建立。下面的代碼展現了在不一樣的瀏覽器中使用JavaScript代碼來建立XMLHttpRequest對象的編程方法。

        function createXMLHttpRequest() { var xmlreq = false; if (window.ActiveXObject) { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } return xmlreq; }

   咱們從上面代碼中看出，建立XMLHttpRequest對象的過程比較簡單。首先在createXMLHttpRequest()方法中建立了一個變量xmlreq來保存對這個對象的引用，並將其默認值設置爲false。而後在這個方法中經過簡單的判斷，肯定究竟使用什麼方法來建立對象。因爲用戶使用的瀏覽器類型不一樣，代碼window.ActiveXObject可能返回一個對象，也可能返回null。If條件語句根據返回的結果來判斷瀏覽器是否能支持ActiveX控件，相應地得知瀏覽器是IE仍是其餘瀏覽器類型。若是斷定用戶使用的是IE瀏覽器，則經過實例化ActiveXObject的一個實例的方法來建立XMLHttpRequest對象。使用這種方法時，參數字符串指明要建立何種類型的ActiveX對象。在本例子中，參數是Microsoft.XMLHTTP，這說明須要建立的是XMLHttpRequest的一個實例。

   若是window.ActiveXObject返回null，表示用戶使用的瀏覽器不支持ActiveX對象，那麼程序會執行else語句所指定的操做。首先判斷瀏覽器是否把XMLHttpRequest實現爲本地JavaScript對象。若是存在window.XMLHttpRequest，那麼就建立XMLHttpRequest對象。最後將這個xmlreq變量返回，完成了XMLHttpRequest對象的建立過程。

因爲JavaScript具備動態類型的特性，並且XMLHttpRequest對象在不一樣瀏覽器上的實現是兼容的，全部能夠用一樣的方式訪問XMLHttpRequest實例的屬性和方法，而不論這個實例建立的方法是什麼。這就大大簡化了開發過程，並且在JavaScript中也沒必要編寫特定於瀏覽器的邏輯。

XMLHttpRequest對象的屬性

XMLHttpRequest對象提供了許多屬性，處理XMLHttpRequest時須要頻繁用到這些屬性，以下表所示：

屬性	描述
onreadystatechange	每一個狀態改變時都會觸發這個事件處理程序，一般會調用一個JavaScript函數
readyState	請求的狀態
responseText	服務器的響應，表示爲一個串
responseXML	服務器的響應，表示爲XML，這個對象能夠解析爲一個DOM對象
status	服務器的HTTP狀態
statusText	HTTP狀態的對應文本

 

下面咱們來看看這些屬性和事件的詳細說明。

1. readyState屬性

    當XMLHttpRequest對象吧一個HTTP請求發送到服務器時將經歷若干種狀態。一直等待直到請求被處理，而後，它才接收一個響應。這樣以來，腳本才正確響應各類狀態，XMLHttpRequest對象暴露一個描述對象的當前狀態的readyState屬性，以下表所示：

readyState取值	描述
0	描述一種「未初始化」狀態。此時，已經建立了一個XMLHttpRequest對象，可是尚未初始化。
1	描述一種「發送」狀態。此時，代碼已經調用了XMLHttpRequest open()方法而且XMLHttpRequest已經準備好把一個請求發送到服務器。
2	描述一種「發送」狀態。此時，已經經過send()方法把一個請求發送到服務器端，可是尚未收到一個響應。
3	描述一種「正在接收」狀態。此時，已經接收到HTTP響應頭部信息，可是消息體部分尚未徹底接收結束。
4	描述一種「已加載」狀態。此時，響應已經被徹底接收。

 

2. onreadystatechange屬性

不管readyState值什麼時候發生改變，XMLHttpRequest對象都會激發一個readystatechange事件。其中，onreadystatechange屬性接收一個EventListener值，向該方法指示不管readyState值什麼時候發生改變，該對象都將激活。

3. responseText屬性

這個responseText屬性包含客戶端接收到的HTTP響應的文本內容。當readyState值爲0、1或2時，responseText包含一個空字符串。當readyState值爲3（正在接收）時，響應中包含客戶端還未完成的響應信息。當readyState爲4（已加載）時，該responseText包含完整的響應信息。

4. responseXML屬性

此屬性用於當接收到完整的HTTP響應時（readyState爲4）描述XML響應；此時，Content-Type頭部指定MIME（媒體）類型爲text/xml，application/xml或以+xml結尾。若是Content-Type頭部並不包含這些媒體類型之一，那麼responseXML的值爲null。不管什麼時候，只要readyState值不爲4，那麼該responseXML的值也爲null。

其實，這個responseXML屬性值是一個文檔接口類型的對象，用來描述被分析的文檔。若是文檔不能被分析（例如，若是文檔不是良構的或不支持文檔相應的字符編碼），那麼responseXML的值將爲null。

5. status屬性

這個屬性描述了HTTP狀態代碼，並且其類型爲short。並且，僅當readyState值爲3（正在接收中）或4（已加載）時，這個status屬性纔可用。當readyState的值小於3時試圖存取status的值將引起一個異常。例如：status等於200表示成功，404表示未找到資源。

6. statusText屬性

這個屬性描述了HTTP狀態代碼文本，而且僅當readyState值爲3或4纔可用。當readyState爲其它值時試圖存取statusText屬性將引起一個異常。

XMLHttpRequest對象的方法

下表顯示了XMLHttpRequest對象的一些經常使用的方法，其中描述部分介紹了這些方法的做用和意義。

方法	描述
abort()	中止當前請求
getAllResponseHeaders()	把HTTP請求的全部相應首部做爲鍵/值對返回。
getResponseHeader("header")	返回指定首部的串值。
open("method","url")	創建對服務器的調用。method參數能夠是GET、POST或PUT等；url參數能夠是相對URL或絕對URL。這個方法還包括3個可選參數。
send(content)	向服務器發送請求。
setRequestHeader("header","value")	把指定首部設置爲所提供的值，在設置任何首部以前必須先調用open()方法。

 

下面咱們來更詳細的看看這些方法的使用。

1. abort()方法

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

2. open()方法

   此方法用來和服務器之間創建鏈接。其完整的方法參數是

open(string method，
　　string uri，
　　boolean asynch，
　　string username，
　　string password)，

 

其中前兩個參數是必要的，後面三個爲可選參數。

  method參數是必須提供的，用於指定用來發送請求的HTTP方法（GET，POST，PUT，DELETE或HEAD）。爲了把數據發送到服務器，應該使用POST方法；爲了從服務器端檢索數據，應該使用GET方法。

  uri參數用於指定XMLHttpRequest對象把請求發送到的服務器相應的URI。藉助於window.document.baseURI屬性，該uri被解析爲一個絕對的URI。換句話說，若是使用相對的URI，它將使用與瀏覽器解析相對的URI同樣的方式被解析。

  Asynch參數指定是否請求是異步的，缺省值爲true。爲了發送一個同步請求，須要把這個參數設置爲false。但Ajax技術的最大優勢是 調用，所以若是這個參數設置爲false，則將失去使用XMLHttpRequest對象的意義。對於要求認證的服務器，能夠提供可選的用戶名和口令參數。

 在調用open()方法後，XMLHttpRequest對象把它的readyState屬性設置爲1（打開）而且把responseText、responseXML、status和statusText屬性復位到它們的初始值。另外，它還復位請求頭部。注意，若是調用open()方法而且此時readyState爲4，則XMLHttpRequest對象將復位這些值。

3. send()方法

   在經過調用open()方法準備好一個請求以後，須要把該請求發送到服務器。僅當readyState值爲1時，才能夠調用send()方法。不然的話，XMLHttpRequest對象將引起一個異常。該請求被使用提供給open()方法的參數發送到服務器。當asynch參數爲true時，send()方法當即返回，從而容許其它客戶端腳本處理繼續。在調用send()方法後，XMLHttpRequest對象把readyState的值設置爲2（發送）。當服務器響應時，在接收消息體以前，若是存在任何消息體的話，XMLHttpRequest對象將把readyState設置爲3（正在接收中）。當請求完成加載時，它把readyState設置爲4（已加載）。對於一個HEAD類型的請求，它將在把readyState值設置爲3後再當即把它設置爲4。

   send()方法使用一個可選的參數，該參數能夠包含可變類型的數據。典型地，使用它並經過POST方法把數據發送到服務器。另外，能夠顯式地使用null參數調用send()方法，這與不用參數調用它同樣。對於大多數其它的數據類型，在調用send()方法以前，應該使用setRequestHeader()方法（見後面的解釋）先設置Content-Type頭部。

若是在send(content)方法中的content參數的類型爲string，那麼，數據將被編碼爲UTF-8。

若是數據是Document類型，那麼將使用由data.xmlEncoding指定的編碼串行化該數據。

   注意，因爲調用這個方法後就把請求發出去了，因此對於XMLHttpRequest對象的設置須要在調用這個方法以前來完成。另外，對於send()方法中的那個參數，雖然是可選的，可是最好在不須要發送數據的時候也不能省略這個參數，應該將其設置成null，不然將會在Firefox中有錯誤。

 

4. setRequestHeader("header","value")方法

該方法用來設置請求的頭部信息。當readyState值爲1時，能夠在調用open()方法後調用這個方法。不然，將獲得一個異常。

5. getResponseHeader("header")方法

該方法用於檢索響應的頭部值。僅當readyState值是3或4（換句話說，在響應頭部可用之後）時，才能夠調用這個方法；不然，該方法返回一個空字符串。

6. getAllResponseHeaders()方法

該方法以一個字符串形式返回全部的響應頭部（每個頭部佔單獨的一行）。若是readyState的值不是3或4，則該方法返回null。