深入理解ajax系列第一篇之XHR對象_AJAX相關

來源:互聯網
上載者:User

前面的話

  ajax是asynchronous javascript and XML的簡寫,中文翻譯是非同步javascript和XML,這一技術能夠向伺服器請求額外的資料而無須卸載頁面,會帶來更好的使用者體驗。雖然名字中包含XML,但ajax通訊與資料格式無關。下面將詳細介紹ajax的內容

 建立

  ajax技術的核心是XMLHttpRequest對象(簡稱XHR),這是由微軟首先引入的一個特性,其他瀏覽器供應商後來都提供了相同的實現。XHR為向伺服器發送請求和解析伺服器響應提供了流暢的介面,能夠以非同步方式從伺服器取得更多資訊,意味著使用者單擊後,可以不必重新整理頁面也能取得新資料

  IE5是第一款引入XHR對象的瀏覽器。在IE5中,XHR對象是通過MSXML庫中的一個ActiveX對象實現的,而IE7+及其他標準瀏覽器都支援原生的XHR對象

  建立一個XHR對象,也叫執行個體化一個XHR對象,因為XMLHTTPRequest()是一個建構函式。下面是建立XHR對象的相容寫法

var xhr;if(window.XMLHttpRequest){  xhr = new XMLHttpRequest();}else{  xhr = new ActiveXObject('Microsoft.XMLHTTP');}

發送請求

open()

  在使用XHR對象時,要調用的第一個方法是open(),它接受3個參數:要發送的請求的類型 ("get"、"post"等)、請求的URL和表示是否非同步發送請求的布爾值

xhr.open("get","example.php", false);

  [注意]URL是相對於執行代碼的當前頁面,且只能向同一個域中使用相同連接埠和協議的URL發送請求。如果URL與啟動請求的頁面有任何差別,都會引發安全錯誤

send()

  send()方法接收一個參數,即要作為請求主體發送的資料。調用send()方法後,請求被指派到伺服器

xhr.open("get", "example.txt", false);xhr.send(null);

接收響應

  在收到響應後,響應的資料會自動填滿XHR對象的屬性,主要有以下4個屬性

responseText: 作為響應主體被返回的文本

responseXML: 如果響應的內容類型是'text/xml'或'application/xml',這個屬性中將儲存著響應資料的XML DOM文檔

status: 響應的HTTP狀態

statusText: HTTP狀態的說明

  在接收到響應後,第一步是檢查status屬性,以確定響應已經成功返回。一般來說,可以將HTTP狀態代碼為200作為成功的標誌。此時,responseText屬性的內容已經就緒,而且在內容類型正確的情況下,responseXML也可以訪問了。此外,狀態代碼為304表示請求的資源並沒有被修改,可以直接使用瀏覽器中緩衝的版本;當然,也意味著響應是有效

  無論內容類型是什麼,響應主體的內容都會儲存到responseText屬性中,而對於非XML資料而言,responseXML屬性的值將為null

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){  alert(xhr.responseText);}else{  alert('request was unsuccessful:' + xhr.status);}

非同步

  如果需要接收的是非同步響應,這就需要檢測XHR對象的readyState屬性,該屬性工作表示請求/響應過程的當前活動階段。這個屬性可取的值如下:

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

1(OPENED):啟動。已經調用open()方法,但尚未調用send()方法

2(HEADERS_RECEIVED):發送。己經調用send()方法,且接收到頭資訊

3(LOADING):接收。已經接收到部分響應主體資訊

4(DONE):完成。已經接收到全部響應資料,而且已經可以在用戶端使用了

  只要readyState屬性值由一個值變成另一個值,都會觸發一次readystatechange事件。可以利用這個事件來檢測每次狀態變化後readyState的值。通常,我們對readyState值為4的階段感興趣,因為這時所有資料都已就緒

  [注意]必須在調用open()之前指定onreadystatechange 事件處理常式才能確保跨瀏覽器安全色性,否則將無法接收readyState屬性為0和1的情況

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

執行個體

  下面以一個小執行個體來示範ajax中xhr對象的應用

<button id="btn">擷取資訊</button><div id="result"></div><script>btn.onclick = function(){  //建立xhr對象  var xhr;  if(window.XMLHttpRequest){    xhr = new XMLHttpRequest();  }else{    xhr = new ActiveXObject('Microsoft.XMLHTTP');  }  //非同步接受響應  xhr.onreadystatechange = function(){    if(xhr.readyState == 4){      if(xhr.status == 200){        //實際操作        result.innerHTML += xhr.responseText;      }    }  }  //發送請求  xhr.open('get','message.xml',true);  xhr.send();}</script>

//message.xml

<p>hello world</p>

最後

  通過執行個體的示範發現,ajax前端本身的內容並不難。但是,由於ajax涉及到一些後端及網路的知識,使得學起來不是很容易。以後的博文將逐步深入地介紹ajax的重點內容

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.