XMLHttpRequest 對(duì)象是AJAX功能的核心，要開發(fā)AJAX程序必須從了解XMLHttpRequest 對(duì)象開始。
了解XMLHttpRequest 對(duì)象就先從創(chuàng)建XMLHttpRequest 對(duì)象開始，在不同的瀏覽器中創(chuàng)建XMLHttpRequest 對(duì)象使用不同的方法：
先看看IE創(chuàng)建XMLHttpRequest 對(duì)象的方法（方法1）：
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
//使用較新版本的 IE 創(chuàng)建 IE 兼容的對(duì)象（Msxml2.XMLHTTP）
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//使用較老版本的 IE 創(chuàng)建 IE 兼容的對(duì)（Microsoft.XMLHTTP）
|
而 Mozilla、Opera、Safari 和大部分非IE的瀏覽器都使用下面這種方法（方法2）創(chuàng)建XMLHttpRequest 對(duì)象：
var xmlhttp = new XMLHttpRequest();
|
實(shí)際上Internet Explorer 使用了一個(gè)名為 XMLHttp 的對(duì)象，而不是 XMLHttpRequest 對(duì)象，而 Mozilla、Opera、Safari 和 大部分非 Microsoft 瀏覽器都使用的是后者（下文統(tǒng)稱 XMLHttpRequest 對(duì)象）。IE7開始也開始使用XMLHttpRequest 對(duì)象了。
在創(chuàng)建 XMLHttpRequest 對(duì)象的時(shí)候如果不同的瀏覽器使用了不正確的方法瀏覽器都將會(huì)報(bào)錯(cuò)，并且無法使用該對(duì)象。所以我們需要一種可以兼容不同瀏覽器的創(chuàng)建XMLHttpRequest 對(duì)象的方法：
創(chuàng)建兼容多瀏覽器的 XMLHttpRequest 對(duì)象方法
var xmlhttp = false; //創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件，它表示還沒有創(chuàng)建 XMLHttpRequest 對(duì)象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //嘗試創(chuàng)建 XMLHttpRequest 對(duì)象，除 IE 外的瀏覽器都支持這個(gè)方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用較新版本的 IE 創(chuàng)建 IE 兼容的對(duì)象（Msxml2.XMLHTTP）
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 創(chuàng)建 IE 兼容的對(duì)象（Microsoft.XMLHTTP）。
}
catch (failed){
xmlhttp = false; //如果失敗則保證 request 的值仍然為 false。
}
}
}
return xmlhttp;
}
判斷是否創(chuàng)建成功就很簡(jiǎn)單了
if (!xmlhttp){
//創(chuàng)建XMLHttpRequest 對(duì)象失敗!
}
else{
//創(chuàng)建成功!
}
創(chuàng)建好了XMLHttpRequest 對(duì)象我們?cè)賮砜纯催@個(gè)對(duì)象的方法、屬性以及最重要的onreadystatechange事件句柄吧。
方法：
open() 說明：初始化 HTTP 請(qǐng)求參數(shù)，例如 URL 和 HTTP 方法，但是并不發(fā)送請(qǐng)求。
abort() 說明：取消當(dāng)前響應(yīng)，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動(dòng)。
getAllResponseHeaders() 說明：把 HTTP 響應(yīng)頭部作為未解析的字符串返回。
getResponseHeader() 說明：返回指定的 HTTP 響應(yīng)頭部的值。
send() 說明：發(fā)送 HTTP 請(qǐng)求，使用傳遞給 open() 方法的參數(shù)，以及傳遞給該方法的可選請(qǐng)求體。
setRequestHeader() 說明：向一個(gè)打開但未發(fā)送的請(qǐng)求設(shè)置或添加一個(gè) HTTP 請(qǐng)求。
屬性：
readyState 說明：HTTP 請(qǐng)求的狀態(tài)。
responseText 說明：目前為止為服務(wù)器接收到的響應(yīng)體（不包括頭部），或者如果還沒有接收到數(shù)據(jù)的話，就是空字符串。
responseXML 說明：對(duì)請(qǐng)求的響應(yīng)，解析為 XML 并作為 Document 對(duì)象返回。
status 說明：由服務(wù)器返回的 HTTP 狀態(tài)代碼。
statusText 說明：這個(gè)屬性用名稱而不是數(shù)字指定了請(qǐng)求的 HTTP 的狀態(tài)代碼。
onreadystatechange 是每次 readyState 屬性改變的時(shí)候調(diào)用的事件句柄函數(shù)。
下面從發(fā)送請(qǐng)求并處理請(qǐng)求結(jié)果的過程來理解一下XMLHttpRequest 對(duì)象吧。
發(fā)送請(qǐng)求之前自然就是生成一個(gè)XMLHttpRequest 對(duì)象，代碼上面有了就不多寫了。
生成一個(gè)XMLHttpRequest 對(duì)象
var xmlhttp = CreateXMLHttp();
|
創(chuàng)建好XMLHttpRequest 對(duì)象了，那我們要送請(qǐng)求到哪個(gè)網(wǎng)站呢，就選擇博客園首頁的RSS吧。那怎么設(shè)置我要請(qǐng)求的網(wǎng)站地址呢，使用open()方法。
open(method, url, async, username, password)
該方法有5個(gè)參數(shù)，具體什么意思可以看這里：http://www.w3school.com.cn/xmldom/dom_http.asp
我們用的就是這個(gè)了。
xmlHttp.open("get","http://www.cnblogs.com",true);
get參數(shù)表示用get方法，第二個(gè)自然就是目標(biāo)地址，博客園首頁，第三個(gè)就是表示是否異步了，我們當(dāng)然使用true了。具體的參數(shù)說明還都可以到http://www.w3school.com.cn上面看了。
好了，目標(biāo)定好了，怎么發(fā)送呢。用send()方法？
send(body)，send()方法只有一個(gè)參數(shù)，表示DOM對(duì)象，這個(gè)DOM對(duì)象需要說明的內(nèi)容很多，下次說，今天我們只要寫
xmlhttp.send();就可以了。好了，發(fā)送了，那怎么處理返回的結(jié)果呢，這個(gè)時(shí)候就用到XMLHttpRequest 對(duì)象最重要的東西了，那就是onreadystatechange事件句柄。什么意思呢，那就需要說明一下XMLHttpRequest 對(duì)象的readyState了，readyState有5種狀態(tài)，分別用數(shù)字的 0 到 4 來表示。
| 狀態(tài) |
名稱 |
描述 |
| 0 |
Uninitialized |
初始化狀態(tài)。XMLHttpRequest 對(duì)象已創(chuàng)建（未調(diào)用open()之前）或已被 abort() 方法重置。 |
| 1 |
Open |
open() 方法已調(diào)用，但是 send() 方法未調(diào)用。請(qǐng)求還沒有被發(fā)送。 |
| 2 |
Sent |
Send() 方法已調(diào)用，HTTP 請(qǐng)求已發(fā)送到 Web 服務(wù)器。未接收到響應(yīng)。 |
| 3 |
Receiving |
所有響應(yīng)頭部都已經(jīng)接收到。響應(yīng)體開始接收但未完成。 |
| 4 |
Loaded |
HTTP 響應(yīng)已經(jīng)完全接收。 |
但是需要注意的是，onreadystatechange事件句柄不同的瀏覽器能處理的狀態(tài)并不一致，IE和FireFox能處理1到4，而Safari能處理2到4的狀態(tài)，Opera 能處理3、4兩中狀態(tài)。0的狀態(tài)基本沒什么用，因?yàn)閯?chuàng)建了XMLHttpRequest 對(duì)象后都會(huì)馬上調(diào)用open() 方法，這時(shí)候狀態(tài)就變成1了，當(dāng)然除非你要判斷對(duì)象是否已經(jīng)被 abort() 取消，可是這樣的情況依然很少。大部分情況下判斷是不是4（已經(jīng)接受完成）這個(gè)狀態(tài)就夠了。
好了，明白了readyState有5種狀態(tài)了，那處理返回結(jié)果就是看狀態(tài)變更到不同的狀態(tài)我們做不同的處理就可以了，怎么告訴XMLHttpRequest 對(duì)象狀態(tài)變化時(shí)讓誰來處理這個(gè)變化呢。有兩種寫法，一種是用匿名方法，另一種是指定方法，其實(shí)只是不同的寫發(fā)，作用都一樣，看下代碼：
xmlhttp.onReadyStateChange = function (){
//處理狀態(tài)變化的代碼
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
///處理狀態(tài)變化的代碼
}
|
順便說一下，句柄的名稱比較長(zhǎng)，可以這樣記憶 on ReadyState Change 表示在讀取狀態(tài)改變時(shí)請(qǐng)求發(fā)送了，也指定處理方法了，怎么獲取返回的內(nèi)容呢，有responseText和responseXML兩個(gè)屬性可供使用，responseXML是返回對(duì)象，需要再解析，后面再說，這里先用responseText，看看返回什么。
alert(xmlhttp.responseText); //看看是不是返回了首頁的HTML代碼啊。是你就成功了。
整個(gè)過程是：創(chuàng)建XMLHttpRequest 對(duì)象 -> 指定發(fā)送地址及發(fā)送方法 -> 發(fā)送請(qǐng)求 -> 指定處理方法并處理返回結(jié)果。但是需要注意，我們正常的思路理解是這樣的，可是onreadystatechange事件句柄指定處理方法需要在發(fā)送之前就指定好，否則無法處理狀態(tài)變化事件。
所以我們應(yīng)該按照下面的流程來記憶：創(chuàng)建XMLHttpRequest 對(duì)象 -> 指定發(fā)送地址及發(fā)送方法 -> 指定狀態(tài)變化處理方法 -> 發(fā)送請(qǐng)求，請(qǐng)求發(fā)送后狀態(tài)變化了就會(huì)自動(dòng)調(diào)用指定的處理方法。
好了，看看完成的代碼吧。
完成的代碼
var xmlhttp = false; //創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件，它表示還沒有創(chuàng)建 XMLHttpRequest 對(duì)象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //嘗試創(chuàng)建 XMLHttpRequest 對(duì)象，除 IE 外的瀏覽器都支持這個(gè)方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用較新版本的 IE 創(chuàng)建 IE 兼容的對(duì)象（Msxml2.XMLHTTP）
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 創(chuàng)建 IE 兼容的對(duì)象（Microsoft.XMLHTTP）。
}
catch (failed){
xmlhttp = false; //如果失敗則保證 request 的值仍然為 false。
}
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get","http://www.cnblogs.com",true);
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send();
function getResult(){
if(xmlhttp.readyState == 4){
alert(xmlhttp.responseText);
}
}
看似一切都OK了，可是有沒有想過，如果HTML代碼在網(wǎng)絡(luò)傳輸過程中出錯(cuò)了，或者我們指定的地址失效會(huì)怎么樣呢。這個(gè)時(shí)候就需要用到status屬性，即由服務(wù)器返回的 HTTP 狀態(tài)代碼。 xmlhttp.status 等于200時(shí)表示傳輸過程完整沒有錯(cuò)誤。具體的HTTP狀態(tài)代碼什么意思可以到W3C組織網(wǎng)站上看看，地址http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 。
把getResult()方法寫成下面這樣我覺的就真的OK了。
function getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
}
|
好了，一個(gè)本來挺簡(jiǎn)單的東西，被我寫的這么多，好象很羅嗦。不過我覺的編程對(duì)基礎(chǔ)內(nèi)容的理解很重要，現(xiàn)在很多時(shí)候開發(fā)AJAX的程序都使用很多JS的庫，不需要直接編寫這么基礎(chǔ)的代碼。如使用著名的jQuery，但是如果我們對(duì)基礎(chǔ)的東西有很好的理解，那這些庫報(bào)告錯(cuò)誤，或者出現(xiàn)問題我們可以很好很快的知道錯(cuò)在哪里，更快的做出改變使程序正常運(yùn)行。
posted on 2009-04-16 08:14
Werther 閱讀(784)
評(píng)論(2) 編輯 收藏 所屬分類:
13.AJAX