【1】 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中也不必編寫特定於瀏覽器的邏輯。

【2】XMLHttpRequest物件的屬性

XMLHttpRequest物件提供了許多屬性，處理XMLHttpRequest時需要頻繁用到這些屬性，如下表所示：

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

② onreadystatechange屬性

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

③ responseText屬性

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

④ 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屬性

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

⑥ statusText屬性

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

【3】XMLHttpRequest物件的方法

下表顯示了XMLHttpRequest物件的一些常用的方法，其中描述部分介紹了這些方法的作用和意義。

① abort()方法

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

② 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物件將復位這些值。

③ 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中有錯誤。

④ setRequestHeader(“header”,“value”)方法

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

⑤ getResponseHeader(“header”)方法

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

⑥ getAllResponseHeaders()方法

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