異步請求之XMLHttpRequest篇

XMLHttpRequest

簡介

XMLHttpRequest對象能夠實現頁面無刷新來實現與服務端進行數據交互.最早有微軟公司設計，隨後被Google,Mozilla等使用.如今已成爲異步請求的標準，幾乎全部的瀏覽器都支持此對象.它支持的異步請求協議包括HTTP，file，ftp.爲便於介紹,後面咱們將XMLHttpRequest的實例對象稱做xhr.

實例

註釋部分能夠單個放開進行測試.

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&page=1&per_page=10";

xhr.open(method, url, true);
xhr.responseType = "json";

// xhr.timeout = 1000;
// xhr.overrideMimeType("text/xml");
xhr.onreadystatechange = function () {
  
  if(xhr.readyState === xhr.DONE) {
      if(xhr.status === 200){ // 請求成功
        console.log(xhr.response);
      // console.log(JSON.parse(xhr.responseText));
      // console.log(xhr.upload);
      
        //console.log(xhr.responseXML);
      //console.log(xhr.responseURL);
      //console.log(xhr.status);
      //console.log(xhr.statusText);
      //console.log('Content-Type:',xhr.getResponseHeader('Content-Type'));
      //console.log(xhr.responseURL);
      //console.log(xhr.getAllResponseHeaders());    
      }else{ // 請求失敗
          console.log(xhr.response);
      }
    
  }
};
xhr.ontimeout = function(event){
  console.log('請求超時！');
}
xhr.setRequestHeader('Content-Type','application/json');
xhr.send();

// xhr.abort();  // 中斷請求

屬性

UNSENT,OPEND,HEADERS_RECEIVED,LOADING,DONE

這五個屬性的值表明xhr.readyState可能存在的值

• UNSENT: 值爲 0,表示xhr實例已經建立.但還沒有執行xhr.open()方法.
• OPENED: 值爲 1,表示xhr.open()已經執行.
• HEADS_RECEIVED: 值爲 2,表示xhr.send()已經執行,服務端已經獲取到請求頭.
• LOADING: 值爲 3,表示正在接受xhr.responseText,通俗講就是正在獲取服務端返回的數據.
• DONE: 值爲 4,表示整個請求流程已經完成.

onreadystatechange

從詞面意思能夠了解到此屬性爲事件處理程序,當xhr.readyState屬性發生變化時，觸發此事件.

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === xhr.DONE){
            if(xhr.status === 200){
                console.log('請求成功!');
            }else{
                console.log('請求失敗!');
            }

            
        }
    }

readyState

只讀屬性,表示整個異步請求中的狀態,其存在五個可能的值.

response

只讀屬性,此屬性返回服務端的響應內容,客戶端能夠經過xhr.responseType指定響應內容的類型.

responseText

只讀屬性,此屬性爲xhr.response的一個特例,返回的響應內容爲text類型.若是指定了xhr.responseType爲非text類型,則讀取此屬性時會報錯.

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&page=1&per_page=10";

xhr.open(method, url, true);
xhr.responseType = "json";
xhr.onreadystatechange = function () {

  if(xhr.readyState === xhr.DONE) {
      if(xhr.status === 200){ // 請求成功
          console.log(xhr.responseText); // 執行到這裏會報錯
            
      }else{ // 請求失敗
          console.log(JSON.parse(xhr.response));
      }
    
  }
};
xhr.send();

因爲咱們指定了xhr.responseType的值爲json,獲取響應內容用xhr.response就OK了.

responseType

responseType定義響應內容(即xhr.response)的類型,其值爲枚舉類型,分別爲:arraybuffer,blob,document,json,text.若是傳入的值爲空字符串,則默認爲text.

responseURL

返回序列化後的響應URL.

responseXML

返回被轉化爲XML格式的響應內容,如下狀況將返回null.

• 請求不成功
• 還未執行xhr.send()方法
• 響應內容不能被轉換爲XML或者HTML

status

返回響應的狀態碼,請求成功返回的狀態碼爲200,狀態碼存在的可能值列表請點擊狀態碼列表查看.

statusText

返回響應的狀態碼對應的文字描述,例如 200 對應 'OK'.

timeout

設置請求的超時毫秒數，當請求的時長超出了響應的毫秒數,請求會自動中斷.若是是在IE瀏覽器中,該屬性的設置須要在open()方法以後和send()方法以前.

ontimeout

此屬性爲請求超時的事件處理程序,請求超時，觸發此方法.

upload

只讀屬性,返回一個對象，對象包含了該xhr能夠觸發的事件.

console.log(xhr.uplaod);
<!-- {
    onabort:null,
    onerror:null,
    onload:null,
    onloadend:null,
    onloadstart:null,
    onprogress:null,
    ontimeout:null

} -->

withCredentials

此屬性爲一個布爾值,表示是否將驗證信息(例如cookie)傳入到header中.此屬性只針對跨站請求有效.

onprogress,onabort,onerror,onload,onloadend,onloadstart

這些屬性是xhr的事件處理程序.

• onprogress:可能會在請求的過程當中屢次調用,在監測文件上傳進度時可使用此屬性.
• onerror:請求過程當中發生錯誤時出發此事件處理程序.
• onabort:請求中斷會觸發此事件處理處理程序.
• onload:請求執行成功後會觸發此事件處理程序.
• onloadstart:請求開始時觸發此事件處理程序.
• onloadend:請求完成是觸發此事件處理程序,onload是必需要成功纔會調用.

方法

abort()

中斷當前請求,當執行xhr.send()後此方法才能生效.

getAllResponseHeaders()

返回響應的header信息(String 類型)，以CRLF分割.若是沒有接收到響應頭,則返回null.

getResponseHeader(name)

獲取某個header屬性的值,name參數爲須要獲取屬性值的key.若是header對象不存在此屬性或者獲取header對象失敗,則返回null.

open(method,url,async)

初始化請求,要執行請求必選先執行此方法.

參數說明

• method:HTTP(s)請求方法,例如GET,POST,PUT,DELETE .
• url:請求的路徑.
• async:是否爲異步請求,通常狀況咱們這個參數會傳true.

ovverideMimeType(mimetype)

將服務端返回的信息強制轉化爲mimetype類型.

send()

發送請求,若是請求類型爲異步請求,send()方法的返回值會當即返回.

setRequestHeader()

設置HTTP請求頭.此方法須要在open()以後和send()以前執行.若是設置了不被支持的屬性,請求可能會報錯.

var xhr = new XMLHttpRequest();
    xhr.setRequestHeader('Content-Type','application/json');

兼容性

以上提到的屬性和方法在IE7+,Chorme,Firefox等主流瀏覽器都兼容，其中onprogress,onabort,onerror,onload,onloadend,onloadstart等事件處理程序在IE下需IE10+才能正常運行.