我要說的內容都是非常基礎的內容,老手就免看了,如果看了歡迎給點意見啊。新手或者對低層還不是很了解的人可以看看,幫助理解與記憶。
XMLHttpRequest 對象是AJAX功能的核心,要開發AJAX程序必須從了解XMLHttpRequest 對象開始。
了解XMLHttpRequest 對象就先從建立 XMLHttpRequest 對象開始,在不同的閱讀器中建立 XMLHttpRequest 對象運用不同的要領:
先看看IE建立 XMLHttpRequest 對象的要領(要領 1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //運用較新版本的 IE 建立 IE 兼容的對象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //運用較老版本的 IE 建立 IE 兼容的對象(Microsoft.XMLHTTP)
而 Mozilla、Opera、Safari 和大部分非IE的閱讀器都運用下面這種要領(要領 2)建立 XMLHttpRequest 對象:
var xmlhttp = new XMLHttpRequest();
實際上Internet Exp lorer 運用了一個名為 XMLHttp 的對象,而不是 XMLHttpRequest 對象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 閱讀器都運用的是后者(下文統稱 XMLHttpRequest 對象)。IE7開始也開始運用 XMLHttpRequest 對象了。
在建立 XMLHttpRequest 對象的時候如果不同的閱讀器運用了不正確的要領閱讀器都將會報錯,并且不能運用該對象。所以我們須要一種可以兼容不同閱讀器的建立 XMLHttpRequest 對象的要領:
建立兼容多閱讀器的 XMLHttpRequest 對象要領
var xmlhttp = false; //建立一個新變量 request 并賦值 false。運用 false 作為判斷條件,它表示還沒有建立 XMLHttpRequest 對象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //嘗試建立 XMLHttpRequest 對象,除 IE 外的閱讀器都支持這個要領。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //運用較新版本的 IE 建立 IE 兼容的對象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //運用較老版本的 IE 建立 IE 兼容的對象(Microsoft.XMLHTTP)。
}
catch (failed){
xmlhttp = false; //如果失敗則保證 request 的值仍然為 false。
}
}
}
return xmlhttp;
}
判斷能不能建立成功就很基本了
if (!xmlhttp){
//建立 XMLHttpRequest 對象失敗!
}
else{
//建立成功!
}
建立好了XMLHttpRequest 對象我們再來看看這個對象的要領、屬性以及最主要的onreadystatechange事件句柄吧。
要領:
open() 說明:原始化 HTTP 請求參數,例如 URL 和 HTTP 要領,但是并不發送請求。
abort() 說明:取消當前響應,關上連接并且結束任何未決的網絡活動。
getAllResponseHeaders() 說明:把 HTTP 響應頭部作為未分析的字符串返回。
getResponseHeader() 說明:返回指定的 HTTP 響應頭部的值。
send() 說明:發送 HTTP 請求,運用傳遞給 open() 要領的參數,以及傳遞給該要領的可選請求體。
setRequestHeader() 說明:向一個打開但未發送的請求配置或添加一個 HTTP 請求。
屬性:
readyState 說明:HTTP 請求的狀態。
responseText 說明:目前為止為服務器接收到的響應體(不包括頭部),或者如果還沒有接收到數據的話,就是空字符串。
responseXML 說明:對請求的響應,分析為 XML 并作為 Document 對象返回。
status 說明:由服務器返回的 HTTP 狀態代碼。
statusText 說明:這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。
onreadystatechange 是每次 readyState 屬性改動的時候調用的事件句柄函數。
下面從發送請求并處理請求結果的流程來理解一下XMLHttpRequest 對象吧。
發送請求之前自然就是生成一個XMLHttpRequest 對象,代碼上面有了就不多寫了。
生成一個XMLHttpRequest 對象
var xmlhttp = CreateXMLHttp();
建立好XMLHttpRequest 對象了,那我們要送請求到哪個站點呢,就選擇博客園首頁的RSS吧。那如何配置我要請求的站點地址呢,運用 open()要領。
open(method, url, async, username, password)
該要領有5個參數,具體什么意思可以看這里:http://www.w3school.com.cn/xmldom/dom_http.asp
我們用的就是這個了。
xmlHttp.open("get",");
get參數表示用get要領,第二個自然就是目標地址,博客園首頁,第三個就是表示能不能異步了,我們當然運用 true了。具體的參數說明還都可以到http://www.w3school.com.cn上面看了。
好了,目標定好了,如何發送呢。用send()要領。
send(body),send()要領只有一個參數,表示DOM對象,這個DOM對象須要說明的內容很多,下次說,今天我們只要寫
xmlhttp.send(null);
就可以了。好了,發送了,那如何處理返回的結果呢,這個時候就用到XMLHttpRequest 對象最主要的東西了,那就是onreadystatechange事件句柄。什么意思呢,那就須要說明一下XMLHttpRequest 對象的readyState了,readyState有5種狀態,分別用數字的 0 到 4 來表示。
狀態 名稱 描述
0 Uninitialized 原始化狀態。XMLHttpRequest 對象已建立(未調用open()之前)或已被 abort() 要領重置。
1 Open open() 要領已調用,但是 send() 要領未調用。請求還沒有被發送。
2 Sent Send() 要領已調用,HTTP 請求已發送到 Web 服務器。未接收到響應。
3 Receiving 所有響應頭部都已經接收到。響應體開始接收但未完成。
4 Loaded HTTP 響應已經完全接收。
但是須要留心的是,onreadystatechange事件句柄不同的閱讀器能處理的狀態并不一致,IE和FireFox能處理1到4,而Safari能處理2到4的狀態,Opera 能處理3、4兩中狀態。0的狀態基本沒什么用,因為建立了XMLHttpRequest 對象后都會馬上調用open() 要領,這時候狀態就變成1了,當然除非你要判斷對象能不能已經被 abort() 取消,可是這樣的情況依然很少。大部分情況下判斷是不是4(已經接受完成)這個狀態就夠了。
好了,明白了readyState有5種狀態了,那處理返回結果就是看狀態變更到不同的狀態我們做不同的處理就可以了,如何告訴XMLHttpRequest 對象狀態變化時讓誰來處理這個變化呢。有兩種寫法,一種是用匿名要領,另一種是指定要領,其實只是不同的寫發,作用都一樣,看下代碼:
xmlhttp.onReadyStateChange = function (){
//處理狀態變化的代碼
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
///處理狀態變化的代碼
}
//順便說一下,句柄的名稱比較長,可以這樣記憶 on ReadyState Change 表示在讀取狀態改動時
請求發送了,也指定處理要領了,如何獲取返回的內容呢,有responseText和responseXML兩個屬性可供運用,responseXML是返回對象,須要再分析,后面再說,這里先用responseText,看看返回什么。
alert(xmlhttp.responseText); //看看是不是返回了首頁的HTML代碼啊。是你就成功了。
整個流程是:建立 XMLHttpRequest 對象 -> 指定發送地址及發送要領 -> 發送請求 -> 指定處理要領并處理返回結果。但是須要留心,我們正常的思路理解是這樣的,可是onreadystatechange事件句柄指定處理要領須要在發送之前就指定好,否則不能處理狀態變化事件。
所以我們應該按照下面的流程來記憶:建立 XMLHttpRequest 對象 -> 指定發送地址及發送要領 -> 指定狀態變化處理要領 -> 發送請求,請求發送后狀態變化了就會自動調用指定的處理要領。
好了,看看完成的代碼吧。
完成的代碼
var xmlhttp = false; //建立一個新變量 request 并賦值 false。運用 false 作為判斷條件,它表示還沒有建立 XMLHttpRequest 對象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //嘗試建立 XMLHttpRequest 對象,除 IE 外的閱讀器都支持這個要領。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //運用較新版本的 IE 建立 IE 兼容的對象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //運用較老版本的 IE 建立 IE 兼容的對象(Microsoft.XMLHTTP)。
}
catch (failed){
xmlhttp = false; //如果失敗則保證 request 的值仍然為 false。
}
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get",");
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(null);
function getResult(){
if(xmlhttp.readyState == 4){
alert(xmlhttp.responseText);
}
}
看似一切都OK了,可是有沒有想過,如果HTML代碼在網絡傳輸流程中出錯了,或者我們指定的地址失效會如何樣呢。這個時候就須要用到status屬性,即由服務器返回的 HTTP 狀態代碼。 xmlhttp.status 等于200時表示傳輸流程完整沒有不正確。具體的HTTP狀態代碼什么意思可以到W3C組織站點上看看,地址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);
}
}
好了,一個本來挺基本的東西,被我寫的這么多,好象很羅嗦。不過我覺的編程對基礎內容的理解很主要,現在很多時候開發AJAX的程序都運用很多JS的庫,不須要直接編寫這么基礎的代碼。如運用著名的jQuery,但是如果我們對基礎的東西有很好的理解,那這些庫報告不正確 ,或者出現疑問我們可以很好很快的知道錯在哪里,更快的做出改動使程序正常運行。