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表示伺服器端程式有錯誤

  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格式資料到伺服器端的時候，需要對文檔的編碼進行設定。

  '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.");

}

值

狀态

描述

uninitialized

open()函數沒有被調用

1

loading

open()函數正在被調用

2

loaded

send()函數被調用

3

interactive

伺服器端正在傳回結果

4

complete

請求結束，并且伺服器端已經結束發送資料到用戶端