XMLHttpRequest對象

先拋出問題：咱們如何使用JS腳原本發起一個http請求?

首先應該請楚，咱們在使用瀏覽器瀏覽網頁時，實際上是瀏覽器幫咱們發起一個又一個請求，唰唰唰~想象一下，當輸入地址按下回車開始（其實在webkit的實現中，當咱們輸入地址時，瀏覽器已經在開始作地址匹配，DNS預查了..），一個GET請求便發起了，通過一系列的解析最終到達服務器（其中過程網上有不少版本，包括從鍵盤按下開始解釋，這個不是咱們如今的重點哈），服務器再返回咱們想要的資源。
那麼，前端如何使用本身的代碼發送請求，獲得本身想要的數據呢？除了使用style / script / img 這些標籤，它們能夠由瀏覽器解析併發出請求。若是咱們本身程序中須要數據，後端給咱們接口，咱們該如何獲取呢？

寫在前面：這篇文章不涉及兼容問題，只是爲了瞭解XMLHttpRequest對象及其屬性方法，還有請求過程當中的事件對象查看。對於跨域這些問題，會陸續總結出來。其中參考了不少MDN的文檔，去掉了mozilla自用的非標準方法。這裏講的是通用的標準內容。

DOM標準中定義了一個XMLHttpRequest類型的對象，提供前端開發中發出請求的接口。我在控制檯中打出來，一塊兒來看看：

 
 
 
 

  
  
  
  

  
  
  
  

 
 
 
 
var xhr=new XMLHttpRequest(); console.log(xhr);

abort getAllResponseHeaders getResponseHeader open overrideMimeType send setRequestHeader

一個個解釋過來：

注：在MDN中咱們還能夠看到XMLHttpRequestEventTarget的介紹，當時看到順手翻譯了，當回頭想一想，以前真的不知道這個對象是在哪裏用的。它實際上是一個描述事件處理程序的接口，其中有onabort / onerror / onload / onloadstart / onprogress / ontimeout /onloadend 這些用來指定發生相關事件時執行的方法。在chrome中，從原型鏈往上追溯，咱們的確能夠看到XMLHttpRequest的原型的原型是一個XMLHttpRequestEventTarget對象。在firefox中，咱們依然能夠看到該對象中的這些屬性，但chrome中是沒有的，由於咱們也看到了，這些屬性現在都被定義在XMLHttpRequest對象中了。google了一下，大體看到的都是關於要取消這個對象的文章。先無論了，反正都是作的事件處理的事情，並且瀏覽中看到都在XMLHttpRequest對象中。

屬性：

• onbort: 當請求失敗時調用該方法
• onerror: 當請求發生錯誤時調用該方法
• onload: 當一個HTTP請求正確加載出內容後返回時調用
• onloadstart: 當一個HTTP請求開始加載數據時調用
• onprogress: 間歇調用該方法用來獲取請求過程當中的信息
• ontimeout: 當時間超時時調用；只有經過設置XMLHttpRequest對象的timeout屬性來發生超時時，這種狀況纔會發生
• onloadend: 當內容加載完成，無論失敗與否，都會調用該事件
• onreadystatechange: 當readystatechange發生改變時調用該方法
• readystate: 請求狀態

  0: open()方法還未被調用
  1: send()方法還未被調用
  2: send()方法已經被調用，響應頭和相應狀態已經返回
  3: 響應體下載中,responseText中已經有了部分數據
  4: 整個請求過程完畢

• response: 是一個類型爲ArrayBuffer,Blob,Document的javascript對象或字符串，這取決於responseType的值。它包含了響應主體，若是沒有東西返回則該值爲null
• responseText: 一個包含響應文本的字符串，若是沒有東西返回則該值爲null
• responseType: 可能爲'' / 'arraybuffer' / blob / document / json / text 中的一個

  '': 默認值，表示響應主體類型爲DOMString，關於DOMString類型，它就是一個utf-16的字符串，相似javascript使用的string類型，DOMString直接映射爲一個字符串
  ArrayBuffer: 響應主體類型爲ArrayBuffer，ArrayBuffer用來表示一個定長的原始二進制buffer
  Blob: 響應主體類型爲Blob，Blob類型用來表示定長原始二進制的類文件對象(file-like)
  document: 相應主體類型爲Document, 即文檔對象
  json: 響應主體類型爲json
  text: 響應主體爲DOMString

• responseURL:
• responseXML: 一個文檔對象。當請求不成功、請求尚未被髮送時，或不能被解析爲XML或HTML時，返回null.
• status: 一個短整形，用來表示請求的響應狀態
• statusText: 字符串，用來描述請求的響應狀態
• timeout: 無符號長整形，表示還有多少毫秒請求將被自動終止，爲0時表示沒有超時
• upload: 是一個XMLHttpRequestUpload對象, 用來表示相應體的下載進度
• withCredentials: 一個布爾值，用來表示一個跨域請求是否使用瞭如cookies或認證頭部的證書，默認爲false

從上圖看到，XMLHttpRequest構造方法的原型中，定義了幾個常量，這些常量就是上面說到的一些狀態碼，除此以外，它定義了XMLHttpRequest對象用到的方法，一塊兒看看：
方法：

• abort()：此方法用來終止一個已經發送的http請求
• getAllResponseHeaders(): 返回全部的響應頭部，若是沒有響應則該值爲null.值得注意的是，若是是multipart形式的請求，那麼返回值指的是當前響應的部分數據的頭部
• getResponseHeader(DOMString header): 返回特定的請求頭部，沒有則爲null
• open(DOMString method, DOMString url, optional boolean async, optional DOMSring? user, optional DOMString? password): 初始化一個http請求
• overrideMimeType(DOMString mime): 以指定的類型強制處理響應內容，該方法應在send()以前調用
• send([ArrayBuffer data / Blob data / Document data / DOMString? data / FormData data]): 發送請求。若是請求爲異步的（也就是默認值），這個方法將在發送請求後馬上返回。若是是同步請求，該方法會直到響應到達後才返回。

  不建議使用文本類型的ArrayBuffer做爲參數，由於它已經不是XMLHttpRequest的一部分了。使用ArrayBufferView替代它。
  若是數據是一個文檔對象，會在發出以前進行序列化。

• setRequestHeader(DOMString header, DOMString value): 設置請求頭部

說了這麼多概念性的東西，寫個請求試試:

get請求

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(e){ console.log(e); if(xhr.readyState==4 && xhr.status==200){ console.log(xhr.responseText); }}xhr.open('get','./data.json');xhr.send();

先看看event中的東西：

每次readyState改變時，event對象清楚地記錄了當前事件的狀況，如不冒泡、沒有取消冒泡、事件不能被取消、當前的目標是XMLHttpRequest對象、沒有阻止默認事件、事件傳播的當前階段、是否返回值，發生時刻，事件名稱等等狀況。
我以前老是簡單認爲事件目標都是在某個DOM節點上，其實並非這樣，由於就像這個http請求，它就是由一個XMLHttpRequest對象發起的。

來自爲知筆記(Wiz)