從xhr提及

原生xhr對象存在較多的兼容性，IE6及以前版本使用ActiveXObject對象來建立，IE7之後使用兼容版本的MSXML2.XMLHttp、MSXML2.XMLHttp3.0、MSXML2.XMLHttp6.0.

ie7以前版本

 1 function createXHR() {
 2     if (typeof arguments.callee.activeXString !== 'string') {
 3         var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
 4         for (var i = 0,len = versions.length;i < len;i++) {
 5             try {
 6                 var xhr = new ActiveXOject(versions[i]);
 7                 arguments.callee.activeXString = versions[i];
 8             } catch (ex) {
 9 
10             }
11         }
12     }
13     return new ActiveXOject(arguments.callee.activeXString);
14 }

ie七、FIreFox、Opera、Chrome及Safari都支持之原生XHR對象

 1 function createXHR() {
 2     if (typeof XMLHttpRequest !== 'undefined') {
 3         return new XMLHttpRequest();
 4     } else if (typeof ActiveXObject !== 'undefined') {
 5         if (typeof arguments.callee.activeXString !== 'string') {
 6             var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
 7             for (var i = 0,len = versions.length;i < len;i++) {
 8                 try {
 9                     var xhr = new ActiveXOject(versions[i]);
10                     arguments.callee.activeXString = versions[i];
11                     return xhr;
12                 } catch (ex) {
13                     continue;
14                 }
15             }
16         }
17         return new ActiveXObject(arguments.callee.activeXString);
18     } else {
19         throw new Error("no xhr object available");
20     }
21 }

XHR對象用法

一、調用open，接受三個參數：請求類型，請求連接，請求是否異步

xhr.open('get', 'test.action', false);

二、調用send，發送特定數據，若是沒有特定數據，也必須傳入null，某些瀏覽器是會檢測改參數

xhr.send(null)

三、服務器響應後，響應後的數據會自動填充XHR對象的屬性

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

responseXML:若是響應內容類型是'text/xml'或'application/xml'，這個屬性中將包含着響應數據的XML DOM文檔

status: 響應的HTTP狀態

statusText: http狀態說明

咱們通常使用是status狀態碼來檢測狀態。

1 xhr.onreadystatechange = function() {
2     if (xhr.readyState == 4) {
3         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
4             console.log(xhr.statusText);
5         } else {
6             console.log('unsuccessful');
7         }
8     }
9 };

四、檢測readyState屬性

上面沒有檢測onreadystatechange事件，屬於同步請求，咱們大部分仍是須要使用異步請求，因此咱們可使用上面的函數來監聽readyState的每次變化。

0未初始化，還沒有調用open；

1啓動，調用open，還沒有調用send；

2發送，調用send，還沒有接受響應；

3接受，已接受部分數據；

4完成，接受所有數據。

每一次的readyState的變化都會觸發readyStatechange事件，故而咱們能夠用過readystate來檢測不一樣階段。設置onreadystatechange事件必須在open以前。

 1 var xhr = new createXHR();
 2 xhr.onreadystatechange = function(){
 3     if(xhr.readyState == 4){
 4         if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
 5             console.log(xhr.statusText);
 6         }else{
 7             console.log("Request was unsuccessful:" + xhr.status);
 8         }
 9     }
10 };
11 xhr.open("get","example.php",true);
12 xhr.send(null);

http頭部信息

默認狀況瀏覽器在發送XHR請求同時，發送不少頭信息

Accept: 瀏覽器能處理的內容類型

Accept-Charset:瀏覽器可以顯示的字符集

Accept-Encoding:瀏覽器能處理的壓縮編碼

Accept-Language:瀏覽器當前設置的語言

Connection:瀏覽器與服務器之間鏈接的類型

Cookie:當前頁面設置的任何Cookie

Host:發送請求頁面所在的域

Referer:發送請求頁面所在的域

User-Agent:瀏覽器全部代理用戶字符串

一、設置自定義頭信息，setRequestHeader方法，參數爲鍵值對，不過必須在open以後send以前

二、獲取頭部自定義信息，getResponseHeader方法，參數爲字符串。

GET請求

一、get請求參數url的查詢字段必須通過正確的編碼才行。使用encodeURIComponent進行編碼，不能用用encodeURI，這兩編碼範圍不同。

 參數編碼

1 function addURLParam (url,name,value) {
2     if (url && name && value) {
3         url += (url.indexOf("?") == -1 ? "?" : "&");
4         url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
5     }
6     return url;
7 }

二、post請求

默認服務器對post請求和提交表單請求並不會一視同仁，必須用程序來讀取發送過來的原始數據，從中去有用部分。能夠經過設置Content-Type爲application/x-www-form-urlencoded來模擬表單。

 1 function submitData(){
 2     var xhr = createXHR();
 3     xhr.onreadystatechange = function (event){
 4         if(xhr.readyState == 4){
 5             if((xhr.status >= 200 && xhr.status < 300)||xhr.status == 304){
 6                 alert(xhr.responseText);
 7             }else{
 8                 alert("Request was unsuccessful:"+ xhr.status);
 9             }
10         }
11     };
12     xhr.open("post","postexample.php",true);
13     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
14     var form = document.getElementById("user-info");
15     xhr.send(serialize(form));
16 }

瀏覽器差別

一、超時設置

IE8爲XHR對象添加了一個timeout屬性，表示請求等待響應多少毫秒以後終止。

 1 var xhr = createXHR();
 2 xhr.onreadystatechange = function(event){
 3     try{
 4         if(xhr.readyState == 4){
 5             if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
 6                 alert(xhr.responseText);
 7             }else{
 8                 alert("Request was unsuccessful:"+ xhr.status);
 9             }
10         }
11     }catch (ex){
12         //假設由ontimeout事件處理程序處理
13     }
14 };
15 xhr.open("get","timeout.php",true);
16 xhr.timeout = 1000;
17 xhr.ontimeout = function(){
18     alert("Request did not not return in a second.");
19 };
20 xhr.send(null);

還有一些onload、progress事件，能夠經過這兩事件作一些特殊的事情。

附上本身寫的xhr地址：https://github.com/schacker/xhr

附上status各類狀態碼

• 100 Continue 初始的請求已經接受，客戶應當繼續發送請求的其他部分
• 101 Switching Protocols 服務器將聽從客戶的請求轉換到另一種協議
• 200 OK 一切正常，對GET和POST請求的應答文檔跟在後面。
• 201 Created 服務器已經建立了文檔，Location頭給出了它的URL。
• 202 Accepted 已經接受請求，但處理還沒有完成。
• 203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，由於使用的是文檔的拷貝
• 204 No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。若是用戶按期地刷新頁面，而Servlet能夠肯定用戶文檔足夠新，這個狀態代碼是頗有用的
• 205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容
• 206 Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它
• 300 Multiple Choices 客戶請求的文檔能夠在多個位置找到，這些位置已經在返回的文檔內列出。若是服務器要提出優先選擇，則應該在Location應答頭指明。
• 301 Moved Permanently 客戶請求的文檔在其餘地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
• 302 Found 相似於301，但新的URL應該被視爲臨時性的替代，而不是永久性的。
• 303 See Other 相似於301/302，不一樣之處在於，若是原來的請求是POST，Location頭指定的重定向目標文檔應該經過GET提取
• 304 Not Modified 客戶端有緩衝的文檔併發出了一個條件性的請求（通常是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩衝的文檔還能夠繼續使用。
• 305 Use Proxy 客戶請求的文檔應該經過Location頭所指明的代理服務器提取
• 307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即便原來的請求是POST，即便它實際上只能在POST請求的應答是303時才能重定向。因爲這個緣由，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器能夠跟隨重定向的GET和POST請求；若是是307應答，則瀏覽器只能跟隨對GET請求的重定向。
• 400 Bad Request 請求出現語法錯誤。
• 401 Unauthorized 客戶試圖未經受權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，而後在填寫合適的Authorization頭後再次發出請求。
• 403 Forbidden 資源不可用。
• 404 Not Found 沒法找到指定位置的資源
• 405 Method Not Allowed 請求方法（GET、POST、HEAD、Delete、PUT、TRACE等）對指定的資源不適用。
• 406 Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容
• 407 Proxy Authentication Required 相似於401，表示客戶必須先通過代理服務器的受權。
• 408 Request Timeout 在服務器許可的等待時間內，客戶一直沒有發出任何請求。客戶能夠在之後重複同一請求。
• 409 Conflict 一般和PUT請求有關。因爲請求和資源的當前狀態相沖突，所以請求不能成功。
• 410 Gone 所請求的文檔已經再也不可用，並且服務器不知道應該重定向到哪個地址。它和404的不一樣在於，返回407表示文檔永久地離開了指定的位置，而404表示因爲未知的緣由文檔不可用。
• 411 Length Required 服務器不能處理請求，除非客戶發送一個Content-Length頭
• 412 Precondition Failed 請求頭中指定的一些前提條件失敗
• 413 Request Entity Too Large 目標文檔的大小超過服務器當前願意處理的大小。若是服務器認爲本身可以稍後再處理該請求，則應該提供一個Retry-After頭
• 414 Request URI Too Long URI太長
• 416 Requested Range Not Satisfiable 服務器不能知足客戶在請求中指定的Range頭
• 500 Internal Server Error 服務器遇到了意料不到的狀況，不能完成客戶的請求
• 501 Not Implemented 服務器不支持實現請求所須要的功能。例如，客戶發出了一個服務器不支持的PUT請求
• 502 Bad Gateway 服務器做爲網關或者代理時，爲了完成請求訪問下一個服務器，但該服務器返回了非法的應答
• 503 Service Unavailable 服務器因爲維護或者負載太重未能應答。例如，Servlet可能在數據庫鏈接池已滿的狀況下返回503。服務器返回503時能夠提供一個Retry-After頭
• 504 Gateway Timeout 由做爲代理或網關的服務器使用，表示不能及時地從遠程服務器得到應答
• 505 HTTP Version Not Supported 服務器不支持請求中所指明的HTTP版本