[ JS 進階 ] Ajax 詳解 (1) ：XHR 對象

Ajax是一種可以向服務器請求額外的數據而無需卸載頁面(無刷新)的技術，是對Asynchronous Javascript + XML的簡寫，因其良好的用戶體驗，現已成爲web不可或缺的技術。咱們所熟知的Jquery的封裝的ajax方法，也是經過這種技術實現的。

1. 沒有 XHR 對象以前咱們怎麼實現 Ajax

在XHR出現以前，Ajax式的通訊必須藉助一些hack手段來實現，大多數是使用隱藏的框架或內聯框架，還可使用script標籤和img標籤；

<iframe> : iframe元素仍是挺強大的，咱們首先須要把發送給web服務器的數據編碼到URL中，如：pages/index.html?name='jozo'&age=22,而後設置iframe的src屬性爲該URL，服務器能建立一個包含響應內容的HTML文檔，那麼咱們就能夠把響應信息保存在該文檔中返回web瀏覽器。這樣實現的話，須要讓iframe元素對用戶不可見，能夠經過CSS來隱藏它。

<script>: script標籤的src屬性也能發起HTTP GET請求，並且它能夠跨域通訊而不受同源策略的限制。經過這種方式交互時，服務器的響應須要採用JSON編碼的數據格式，並用一個指定的回調函數名包裹須要返回的數據：callBack({"name":"jozo","age":22}),這個包裹的響應會成爲script標籤的裏的內容來執行，就至關於執行了callBack()這個函數，因此在web端須要定義一個同名函數。這個就是JSONP跨域，詳細請自行查閱。

<img>:img標籤一樣也是利用src屬性發起的HTTP GET 請求，但它的功能沒有上面二者的全，由於它只能實現單向的通訊，只能由客戶端發送數據到服務器，服務器則響應對應的圖片，而咱們沒法輕易從圖片中獲取數據，並且這個圖片必須不可見，好比透明的1x1PX的圖片。

2. XHR 對象

Ajax技術的核心是XMLHttpRequest對象，XHR爲向服務器發送請求和解析服務器響應提供了流暢的接口，能以異步的方式從服務器取得更多的信息，意味着用戶單擊後，能夠沒必要刷新頁面也能取得數據。這個單詞包含XML,Http,Rquest,的確，ajax與這三者都有關係 ：

• XML ：可做爲ajax交互數據的數據類型，固然也不只侷限於xml，像咱們所知的json,jsonp,html,script,text均可以做爲數據類型。

• http : 使用ajax技術其實就是經過發送HTTP請求和接收響應的來達到目的。能夠經過配置發送請求頭信息來使服務器作出相應的響應。

• request ：說寬泛一些就是request和response，請求和響應，get請求，post請求，而後操做響應信息。

下面來看下具體的XHR對象有哪些屬性和方法。

3. XHR 對象的屬性和方法

屬性：

1. readyState：HTTP 請求的狀態
2. responseText：響應體（不包括頭部）
3. responseXML：對請求的響應，解析爲 XML 並做爲 Document 對象返回。
4. status：由服務器返回的 HTTP 狀態代碼，如 200 表示成功
5. statusText：這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。也就是說，當狀態爲 200 的時候它是 "OK"，當狀態爲 404 的時候它是 "Not Found"。

方法：

1. abort() : 取消當前響應，關閉鏈接而且結束任何未決的網絡活動。
2. getAllResponseHeaders()：把 HTTP 響應頭部做爲未解析的字符串返回。
3. getResponseHeader()：返回指定的 HTTP 響應頭部的值。
4. open()：初始化 HTTP 請求參數，例如 URL 和 HTTP 方法，可是並不發送請求。
5. send()：發送 HTTP 請求，使用傳遞給 open() 方法的參數，以及傳遞給該方法的可選請求體。
6. setRequestHeader()：向一個打開但未發送的請求設置或添加一個 HTTP 請求。

標紅的屬性和方法都是比較經常使用的，偷個懶，具體的屬性和方法的介紹去 w3school 看下了哈，⊙▂⊙。

屬性和方法都要熟悉掌握才能很好的掌握後面的內容。

4. 跨瀏覽器的 XHR 對象

IE7以前的瀏覽器都是不支持原生的XMLHttpRquest對象的，IE5,6中是經過MSXML庫中的一個ActiveX對象實現的。《JS高級程序設計》和《JS權威指南》都是經過檢測MSXML庫中XMLHttp的版原本建立XHR對象的，看起來比較麻煩，咱們仍是用w3school的吧 o(╯□╰)o：

var xhr = null;
function createXHR(){
    if (window.XMLHttpRequest){
         // 新瀏覽器
         xhr = new XMLHttpRequest();
     }else if (window.ActiveXObject){
         // IE5,IE6
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
}

5. 一些細節

1. Ajax技術能夠用於 HTTP 和 HTTPS 請求。

2. 咱們須要將ajax測試代碼部署到服務器上，才能正常工做。可是，在firefox瀏覽器上測試則不用。

3. 請求的方式除了get,post 外還支持：delete,head,option,put.請求方式名稱大小寫不敏感。

4. 當咱們給請求設置了onreadystatechange事件時，當readyState改變爲0或1時可能沒有觸發這個事件，通過測試，當爲0時確實沒有觸發，爲1時觸發了，我也不知道爲啥 ⊙▂⊙。

5. 若是你獲取的表單數據只是用來讀取服務器數據，並且表單數據是公開的，那麼用get方式的請求吧，由於少許數據的get請求的效率比post快多了。後面能夠測試來測試下。

6. HTTP請求的各部分的指定順序是：請求方法和URL--> 請求頭-->請求主體。並且在使用XHR對象的時候，當調用了send()方法纔開始啓動網絡。而XHR API 的設計使每一個方法都會寫入網絡流，因此在send()方法後面定義的事件或屬性會被忽略。因此，調用XHR對象的方法要有必定的順序，好比：在send()方法註冊onreadystatechange()事件。