JS—Ajax(初步使用)

Ajax
Asynchronous JavaScript XML
這一技術(shù)最早是用來(lái)向服務(wù)器端請(qǐng)求以xml這種結(jié)構(gòu)表示的數(shù)據(jù)時(shí),可以不用卸載頁(yè)面,就能夠向服務(wù)器端請(qǐng)求額外的數(shù)據(jù)。
但是現(xiàn)在呢,Ajax已經(jīng)不局限于傳遞xml數(shù)據(jù)。因?yàn)閤ml操作起來(lái)太過(guò)復(fù)雜。

Ajax技術(shù)的核心是XMLHttpRequest(XHR)對(duì)象。該對(duì)象為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口,能夠以異步方式從服務(wù)器取得更多信息。

  • 新建XHR對(duì)象

  • IE中
    IE5是第一款引入XHR對(duì)象的瀏覽器,(我有時(shí)候總抱怨IE8之前,后來(lái)有一種嫌棄糟糠之妻的罪惡感,我是不是不太適合做程序員?)
    像創(chuàng)建XML DOM對(duì)象似的,這個(gè)也需要為ActiveXObject傳遞一個(gè)版本,來(lái)構(gòu)造相應(yīng)的對(duì)象。

  • 其他瀏覽器
    就是很簡(jiǎn)單的一句new+構(gòu)造函數(shù)就可以。

  • 偷懶,我就直接寫(xiě)原生js中Ajax XHR對(duì)象的跨瀏覽器創(chuàng)建。
    function createXHR(){
    var XHR=null;
    if(typeof window.XMLHttpRequest !='undefined'){
    XHR= new XMLHttpRequest();
    }else if(typeof window.ActiveXObject !='undefined'){
    if(arguments.callee.activeXString !='string'){
    var versions=['MSXML2.XMLHttp.6.0','MSXML.XMLHttp.3.0','MSXML.XMLHttp'];
    for(var i=0;i<versions.length;i++){
    try{
    new ActiveXObject(versions[i]);
    arguments.callee.activeXString=versions[i];
    break;
    }catch(ex){
    //跳過(guò)
    }
    }
    }
    XHR= new ActiveXObject(arguments.callee.activeXString)
    }else{
    throw new Error('您的瀏覽器不支持XMLHttRequest!!')
    }
    return XHR;
    }
    特點(diǎn):沒(méi)啥特點(diǎn),和創(chuàng)建跨瀏覽器的xml dom對(duì)象類(lèi)似。

  • XHR對(duì)象的用法
    使用XHR對(duì)象作為接口向服務(wù)器進(jìn)行異步請(qǐng)求數(shù)據(jù)需要的步驟:
    1、.open()
    XHR.open('get','demo.txt?rand='+Math.random(),true);
    //準(zhǔn)備發(fā)送請(qǐng)求,以get方式請(qǐng)求,url是demo.txt,步
    特點(diǎn):該函數(shù)接收三個(gè)參數(shù)(要發(fā)送請(qǐng)求的類(lèi)型,請(qǐng)求的URL,表示是否異步發(fā)送請(qǐng)求的布爾值);注意到,在請(qǐng)求的URL內(nèi),向服務(wù)端數(shù)據(jù)傳遞了一個(gè)隨機(jī)值,是因?yàn)?,如果不傳遞,那么在第一次向服務(wù)器發(fā)出請(qǐng)求后,IE會(huì)在第二次請(qǐng)求時(shí)直接從緩存中讀取。所以采用隨機(jī)數(shù)的方法。
    open方法只是準(zhǔn)備發(fā)送請(qǐng)求,
    2、.send()
    XHR.send(null);
    特點(diǎn):該方法接收一個(gè)參數(shù),表示即要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)。如果不需要通過(guò)請(qǐng)求主體發(fā)送數(shù)據(jù),那么則必須傳入null。不能不寫(xiě)這個(gè)必填參數(shù)。調(diào)用send之后,請(qǐng)求就會(huì)被分派到瀏覽器。
    這個(gè)例子采用的是get方法,他向服務(wù)發(fā)送的數(shù)據(jù),借助url實(shí)現(xiàn),而如果采用post方法,那么就需要借助send方法來(lái)傳遞數(shù)據(jù)啦。
    3、.resdyState
    XHR.onreadystatechange=function(){
    if(XHR.readyState==4){

              }
          }
    

同加載xml文件似的,對(duì)于異步請(qǐng)求,都需要為該對(duì)象添加一個(gè)監(jiān)聽(tīng)事件,來(lái)判斷,只有當(dāng)客戶(hù)端已經(jīng)接收到全部響應(yīng)數(shù)據(jù)時(shí),才執(zhí)行對(duì)文件的操作。
4、.status
在客戶(hù)端接收到響應(yīng)后,響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充XHR對(duì)象的屬性。
該屬性?xún)?nèi)容包括
responseTest作為響應(yīng)主體被返回的文本
responseXML 限制響應(yīng)類(lèi)型為text/xml是,才返回的文本
status響應(yīng)的http狀態(tài)
statusTextHTTP狀態(tài)說(shuō)明。
最經(jīng)常用的就是第一個(gè)與第三個(gè)。
在接收到響應(yīng)后,會(huì)先判斷status的值,如果值為200,表示responseTest屬性已經(jīng)就緒。如果值為404則表示沒(méi)有找到對(duì)應(yīng)請(qǐng)求的數(shù)據(jù)。
if(XHR.status==200){

        }else{
            alert("獲取數(shù)據(jù)錯(cuò)誤!錯(cuò)誤代號(hào):"+XHR.status+"錯(cuò)誤信息:"+XHR.statusText)
    }

總的來(lái)寫(xiě)一下:
EventUtil.addHandler(document,'click',function(){
var XHR=createXHR();
XHR.onreadystatechange=function(){
if(XHR.readyState==4){
if(XHR.status==200){
alert(XHR.responseText)//打印服務(wù)器端返回的數(shù)據(jù)
}else{
alert("獲取數(shù)據(jù)錯(cuò)誤!錯(cuò)誤代號(hào):"+XHR.status+"錯(cuò)誤信息:"+XHR.statusText)
}
}
}
XHR.open('get','demo.txt?rand='+Math.random(),true);
XHR.send(null);
});
每當(dāng)用戶(hù)單擊頁(yè)面便會(huì)觸發(fā)事件,進(jìn)而從服務(wù)器端異步獲取數(shù)據(jù),無(wú)需刷新整個(gè)頁(yè)面。

  • .abort()取消異步
    這個(gè)方法如果方法哦send之前會(huì)報(bào)錯(cuò),因?yàn)橐呀?jīng)取消異步啦,就沒(méi)有要發(fā)送的東西啦。可以把他放在send()之后取消異步。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容