XMLHttpRequest 對象是AJAX功能的核心,要開發(fā)AJAX程序必須從了解XMLHttpRequest 對象開始。
了解XMLHttpRequest 對象就先從創(chuàng)建XMLHttpRequest 對象開始,在不同的瀏覽器中創(chuàng)建XMLHttpRequest 對象使用不同的方法:
先看看IE創(chuàng)建XMLHttpRequest 對象的方法(方法1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
//使用較新版本的 IE 創(chuàng)建 IE 兼容的對象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//使用較老版本的 IE 創(chuàng)建 IE 兼容的對(Microsoft.XMLHTTP)
而 Mozilla、Opera、Safari 和大部分非IE的瀏覽器都使用下面這種方法(方法2)創(chuàng)建XMLHttpRequest 對象:
var xmlhttp = new XMLHttpRequest();
實(shí)際上Internet Explorer 使用了一個(gè)名為 XMLHttp 的對象,而不是 XMLHttpRequest 對象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 瀏覽器都使用的是后者(下文統(tǒng)稱 XMLHttpRequest 對象)。IE7開始也開始使用XMLHttpRequest 對象了。
在創(chuàng)建 XMLHttpRequest 對象的時(shí)候如果不同的瀏覽器使用了不正確的方法瀏覽器都將會(huì)報(bào)錯(cuò),并且無法使用該對象。所以我們需要一種可以兼容不同瀏覽器的創(chuàng)建XMLHttpRequest 對象的方法:
創(chuàng)建兼容多瀏覽器的 XMLHttpRequest 對象方法
var xmlhttp = false; //創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件,它表示還沒有創(chuàng)建 XMLHttpRequest 對象。 function CreateXMLHttp(){try{xmlhttp = new XMLHttpRequest(); //嘗試創(chuàng)建 XMLHttpRequest 對象,除 IE 外的瀏覽器都支持這個(gè)方法。}catch (e){try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用較新版本的 IE 創(chuàng)建 IE 兼容的對象(Msxml2.XMLHTTP)}catch (e){try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 創(chuàng)建 IE 兼容的對象(Microsoft.XMLHTTP)。}catch (failed){xmlhttp = false; //如果失敗則保證 request 的值仍然為 false。}}}return xmlhttp;}判斷是否創(chuàng)建成功就很簡單了
if (!xmlhttp){//創(chuàng)建XMLHttpRequest 對象失敗!}else{//創(chuàng)建成功!}
創(chuàng)建好了XMLHttpRequest 對象我們再來看看這個(gè)對象的方法、屬性以及最重要的onreadystatechange事件句柄吧。
方法:
open() 說明:初始化 HTTP 請求參數(shù),例如 URL 和 HTTP 方法,但是并不發(fā)送請求。
abort() 說明:取消當(dāng)前響應(yīng),關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動(dòng)。
getAllResponseHeaders() 說明:把 HTTP 響應(yīng)頭部作為未解析的字符串返回。
getResponseHeader() 說明:返回指定的 HTTP 響應(yīng)頭部的值。
send() 說明:發(fā)送 HTTP 請求,使用傳遞給 open() 方法的參數(shù),以及傳遞給該方法的可選請求體。
setRequestHeader() 說明:向一個(gè)打開但未發(fā)送的請求設(shè)置或添加一個(gè) HTTP 請求。
屬性:
readyState 說明:HTTP 請求的狀態(tài)。
responseText 說明:目前為止為服務(wù)器接收到的響應(yīng)體(不包括頭部),或者如果還沒有接收到數(shù)據(jù)的話,就是空字符串。
responseXML 說明:對請求的響應(yīng),解析為 XML 并作為 Document 對象返回。
status 說明:由服務(wù)器返回的 HTTP 狀態(tài)代碼。
statusText 說明:這個(gè)屬性用名稱而不是數(shù)字指定了請求的 HTTP 的狀態(tài)代碼。
onreadystatechange 是每次 readyState 屬性改變的時(shí)候調(diào)用的事件句柄函數(shù)。
下面從發(fā)送請求并處理請求結(jié)果的過程來理解一下XMLHttpRequest 對象吧。
發(fā)送請求之前自然就是生成一個(gè)XMLHttpRequest 對象,代碼上面有了就不多寫了。
生成一個(gè)XMLHttpRequest 對象
var xmlhttp = CreateXMLHttp();
創(chuàng)建好XMLHttpRequest 對象了,那我們要送請求到哪個(gè)網(wǎng)站呢,就選擇博客園首頁的RSS吧。那怎么設(shè)置我要請求的網(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了。
了解XMLHttpRequest 對象就先從創(chuàng)建XMLHttpRequest 對象開始,在不同的瀏覽器中創(chuàng)建XMLHttpRequest 對象使用不同的方法:
先看看IE創(chuàng)建XMLHttpRequest 對象的方法(方法1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
//使用較新版本的 IE 創(chuàng)建 IE 兼容的對象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//使用較老版本的 IE 創(chuàng)建 IE 兼容的對(Microsoft.XMLHTTP)
而 Mozilla、Opera、Safari 和大部分非IE的瀏覽器都使用下面這種方法(方法2)創(chuàng)建XMLHttpRequest 對象:
var xmlhttp = new XMLHttpRequest();
實(shí)際上Internet Explorer 使用了一個(gè)名為 XMLHttp 的對象,而不是 XMLHttpRequest 對象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 瀏覽器都使用的是后者(下文統(tǒng)稱 XMLHttpRequest 對象)。IE7開始也開始使用XMLHttpRequest 對象了。
在創(chuàng)建 XMLHttpRequest 對象的時(shí)候如果不同的瀏覽器使用了不正確的方法瀏覽器都將會(huì)報(bào)錯(cuò),并且無法使用該對象。所以我們需要一種可以兼容不同瀏覽器的創(chuàng)建XMLHttpRequest 對象的方法:
創(chuàng)建兼容多瀏覽器的 XMLHttpRequest 對象方法
var xmlhttp = false; //創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件,它表示還沒有創(chuàng)建 XMLHttpRequest 對象。 function CreateXMLHttp(){try{xmlhttp = new XMLHttpRequest(); //嘗試創(chuàng)建 XMLHttpRequest 對象,除 IE 外的瀏覽器都支持這個(gè)方法。}catch (e){try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用較新版本的 IE 創(chuàng)建 IE 兼容的對象(Msxml2.XMLHTTP)}catch (e){try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 創(chuàng)建 IE 兼容的對象(Microsoft.XMLHTTP)。}catch (failed){xmlhttp = false; //如果失敗則保證 request 的值仍然為 false。}}}return xmlhttp;}判斷是否創(chuàng)建成功就很簡單了
if (!xmlhttp){//創(chuàng)建XMLHttpRequest 對象失敗!}else{//創(chuàng)建成功!}
創(chuàng)建好了XMLHttpRequest 對象我們再來看看這個(gè)對象的方法、屬性以及最重要的onreadystatechange事件句柄吧。
方法:
open() 說明:初始化 HTTP 請求參數(shù),例如 URL 和 HTTP 方法,但是并不發(fā)送請求。
abort() 說明:取消當(dāng)前響應(yīng),關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動(dòng)。
getAllResponseHeaders() 說明:把 HTTP 響應(yīng)頭部作為未解析的字符串返回。
getResponseHeader() 說明:返回指定的 HTTP 響應(yīng)頭部的值。
send() 說明:發(fā)送 HTTP 請求,使用傳遞給 open() 方法的參數(shù),以及傳遞給該方法的可選請求體。
setRequestHeader() 說明:向一個(gè)打開但未發(fā)送的請求設(shè)置或添加一個(gè) HTTP 請求。
屬性:
readyState 說明:HTTP 請求的狀態(tài)。
responseText 說明:目前為止為服務(wù)器接收到的響應(yīng)體(不包括頭部),或者如果還沒有接收到數(shù)據(jù)的話,就是空字符串。
responseXML 說明:對請求的響應(yīng),解析為 XML 并作為 Document 對象返回。
status 說明:由服務(wù)器返回的 HTTP 狀態(tài)代碼。
statusText 說明:這個(gè)屬性用名稱而不是數(shù)字指定了請求的 HTTP 的狀態(tài)代碼。
onreadystatechange 是每次 readyState 屬性改變的時(shí)候調(diào)用的事件句柄函數(shù)。
下面從發(fā)送請求并處理請求結(jié)果的過程來理解一下XMLHttpRequest 對象吧。
發(fā)送請求之前自然就是生成一個(gè)XMLHttpRequest 對象,代碼上面有了就不多寫了。
生成一個(gè)XMLHttpRequest 對象
var xmlhttp = CreateXMLHttp();
創(chuàng)建好XMLHttpRequest 對象了,那我們要送請求到哪個(gè)網(wǎng)站呢,就選擇博客園首頁的RSS吧。那怎么設(shè)置我要請求的網(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了。