主頁 > 知識(shí)庫 > 深入理解ajax系列第一篇之XHR對(duì)象

深入理解ajax系列第一篇之XHR對(duì)象

熱門標(biāo)簽:立陶宛地圖標(biāo)注 中國地圖標(biāo)注不明確情況介紹表 東平縣地圖標(biāo)注app 河間市地圖標(biāo)注app 地圖標(biāo)注推銷坑人 大眾點(diǎn)評(píng)400電話怎么申請(qǐng) 怎樣在地圖標(biāo)注文字 上海企業(yè)外呼系統(tǒng)價(jià)錢 電銷機(jī)器人 長春

前面的話

  ajax是asynchronous javascript and XML的簡寫,中文翻譯是異步的javascript和XML,這一技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無須卸載頁面,會(huì)帶來更好的用戶體驗(yàn)。雖然名字中包含XML,但ajax通信與數(shù)據(jù)格式無關(guān)。下面將詳細(xì)介紹ajax的內(nèi)容

 創(chuàng)建

  ajax技術(shù)的核心是XMLHttpRequest對(duì)象(簡稱XHR),這是由微軟首先引入的一個(gè)特性,其他瀏覽器提供商后來都提供了相同的實(shí)現(xiàn)。XHR為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口,能夠以異步方式從服務(wù)器取得更多信息,意味著用戶單擊后,可以不必刷新頁面也能取得新數(shù)據(jù)

  IE5是第一款引入XHR對(duì)象的瀏覽器。在IE5中,XHR對(duì)象是通過MSXML庫中的一個(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)前頁面,且只能向同一個(gè)域中使用相同端口和協(xié)議的URL發(fā)送請(qǐng)求。如果URL與啟動(dòng)請(qǐng)求的頁面有任何差別,都會(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);
}

異步

  如果需要接收的是異步響應(yīng),這就需要檢測(cè)XHR對(duì)象的readyState屬性,該屬性表示請(qǐng)求/響應(yīng)過程的當(dāng)前活動(dòng)階段。這個(gè)屬性可取的值如下:

0(UNSENT):未初始化。尚未調(diào)用open()方法

1(OPENED):啟動(dòng)。已經(jīng)調(diào)用open()方法,但尚未調(diào)用send()方法

2(HEADERS_RECEIVED):發(fā)送。己經(jīng)調(diào)用send()方法,且接收到頭信息

3(LOADING):接收。已經(jīng)接收到部分響應(yīng)主體信息

4(DONE):完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù),而且已經(jīng)可以在客戶端使用了

  只要readyState屬性值由一個(gè)值變成另一個(gè)值,都會(huì)觸發(fā)一次readystatechange事件??梢岳眠@個(gè)事件來檢測(cè)每次狀態(tài)變化后readyState的值。通常,我們對(duì)readyState值為4的階段感興趣,因?yàn)檫@時(shí)所有數(shù)據(jù)都已就緒

  [注意]必須在調(diào)用open()之前指定onreadystatechange 事件處理程序才能確??鐬g覽器兼容性,否則將無法接收readyState屬性為0和1的情況

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status == 200){
      alert(xhr.responseText);
    }
  }
}

實(shí)例

  下面以一個(gè)小實(shí)例來演示ajax中xhr對(duì)象的應(yīng)用

button id="btn">獲取信息/button>
div id="result">/div>
script>
btn.onclick = function(){
  //創(chuàng)建xhr對(duì)象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  //異步接受響應(yīng)
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //實(shí)際操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //發(fā)送請(qǐng)求
  xhr.open('get','message.xml',true);
  xhr.send();
}
/script>

//message.xml

p>hello world/p>

最后

  通過實(shí)例的演示發(fā)現(xiàn),ajax前端本身的內(nèi)容并不難。但是,由于ajax涉及到一些后端及網(wǎng)絡(luò)的知識(shí),使得學(xué)起來不是很容易。以后的博文將逐步深入地介紹ajax的重點(diǎn)內(nèi)容

以上所述是小編給大家介紹的深入理解ajax系列第一篇之XHR對(duì)象,希望對(duì)大家有所幫助!

您可能感興趣的文章:
  • AJAX實(shí)現(xiàn)跨域的三種方法(代理,JSONP,XHR2)

標(biāo)簽:內(nèi)江 玉樹 益陽 銅川 遼寧 營口 本溪 四川

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《深入理解ajax系列第一篇之XHR對(duì)象》,本文關(guān)鍵詞  深入,理解,ajax,系列,第,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《深入理解ajax系列第一篇之XHR對(duì)象》相關(guān)的同類信息!
  • 本頁收集關(guān)于深入理解ajax系列第一篇之XHR對(duì)象的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章