一提到異步交互大家就會(huì)說(shuō)ajax, 仿佛ajax這個(gè)技術(shù)已經(jīng)成為了異步交互的代名詞。那下面將研究ajax的核心對(duì)象!
利用ajax實(shí)現(xiàn)異步交互無(wú)非4步：
創(chuàng)建ajax核心對(duì)象
與服務(wù)器建立連接
向服務(wù)器發(fā)送請(qǐng)求
接收服務(wù)器響應(yīng)的數(shù)據(jù)
看似神秘的異步交互當(dāng)明確這4步后,也許在大家腦海里已經(jīng)有了初步的思路了。
首先、我們創(chuàng)建ajax的核心對(duì)象，由于瀏覽器的兼容問題我們?cè)趧?chuàng)建ajax核心對(duì)象的時(shí)候不得考慮其兼容問題奸焙，因?yàn)橐雽?shí)現(xiàn)異步交互的后面步驟都基于第一步是否成功的創(chuàng)建了ajax核心對(duì)象。
function getXhr(){
// 聲明XMLHttpRequest對(duì)象
var xhr = null;
// 根據(jù)瀏覽器的不同情況進(jìn)行創(chuàng)建
if (window.XMLHttpRequest){
// 表示除IE外的其他瀏覽器
xhr = new XMLHttpRequest();
} else {
// 表示IE瀏覽器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 創(chuàng)建核心對(duì)象
var xhr = getXhr();
通過上述代碼我們已經(jīng)成功的創(chuàng)建了ajax核心對(duì)象,我們保存在變量xhr中, 接下來(lái)提到的ajax核心對(duì)象都將以xhr代替.
第二步、就是與服務(wù)器建立連接, 通過ajax核心對(duì)象調(diào)用open(method, url, async)方法.
open方法的形參解釋:
method： 表示請(qǐng)求方式(get或post)
url： 表示請(qǐng)求的php的地址(注意當(dāng)請(qǐng)求類型為get的時(shí)候, 請(qǐng)求的數(shù)據(jù)將以問號(hào)"?"跟隨url地址后面, 下面的send方法中將傳入null值)
async： 是個(gè)布爾值, 表示是否異步, 默認(rèn)為true础拨。在最新規(guī)范中這一項(xiàng)已經(jīng)不在需要填寫， 因?yàn)楣俜秸J(rèn)為使用ajax就是為了實(shí)現(xiàn)異步.
xhr.open("get", "01.php?user=xianfeng");
//這是get方式請(qǐng)求數(shù)據(jù)
xhr.open("post", "01.php");
//這是以post方式請(qǐng)求數(shù)據(jù)
第三步绍载、我們將向服務(wù)器發(fā)送請(qǐng)求, 利用ajax核心對(duì)象調(diào)用send方法
如果是post方式, 請(qǐng)求的數(shù)據(jù)將以name=value形式放在send方法里發(fā)送給服務(wù)器, get方式直接傳入null值诡宗。
xhr.send(
"user=xianfeng"
);
//這是以post方式發(fā)送請(qǐng)求數(shù)據(jù)
xhr.send(
null
);
//這是以get方式
第四步、接收服務(wù)器響應(yīng)回來(lái)的數(shù)據(jù)击儡。
使用onreadystatechange事件監(jiān)聽服務(wù)器的通信狀態(tài)塔沃，通過readyState屬性獲取服務(wù)器端當(dāng)前通信狀態(tài)，status獲得狀態(tài)碼阳谍，利用responseText屬性接收服務(wù)器響應(yīng)回來(lái)的數(shù)據(jù)(這里指text類型的字符串格式數(shù)據(jù))蛀柴，后面再寫XML格式的數(shù)據(jù)和大名鼎鼎的json格式數(shù)據(jù)螃概。
xhr.onreadystatechange = function(){
// 保證服務(wù)器端響應(yīng)的數(shù)據(jù)發(fā)送完畢,保證這次請(qǐng)求必須是成功的
if (xhr.readyState == 4 && xhr.status == 200){
// 接收服務(wù)器端的數(shù)據(jù)
var data = xhr.responseText;
// 測(cè)試
console.log(data);
}
};
