Ajax基礎 同步請求與異步請求

Ajax基礎講義

 使用XMLHttpRequest發送異步請求

 

使用XMLHttpRequest對象發送請求的三個步驟：

· 創建XHR對象

· 準備請求數據，發送請求

· 當響應到達後，處理響應

 

 

1.如何創建XMLHttpRequest對象：

 var xhr;                        
 if (window.XMLHttpRequest) {  
    xhr = new XMLHttpRequest();  
 } else {                        
 xhr = new ActiveXObject("Microsoft.XMLHTTP");//對於其它IE版本請參看Demo代碼
 } else {
   alert("cannot use Ajax");
 }

創建該對象寫出這麼多代碼的原因，就是在不同的瀏覽器下對該對象的實現方式不同。所以為了要適應多種瀏覽器的要求，通過如上代碼來創建XHR對象。

微軟的JS中，並沒有內置的XHR對象，而是通過ActiveX控件實現的，所以的IE瀏覽器下創建XHR對象必須通過ActiveX方式實現。而其它瀏覽器中的JS庫中有內置的JS XHR對象，所以可以直接創建出來。

2.發送請求

在發送請求前，我們需要創建如下的信息：

l 需要請求的URL地址（通過URL地址可以定位到服務器端的一個具體資源）

l 請求的類型，POST方式還是GET方式

l 傳遞給服務器端的參數

l 注冊響應到達後的JS回調函數的名字

調用時使用的三種函數參數格式：

l open(http_method, url)

l open(http_method, url, asynchronous)

l open(http_method, url, asynchronous, userid, password)

 

說明：

第一個參數說明請求的方式，GET或者POST

第二個參數請求的服務器端資源的URL地址

第三個參數，采用異步方式還是同步方式發送請求（說明異步請求和同步請求的區別）

第四個參數，如果服務器端采用了HTTP身份認證方式，那麼需要給出認證的用戶名和密碼

 

例如：

xhr.open('GET', 'servlets/ajax/getItem?id=321', true);

設置回調函數的名字：

xhr.onreadystatechange = parseResponse;

如果采用POST方式，那麼提交給服務器的數據需要調用send方法來發送數據；如果是GET方式那麼send方法給空字符串參數即可

xhr.send('id=321');

3.處理響應 

將請求發送給服務器端後，服務器端的對應程序就會被執行；並將執行後結果返回給客戶端，通過注冊的處理響應的JS函數來處理響應數據。

在你處理響應的JS函數中，需要判斷響應的狀態。通過readyState來判斷，readyState的狀態說明見附表。

在處理響應的方法中：

xhr.onreadystatechange = function(){

  var ready = xhr.readyState;

  if (ready == 4){

    parseCompletedResponse(xhr);

  }

}; 

在status中含有響應的狀態碼，通過響應的狀態碼可以獲得響應的狀態。如200表示響應正常、404表示資源未找到、500表示服務器端程序有錯誤

xhr.onreadystatechange = function(){

  var ready = xhr.readyState;

  if (ready == 4) {

    var status = xhr.status;

    if (status >= 200 && status < 300) {

      parseCompletedResponse(xhr);

    } else {

      parseErroredResponse(xhr);

    }

  }

};

 

響應提供了兩個對象：responseText和responseXML。分別用來獲取不同文本格式的響應和XML格式的響應。

其它的一些響應中的方法：

abort()：放棄請求。即使請求已經被發送，服務器端已經產生響應，也會忽略響應的結果，而且結束處理。

setRequestHeader(header,value)：設置請求的頭部信息。例如：

xhr.setRequestHeader(

  'Content-type', 

  'application/x-www-form-urlencoded'

);

客戶端發送XML格式數據到服務器端的時候，需要對文檔的編碼進行設置。

xhr.setRequestHeader(

  'Content-type', 

  'application/xml; charset=UTF-8'

);

xhr.send("<data source='ajax in practice'>hello world</data>");

getResponseHeader(header)和getAllResponseHeaders()方法：用來獲取響應的頭部信息。getAllResponseHeaders將取回所有響應的頭部的名字。getResponseHeader方法將根據頭部的key值取出value值。

if (xhr.getResponseHeader("Server")

  .indexOf("Microsoft-IIS") != -1 ) {

    alert("The server is a Microsoft IIS server.");

}

 

值	狀態	描述
0	Uninitialized	open()函數沒有被調用
1	Loading	open()函數正在被調用
2	Loaded	send()函數被調用
3	Interactive	服務器端正在返回結果
4	Complete	請求結束，並且服務器端已經結束發送數據到客戶端