首頁 >web前端 >js教程 >深入理解ajax的XHR對象

深入理解ajax的XHR對象

php中世界最好的语言
php中世界最好的语言原創
2018-04-03 10:33:421451瀏覽

這次帶給大家深入理解ajax的XHR對象,使用ajax的XHR對象注意事項有哪些,下面就是實戰案例,一起來看一下。

前面的話

  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()

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(&#39;request was unsuccessful:&#39; + 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>
<p id="result"></p>
<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的重点内容

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

AJAX的队列请求如何实现(附代码)

pushState+Ajax实现无刷新的页面切换

以上是深入理解ajax的XHR對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn