第108天：Ajax中XMLHttpRequest詳解

   在Ajax應用程式中，XmlHttpRequest物件負責將使用者資訊以非同步通訊地傳送到伺服器端，並接收伺服器返回的響應資訊和資料。

   XMLHttpRequest可以提供不重新載入頁面的情況下更新網頁，在頁面載入後再客戶端向伺服器請求資料，在頁面載入後在伺服器端接收資料，在後臺向客戶端傳送資料。

   XMLHttpRequest和Javascript

   Javascript本身並未具備向伺服器傳送請求的能力，要麼使用window.open()方法重新開啟一個頁面向伺服器提交請求，要麼使用XMLHttpRequest物件傳送請求。不同的是，前者是普通的即同步互動模式，而後者是非同步互動方式。

   XMLHttpRequest提供了一系列的屬性和方法，來向伺服器傳送非同步的http請求；在伺服器處理使用者請求的過程中，XMLHttpRequest通過屬性的狀態值來實時反映http請求所處的狀態，並根據這些狀態指示Javascript做相應的處理；當伺服器順利完成響應使用者行為的動作、並將響應資料返回時，XMLHttpRequest提供的response系列方法，可以將這些響應資料以文字、XML Document物件、Ado Stream物件或者unsigned byte陣列的方式組裝起來，提供給Javascript處理。

XMLHttpRequest物件

一、XMLHttpRequest方法：

1、Open(string method,string url,boolean asynch,String username,string password)
     指定和伺服器端互動的HTTP方法，URL地址，即其他請求資訊；
     Method:表示http請求方法，一般使用”GET“,”POST“.
     url：表示請求的伺服器的地址；
     asynch：表示是否採用非同步方法，true為非同步，false為同步；
     後邊兩個可以不指定，username和password分別表示使用者名稱和密碼，提供http認證機制需要的使用者名稱和密碼。

2、Send(content)
     向伺服器發出請求，如果採用非同步方式，該方法會立即返回。
     content可以指定為null表示不傳送資料，其內容可以是DOM物件，輸入流或字串。

3、SetRequestHeader(String header,String Value)
設定HTTP請求中的指定頭部header的值為value.
此方法需在open方法以後呼叫，一般在post方式中使用。

4、getAllResponseHeaders()
返回包含Http的所有響應頭資訊，其中相應頭包括Content-length,date,uri等內容。
返回值是一個字串，包含所有頭資訊，其中每個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！

5、getResponseHeader(String header)
返回HTTP響應頭中指定的鍵名header對應的值

6、Abort() 
停止當前http請求。對應的XMLHttpRequest物件會復位到未初始化的狀態。

二、XMLHttpRequest屬性：

1、readyState
      表示XMLHttpRequest物件的狀態：0：未初始化。物件已建立，未呼叫open；
      1：open方法成功呼叫，但Sendf方法未呼叫；
      2：send方法已經呼叫，尚未開始接受資料；
      3：正在接受資料。Http響應頭資訊已經接受，但尚未接收完成；
      4：完成，即響應資料接受完成。

2、Onreadystatechange
    請求狀態改變的事件觸發器（readyState變化時會呼叫這個屬性上註冊的javascript函式）。

3、responseText
      伺服器響應的文字內容

4、responseXML
     伺服器響應的XML內容對應的DOM物件

5、Status
     伺服器返回的http狀態碼。200表示“成功”，404表示“未找到”，500表示“伺服器內部錯誤”等。

6、statusText
      伺服器返回狀態的文字資訊。

使用XMLHttpRequest的五步：

   第一步：建立XMLHttpRequest物件
   第二步：註冊回撥方法
   第三步：設定和伺服器互動的相應引數
   第四步：設定向伺服器端傳送的資料，啟動和伺服器端的互動
   第五步：判斷和伺服器端的互動是否完成，還要判斷伺服器端是否正確返回了資料

程式碼展示：

1、建立XMLHttpRequest物件

1 <span style="font-size:18px;">//例項化XMLHttpRequest物件  
2 function createXMLHttpRequest(){  
3     if(window.XMLHttpRequest){  
4         xmlHttp = new XMLHttpRequest();   
5     }else if(window.ActiveXObject){  
6         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
7     }  
8 } </span>

二、註冊回撥方法

      指定當伺服器返回資訊時客戶端的處理方式。只需將相應的處理函式名稱賦給XMLHttpRequest物件的onreadystatechange屬性即可。

 1 <span style=”font-size:18px;”>xmlHttp.onreadystatechange = callBack; </span>  

三、設定和伺服器互動的相應引數

 1 <span style=”font-size:18px;”>xmlhttp.open(“GET”,”ajax?name=” +userName,true); </span>  

四、設定向伺服器端傳送的資料，啟動和伺服器端的互動

 1 <span style=”font-size:18px;”>xmlhttp.send(null);</span>  

五、判斷和伺服器端的互動是否完成，還要判斷伺服器端是否正確返回了資料

 1 <span style="font-size:18px;">function callback(){    
 2      if（xmlhttp.readState==4）{    
 3          //表示伺服器的相應程式碼是200；正確返回了資料     
 4         if(xmlhttp.status==200){     
 5             //純文字資料的接受方法     
 6             var message=xmlhttp.responseText;     
 7             //使用的前提是，伺服器端需要設定content-type為text/xml     
 8             //var domXml=xmlhttp.responseXML;     
 9             //其它程式碼    
10          }     
11     }    
12  }</span>  

AJAX使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。