XHR 對象實例全部的配置、屬性、方法、回調和不可變值

當咱們聲明瞭一個XMLHttpRequest對象的實例的時候，使用for-in來循環遍歷一下這個實例（本文使用的是chrome45版本瀏覽器），咱們會發如今這個實例上綁定了一些內容，我把這些內容進行了一下分類：

1、配置項

也就是對xhr對象進行配置。
① timeout ： 配置請求超時時間。
② withCredentials：是否攜帶發送提供憑據，在下面會進行詳細的說明。

2、屬性項

也就是指一些請求發送或完成過程當中可能會被用戶讀取或使用到的一些值。
① readyState：xhr的狀態碼。
② status：http狀態碼。
③ statusText：http狀態說明文本。
④ response：響應。
⑤ responseType：響應類型。
⑥ responseURL：響應的URL路徑。
⑦ responseText：響應的文本數據。
⑧ responseXML：響應的XML數據。
⑨ upload：上傳對象，在下面會詳細說明。

3、方法項

就是能夠經過這些方法進行一些交互，如發送請求，獲取或設置頭部信息等等。
① open：打開一個xhr請求。
② setRequestHeader：設置請求頭信息。
③ send：發送請求。
④ abort：中斷請求。
⑤ getResponseHeader：獲取某一響應頭內容。
⑥ getAllResponseHeaders：獲取全部響應頭內容。
⑦ overrideMimeType：覆蓋服務器返回的MIME類型。
xhr對象還有一些例如addEventListener、removeEventListener等等的方法，因爲和xhr沒太大聯繫，因此這裏就再也不寫出來了。

4、回調項

回調項的做用是用來當xhr對象發送一些變化的時候來觸發某些操做使用的。
① onabort：發生中斷事件。
② onerror：產生了錯誤。
③ ontimeout：請求超時了。
④ onreadystatechange：xhr狀態碼發生了改變。
⑤ onloadstart：當process開始的時候。（關於procress咱們在後面再說）
⑥ onprogress：每次progress正在進行的時候。
⑦ onload：每次progress成功的時候。
⑧ onloadend：當process結束的時候。

5、不可變值

在xhr中存在UNSENT，OPENED，HEADERS_RECEIVED，LOADING，DONE這五個不可變值，他們所表明的內容分別是0，1，2，3，4這五個數字，在open方法調用以前，xhr對象的status屬性是UNSENT，也就是0，當調用了open方法以後，可是尚未調用send的時候status的值是OPENED，當調用了send方法，已經接收到響應的頭信息時，status就會變爲HEADERS_RECEIVED，正在接受響應內容的時候status就是LOADING，請求已完成而且接受完全部響應內容的時候就會變爲DONE。

下面對這五個分類的前四個已經裏面的內容進行一個詳細的記錄~（有人可能會問，不是上面分了五個分類嗎，可素第五個分類就那5個不可改變的值，也沒有什麼好說的+_+）

1、配置項

① timeout
timeout是用來設置超時時間的，默認的值是0，也就是說沒有超時限制，無論請求多久都不會觸發超時。能夠給他設置一個類型爲數字的值，表明多少毫秒以後若是沒有收到響應就觸發超時事件（ontimeout）。
② withCredentials
這個值是來配置是否在發送的時候攜帶着憑據，默認值是false，也就是默認不攜帶。所謂的憑據指的就是cookie、HTTP認證及客戶端SSL證實等信息。這個是在CORS跨域的時候與服務器的Access-Control-Allow-Credentials進行配合使用的，若是發送了攜帶憑據的請求，可是服務器的響應裏面沒有Access-Control-Allow-Credentials是true這個值的頭，那麼瀏覽器就會因爲同源限制把響應給屏蔽掉，而且調用xhr的oerror事件。
例若有下面這一段代碼：

javascript（示例代碼，沒有考慮兼容性）

var xhr=new XMLHttpRequest(); xhr.withCredentials=true; xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ console.log("success!"); } } } xhr.onerror=function(e){ console.log("error!"); } xhr.open("GET","http://127.0.0.1/withCredentials.php"); xhr.send(null);

若是在服務端的代碼試下嘛這樣子的：

php

header("Access-Control-Allow-Origin: *"); echo "ok";

那麼確定會報錯，首先由於當客戶端的withCredentials設置爲true的時候，服務端的Access-Control-Allow-Origin就不能設置爲*來表明任意一個域了，須要把請求的域給寫出來，如： http://192.168.1.106；另外服務器端須要把Access-Control-Allow-Credentials設置爲true，不然會報錯：

XMLHttpRequest cannot load http://127.0.0.1/withCredentials.php. Credentials flag is "true", but the "Access-Control-Allow-Credentials" header is "". It must be "true" to allow credentials. Origin "http://192.168.1.106" is therefore not allowed access.

因此正確的服務端代碼應該是：

php

header("Access-Control-Allow-Origin: http://192.168.1.106"); header("Access-Control-Allow-Credentials: true"); echo "ok";

2、屬性項

① readyState
這個是xhr對象的狀態碼，就像是一本史書同樣，貫穿於整個xhr的使用歷史，從最開始沒有進行任何操做的時候爲UNSENT，到OPENED，HEADERS_RECEIVED，LOADING，DONE的一步步變化，咱們可使用onreadystatechange這一回調函數來偵聽它的變化，咱們使用的最多的就是當它的值爲4，也就是等於DONE的時候來對響應結果進行進一步的處理。
② status
因爲xhr對象發送的是一個http請求，那麼確定就會有http的狀態碼，status就是表明了狀態碼，當一個請求成功的時候那麼狀態碼就是2XX或者是304，2XX表明的是服務器成功響應了，304表明是從瀏覽器緩存中讀取了內容。

javascript

if(xhr.readyState==4){ if(xhr.status>=200&&xhr.status<300 ||="" xhr.status="=304){" console.log(xhr.response);="" }="" }<="" code=""></300>

③ statusText
這個屬性的做用其實不大，就是對上面的http狀態碼status進行一個描述，好比說200狀態碼的描述就是OK。
④ response
字面意思是響應，就是響應的主體，這個值依賴於responseType，不一樣的responseType就會使得response的類型不一樣。

下面是不一樣的responseType和response類型對照
① "" ：空值表明response是一個 DOMString 類型的值。
② arraybuffer：response是一個 ArrayBuffer 類型的值。
③ blob：response是一個 Blob 類型的值。
④ document：response是一個 Document 類型的值。
⑤ json：response是一個JSON類型的值。
⑥ text：response是一個DOMString類型的值，與responseType是空值相同。
另外還有一些瀏覽器獨有的值，如moz-chunked-text，moz-blob等等，這些都是某種瀏覽器沒有標準化的內容，因此這裏也就不贅述了，若是有興趣能夠閱讀MDN的此篇文章-》 傳送門。

⑤ responseType
這就是響應的類型，在上面已經說過它與response的關係了，默認值就是爲空。
⑥ responseURL
返回響應序列化的URL地址，若是URL是null就返回空字符串。如在上面最開始說withCredentials的時候的代碼中的responseURL的值就是
「http://127.0.0.1/withCredentials.php」。
⑦ responseText
若是請求成功就是一個帶有響應數據文本的DOMString，若是請求不成功那麼這個值就是null。
⑧ responseXML
是一個包含響應數據的文檔（document），若是請求失敗或者是請求返回的內容不能解析爲一個xml或者是html，那麼這個值就是null。
⑨ upload
這是一個新的api，返回一個XMLHttpRequestUpload對象，表示上傳過程。這個對象包含與xhr相似的回調函數，可使用這些回調函數來監聽數據發送過程當中的進度（onprogress）、錯誤（onerror）、中斷（onabort）等等。
可使用這個對象來建立一個上傳內容的進度監測：

javascript

var xhr = new XMLHttpRequest(); var onProgressHandler = function(event) { if(event.lengthComputable) { console.log((event.loaded / event.total) * 100); } else { console.log("Can"t determine the size of the file."); } } xhr.upload.addEventListener("progress", onProgressHandler, false); xhr.open("POST","http://iwenku.net"); xhr.send(data);

3、方法項

① open
用於初始化一個請求，全部ajax請求的第一步都是要構建這麼一個請求。在open方法以前xhr的readyState是UNSENT，當調用open方法以後就會變爲OPENED。
open方法有5個參數，前兩個是必須的，後面三個是可選的參數。
第一個是用的HTTP方法：能夠傳入「GET」、「POST」、「HEAD」等方法。
第二個參數是請求的地址。
第三個參數表明是否是異步（async），默認值爲true，也就是使用異步的方式不阻塞主線程，若是值爲false，則不使用異步的方式，在主線程知道xhr的請求結束以後纔會繼續執行後面的語句。下面有一段xhr的open方法異步和同步的示例：

javascript

var xhr=new XMLHttpRequest(); xhr.open("GET","http://127.0.0.1/openTest.php"); xhr.send(null); xhr.onreadystatechange=function(){ if(xhr.readyState===xhr.DONE){ console.log("done"); } } console.log("response"+xhr.responseText); for(var i=0;i<3;i++){ console.log(i);="" }<="" code=""></3;i++){>

上面open方法沒有傳入第三個參數，也就是使用了默認值true，表明這是一個異步的請求，最後程序的輸出爲：

response:
0
1
2
done

若是在上面的代碼中把open的第三個參數設置爲false，那麼就是使用同步的方式，程序的輸出結果是：

response:ok
0
1
2

能夠看出來不只僅是在主線程中順序執行了，並且readystatechange事件也沒有偵聽到。
② setRequestHeader
給指定的HTTP請求頭賦值，這個方法若是要使用的話須要在open方法執行以後而且尚未執行send方法。

語法：setRequestHeader（請求頭名稱，要賦予的值）

這個方法其實很簡單，以前在一個前端中級交流羣裏有個朋友提出來怎麼來設置多個請求頭，我和他說屢次調用這個方法不就好了，其實本身偷偷的去查了一下能不能調用一次這個方法同時改變多個值，事實證實是不行的~。
③ send
發送請求. 若是在open中沒有設置async參數，或者是這個參數設置爲了true，那麼在調用send方法後send方法會當即返回，不會阻塞主線程，而後繼續執行後面的代碼。若是在open的時候採用的是同步的方式，也就是把第三個參數設置爲了false，那麼send方法就會阻塞主線程，只有當請求結束的時候纔會返回。
send方法能夠不傳入數據，也能夠傳入ArrayBuffer、Blob、Document、DOMString或者是FormData等類型的數據，當數據類型爲document的時候，它在發送以前會進行序列化，在FireFox3以前編碼老是會採用utf8，在這以後會根據body或者xmlEncoding的編碼。

什麼是序列化？
序列化是將對象狀態轉換爲可保持或傳輸的格式的過程。在javascript中最經常使用的進行序列化的方法是JSON.stringify，反序列化可使用JSON.parse來實現。

④ abort
若是請求已經被髮送，則馬上停止請求。可是這個也只是讓前端結束ajax請求，至於後臺會不會也結束請求再也不去執行某些操做，那麼就得對後端進行設置了。
⑤ getResponseHeader
返回指定的響應頭的值，若是響應頭還沒被接受，或該響應頭不存在，則返回null。

語法：getResponseHeader（相應頭名稱）

javascript

var xhr=new XMLHttpRequest(); xhr.open("GET","http://127.0.0.1/getResponseHeader.php"); xhr.send(null); xhr.onreadystatechange=function(){ if(xhr.readyState===xhr.DONE){ console.log(xhr.getResponseHeader("Content-Type")); } }

上面這一段代碼會輸出」text/html「，也就是說在相應頭中的Content-Type就是這個。
⑥ getAllResponseHeaders
這個方法和上面的getResponseHeader相相似，這個方法返回的是全部的頭部信息，通過實際測試返回的內容數據類型爲string。
⑦ overrideMimeType
在瀏覽器中顯示的內容有 HTML、有 XML等等不少類型，瀏覽器就是使用MIME Type，也就是該資源的媒體類型來區分它們，來決定怎麼顯示。
媒體類型一般是經過 HTTP 協議，由 Web 服務器告知瀏覽器的，更準確地說，是經過Content-Type 來表示的，例如:Content-Type: text/HTML表示內容是 text/HTML 類型，也就是超文本文件。
這個方法的做用就是重寫由服務器返回的MIME type。這個可用於強制把一個響應流看成「text/xml」來處理和解析，即便服務器沒有指明數據是這個類型。
這個方法須要在open以後，send方法以前進行調用。

4、回調項
① onabort
當一個xhr實例調用abort方法的時候會觸發這個回調，用於處理中斷了一個xhr請求以後的一些事情。這個回調函數會傳入一個XMLHttpRequestProgressEvent類型的參數：

② onerror 當xhr出現錯誤的時候就會觸發這個回調，也會傳入一個XMLHttpRequestProgressEvent對象。 ③ ontimeout 當請求的執行時間超過了timeout設置的時長的時候就會觸發這個超時回調。 ④ onreadystatechange 每當 XMLHttpRequest 的屬性 readyState 發生改變時就會觸發這個事件，可是根據實際測試若是open的時候這個ajax請求不是異步的，那麼就不會觸發這個事件。 當一個 XMLHttpRequest 請求被 abort() 方法取消時 readystatechange 事件也不會被觸發。 還剩下4個回調，這四個都是關於progress的，因此在這裏一塊兒來寫一下~ 在 XHR2 (XMLHttpRequest Level 2) 的規範性已經定義了 Progress Event 事件，好讓咱們在發送異步請求的時候可以得知進度。 onloadstart：當process開始的時候觸發。 onloadend：當process結束的時候。 onprogress：每次progress正在進行的時候觸發，會傳入一個XMLHttpRequestProgressEvent對象，能夠從這個對象的total屬性、loaded對象等來獲取總大小和已經加載的大小。 onload：每次progress成功的時候觸發。