初識Ajax
本節要點：
- 什麽是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