前面的話
ajax是asynchronous javascript and XML的簡(jiǎn)寫,中文翻譯是異步的javascript和XML,這一技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無須卸載頁(yè)面,會(huì)帶來更好的用戶體驗(yàn)。雖然名字中包含XML,但ajax通信與數(shù)據(jù)格式無關(guān)。下面將詳細(xì)介紹ajax的內(nèi)容
創(chuàng)建
ajax技術(shù)的核心是XMLHttpRequest對(duì)象(簡(jiǎn)稱XHR),這是由微軟首先引入的一個(gè)特性,其他瀏覽器提供商后來都提供了相同的實(shí)現(xiàn)。XHR為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口,能夠以異步方式從服務(wù)器取得更多信息,意味著用戶單擊后,可以不必刷新頁(yè)面也能取得新數(shù)據(jù)
IE5是第一款引入XHR對(duì)象的瀏覽器。在IE5中,XHR對(duì)象是通過MSXML庫(kù)中的一個(gè)ActiveX對(duì)象實(shí)現(xiàn)的,而IE7+及其他標(biāo)準(zhǔn)瀏覽器都支持原生的XHR對(duì)象
創(chuàng)建一個(gè)XHR對(duì)象,也叫實(shí)例化一個(gè)XHR對(duì)象,因?yàn)閄MLHTTPRequest()是一個(gè)構(gòu)造函數(shù)。下面是創(chuàng)建XHR對(duì)象的兼容寫法
var xhr;if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();}else{ xhr = new ActiveXObject('Microsoft.XMLHTTP');}
發(fā)送請(qǐng)求
open()
在使用XHR對(duì)象時(shí),要調(diào)用的第一個(gè)方法是open(),它接受3個(gè)參數(shù):要發(fā)送的請(qǐng)求的類型 ("get"、"post"等)、請(qǐng)求的URL和表示是否異步發(fā)送請(qǐng)求的布爾值
xhr.open("get","example.php", false);
[注意]URL是相對(duì)于執(zhí)行代碼的當(dāng)前頁(yè)面,且只能向同一個(gè)域中使用相同端口和協(xié)議的URL發(fā)送請(qǐng)求。如果URL與啟動(dòng)請(qǐng)求的頁(yè)面有任何差別,都會(huì)引發(fā)安全錯(cuò)誤
send()
send()方法接收一個(gè)參數(shù),即要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)。調(diào)用send()方法后,請(qǐng)求被分派到服務(wù)器
xhr.open("get", "example.txt", false);xhr.send(null);
接收響應(yīng)
在收到響應(yīng)后,響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充XHR對(duì)象的屬性,主要有以下4個(gè)屬性
responseText: 作為響應(yīng)主體被返回的文本
responseXML: 如果響應(yīng)的內(nèi)容類型是'text/xml'或'application/xml',這個(gè)屬性中將保存著響應(yīng)數(shù)據(jù)的XML DOM文檔
status: 響應(yīng)的HTTP狀態(tài)
statusText: HTTP狀態(tài)的說明
在接收到響應(yīng)后,第一步是檢查status屬性,以確定響應(yīng)已經(jīng)成功返回。一般來說,可以將HTTP狀態(tài)碼為200作為成功的標(biāo)志。此時(shí),responseText屬性的內(nèi)容已經(jīng)就緒,而且在內(nèi)容類型正確的情況下,responseXML也可以訪問了。此外,狀態(tài)碼為304表示請(qǐng)求的資源并沒有被修改,可以直接使用瀏覽器中緩存的版本;當(dāng)然,也意味著響應(yīng)是有效的
無論內(nèi)容類型是什么,響應(yīng)主體的內(nèi)容都會(huì)保存到responseText屬性中,而對(duì)于非XML數(shù)據(jù)而言,responseXML屬性的值將為null
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText);}else{ alert('request was unsuccessful:' + xhr.status);}
新聞熱點(diǎn)
疑難解答
圖片精選