原生JavaScript下的Ajax

• 概述

　　AJAX即asynchronous javascript and XML，中文翻譯是異步的javascript和XML。是指一種建立交互式網頁應用、用於建立快速動態網頁的開發技術。

傳統的網頁（不使用 AJAX）若是須要更新內容，必須重載整個網頁頁面。

　　而AJAX經過在後臺與服務器進行少許數據交換，可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

 　　

　   ajax包括如下幾步驟：

　　　　一、建立AJAX對象

　　　　二、發出HTTP請求

　　　　三、接收服務器傳回的數據

　　　　四、更新網頁數據

 

　　歸納起來，就是一句話，ajax經過原生的XMLHttpRequest對象發出HTTP請求，獲得服務器返回的數據後，再進行處理.

　　儘管名稱如此，XMLHttpRequest 也能夠用於獲取任何類型的數據，而不只僅是XML，它甚至支持HTTP之外的協議（包括 file:// 和 FTP）。

XMLHttpRequest對象建立和使用

• 建立

　　XMLHttpRequest對象是AJAX的核心技術，這是由微軟首先引入的一個特性。

　　  IE5是第一款引入XHR對象的瀏覽器。

　　  在IE5中，XHR對象是經過MSXML庫中的一個ActiveX對象實現的，而IE7+及其餘標準瀏覽器都支持原生的XHR對象

　　　　　　

1 var xhr;
2 if(window.XMLHttpRequest){
3     xhr = new XMLHttpRequest();
4 }else{
5     xhr = new ActiveXObject('Microsoft.XMLHTTP');
6 }

 　　

• 初始化請求

 

　　建立好以後使用open方法初始化一個請求

1     open(method: string, url: string): void;
2     open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;

　　參數

　　method

　　要使用的HTTP方法，好比「GET」、「POST」、「PUT」、「DELETE」、等。對於非HTTP(S) URL被忽略。

　　url

　　該URL相對於執行代碼的當前頁面，且只能向同一個域中使用相同端口和協議的URL發送請求。若是URL與啓動請求的頁面有任何差異，都會引起安全錯誤

　　async  可選

　　一個可選的布爾參數，默認爲 true，表示要不要異步執行操做。若是值爲 false， send()方法直到收到答覆前不會返回。若是 true，已完成事務的通知可供事件監聽器使用。若是 multipart屬性爲 true則這個必須爲 true，不然將引起異常。

　　user  可選

　　可選的用戶名用於認證用途；默認爲 null。

　　password  可選

　　可選的密碼用於認證用途，默認爲 null。

• 發送請求

　　發送請求使用的是send方法

 send(body?: Document | BodyInit | null): void;

 

　　若是是異步請求（默認爲異步請求），則此方法會在請求發送後當即返回；若是是同步請求，則此方法直到響應到達後纔會返回

　　1.GET方法，send()方法無參數，或參數爲null；

　　2.POST方法，send()方法的參數爲要發送的數據（ Blob | BufferSource | FormData | URLSearchParams | ReadableStream<Uint8Array> | string）通常爲FormData.

　　注：沒有設置頭部信息的話，會默認發送帶有 "* / *" 的Accept 頭部。

 

• 接收響應

　　上邊幾個步驟設置完之後就能夠接收服務器響應回來的數據

　　一個完整的HTTP響應由狀態碼、響應頭集合和響應主體組成。在收到響應後，這些均可以經過XHR對象的屬性和方法使用

　　屬性有

responseText  做爲響應主體被返回的文本(文本形式)，若是請求未成功或還沒有發送，則返回 null。
responseXML 返回一個 Document，若是響應的內容類型是'text/xml'或'application/xml'，這個屬性中將保存着響應數據的XML DOM文檔，若是請求未成功、還沒有發送或時不能被解析爲 XML 或 HTML，則返回 null。
status 表明請求的響應狀態
readyState 表明請求的狀態碼

　　在接收到響應後，第一步是檢查status屬性，以肯定響應已經成功返回。

　　通常來講，能夠將HTTP狀態碼爲200做爲成功的標誌。

　　此時，responseText屬性的內容已經就緒，並且在內容類型正確的狀況下，responseXML也能夠訪問了。

　　此外，狀態碼爲304表示請求的資源並無被修改，能夠直接使用瀏覽器中緩存的版本；固然，也意味着響應是有效的

　　不管內容類型是什麼，響應主體的內容都會保存到responseText屬性中，而對於非XML數據而言，responseXML屬性的值將爲null

　　

 1   xhr.onreadystatechange = function () {
 2 　　if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
 3    　　 console.log(xhr.responseText);
 4 　　}else{
 5    　　 alert('request was unsuccessful:' + xhr.status);
 6 　　}
 7     if (xhr.readyState === 4) {
 8       if (xhr.status == 200) {
 9        console.log(xhr.responseText);
10       }
11     }
12   }

 

 　　這裏要注意一下超時的問題

• 超時

　　XHR對象的timeout屬性等於一個整數，表示多少毫秒後，若是請求仍然沒有獲得結果，就會自動終止。該屬性默認等於0，表示沒有時間限制

　　若是請求超時，將觸發ontimeout事件須要在send以後狀態碼改變以前使用

  xhr.ontimeout = function () {
    console.log('The request timed out.');
  }
  xhr.timeout = 1000;

 

　　[注意]IE8-瀏覽器不支持該屬性

 

• 最後

　　AJAX自己並不難，主要的就是有一部份內容涉及到網絡方面的知識，因此致使學起來有必定的難度。

　　[注意]若是要創建N個不一樣的請求，就要使用N個不一樣的XHR對象。固然能夠重用已存在的XHR對象，但這會終止以前經過該對象掛起的任何請求

　　

　　HTTP協議有一個天生的缺陷：通訊只能由客戶端發起，所以HTTP協議作不到服務器主動向客戶端推送信息

　　它的這種單向請求的特色，註定了若是服務器有連續的狀態變化，客戶端要獲知就必須採用輪詢的方式。而輪詢的效率低下且很是浪費資源，由於必須不停地鏈接或者讓HTTP鏈接始終打開。此時，也就出現了WebSocket。 

       以後會寫一下WebSocket API的用法