初識Ajax

標籤：調用   儲存   響應   state   網路   輸出   對象   處理   microsoft   

本節要點：

• 什麼是Ajax
• XMLHttpRequest對象
• 建立Ajax的過程

 

1         什麼是AJAX

AJAX是Asynchronous JavaScript  And XML的縮寫，但是，很多被認為是“Ajax”的頁面並沒有使用JavaScript或xml，所以把Ajax定義為一種構建Web頁面的方法，使頁面像案頭應用一樣具有響應性和互動性，這種說法更合適。AJAX的主要用途是使用JavaScript從伺服器擷取資料而不必重新整理整個頁面。其中AJAX拆分開來解釋：

• Asynchronous：發送請求後不等返回結果，由回呼函數處理結果
• JavaScript：向伺服器發起請求，獲得返回結果，更新頁面
• XML：封裝資料

2         XMLHttpRequest對象

XMLHttpRequest是整個Ajax技術的靈魂。可以說沒有XMLHttpRequest，就沒有Ajax。Ajax技術的核心是非同步發送請求，而XMLHttpRequest則是非同步發送請求的對象。

XMLHttpRequest對象不是一個國際標準。在不同瀏覽器中有不同的實現。要實現能夠跨越瀏覽器啟動並執行Ajax應用，必須考慮所有的使用場合。使用時必鬚根據瀏覽器採用不同的文法進行建立。但對每一個都進行判斷不合實際，可以利用JavaScript的異常處理機制實現跨瀏覽器的XMLHttpRequest對象建立指令碼。

樣本：

var xmlhttp;

//IE瀏覽器

try{

     xmlhttp= new ActiveXObject(‘Msxml2.XMLHTTP‘);

}catch(e){

      try{

                        xmlhttp= new ActiveXObject(‘Microsoft.XMLHTTP‘);

      }catch(e){

              try{

                       //DOM 2瀏覽器

                       xmlhttp= new XMLHttpRequest();

              }catch(e){}

      }

} 

 

3         建立Ajax的過程

3.1       構建Ajax應用

利用XMLHttpRequest(XHR)對象，每次構建Ajax應用必須遵循以下步驟：

• 建立XMLHttpRequest對象
• 建立Ajax請求
• 發送Ajax請求
• 處理伺服器響應

建立完XMLHttpRequest對象後就可 以開始使用它了。首先介紹open()方法，它建立一個請求，並準備向伺服器發送，open方法文法如下：

open(method , url , asynchronous , user , password);

其中的參數含義如下：

• method：指定請求的類型，一般為get或post;
• url：指定請求的地址，可以使用絕對位址或相對位址，可以附帶查詢字串
• asynchronous：選擇性參數，標識請求是同步還是非同步，非同步請求為true,同步請求為false，預設情況下該參數為true；
• user：選擇性參數，指定請求的使用者名稱，沒有則省略；
• password：選擇性參數， 指定請求的密碼，沒有則省略；

樣本：建立一個請求，利用get方式發送，伺服器url為“my.do”

xmlhttp.open(“get”, “my.do”);

 

3.2       發送Ajax請求

在建立一個請求以後，可以使用send()方法向伺服器發送這個請求，同時發送資料。其原型如下：

send(body);

該方法僅有一個body參數，它標識要向伺服器發送的資料，其格式為查詢字串的形式。

樣本：

var body = “userName=qiyi&sex=male&age=25”;

xmlhttp.send(body);

3.3       捕獲請求的狀態變化

在發送請求後，往往無法知道請求什麼時候完成，所以必須利用事件機制捕獲請求的狀態，XMLHttpRequest對象提供了onreadystatechange事件實現這一功能。 onreadystatechange事件可以指定一個事件處理函數來處理XMLHttpRequest對象的執行結果。 在調用open方法與send方法時都會觸發onreadystatechange事件。

樣本：

xmlhttp.onreadystatechange=function(){  

//事件處理代碼

}

3.4       readyState狀態值

onreadystatechange事件是在readyState屬性方法改變時觸發，readyState的值表示了當前請求的狀態，在事件處理常式中可以根據這個值進行不同的處理，下表介紹了每個值的含義。

readyState	含義
0	表示對象已經建立，但還未初始化。
1	當調用open()方法後，readyState=1，表示XMLHttpRequest對象已經被初始化
2	當調用send()方法後，XHR在向伺服器發送請求的這段時間內，readyState =2
3	當調用send()方法後，伺服器成功接收到所有請求後，readyState = 3
4	表示已經成功接收到來自伺服器的響應資料。

使用readyState屬性判斷請求狀態

在整個請求過程中，onreadystatechange事件在每一次readyState值發生改變時都會被觸發。通常在事件中判斷readyState的值是在請求完成時才做處理。

xmlhttp.onreadystatechange=function(){

         if(xmlhttp.readState ==4){

         //對伺服器響應資料進行處理

         }

}

3.5       使用status屬性判斷請求的結果

status儲存伺服器端返回的HTTP響應代碼，它代表請求的處理結果，下表列出了常見的響應代碼的含義：

Http狀態代碼	含義
200	請求成功
202	請求被接收，但處理未完成
400	錯誤的請求
404	請求資源未找到
500	內部伺服器錯誤

在請求已經完成的情況下，可以使用status判斷請求的結果，其中，404錯誤是最常見的錯誤碼，代表“請求資源未找到”。在Ajax的開發中，最常用的是200這個響應代碼，例如在瀏覽器成功開啟了一個網頁，這時HTTP相應代碼就是200，但這個代碼一般不會顯示。

xmlhttp.onreadystatechange=function(){

         if(xmlhttp.readState ==4){

                   if(xmlhttp.status ==200){

                            //請求成功完成

                   }

                   else{

                            //網路失敗或者伺服器錯誤

                   }

         }

}

XHR對象可以接收伺服器返回的文本片段和XML文檔，分別儲存在responseText與responseXML屬性中。

3.6       獲得返迴文本

1)        使用responseText獲得返回的文本

當伺服器端處理了請求並返回後，可以利用XMLHttpRequest對象的responseText屬性擷取返回的文本片段。

//定義XMLHttpRequest對象的事件處理常式

xmlhttp.onreadystatechange=function(){      

         if(xmlhttp.readyState==4){

                   if(xmlhttp.status==200){

                            //捕捉文本                                                              alert(xmlhttp.responseText);

                   }else{

                            alert(xmlhttp.status);

                   }

         }

}

2)        使用responseXML捕捉XML文檔

除responseText屬性外，還可以用responseXML屬性來擷取伺服器返回的XML文檔。在使用responseText屬性擷取返回的純文字時，伺服器端無需特殊的操作。

如果伺服器返回的是XML文檔，必須要求響應體的HTTP頭資訊中“content-type”屬性為“text/xml”。

假如伺服器返回以下XML文檔

<?xml version="1.0" encoding="UTF-8">

<root>

<title>這是伺服器返回的XML資料</title>

</root>

 

//將伺服器返回的XML列印在螢幕上。

xmlhttp.onreadystatechange=function(){

     if(xmlhttp.readyState==4){

         if(xmlhttp.status==200){

         //擷取xml對象

         var xmlObj=xmlhttp.responseXML;

         //擷取第一個title標記內容

         var title=xmlObj.getElementsByTagName("title")[0].text;

         //輸出資訊

         alert("XML:\n" + xmlObj.xml + "\n" + "第一個title標記內容為：" + title);

          }else{

         alert(xmlhttp.status);

          }

      }

}

 

初識Ajax