一、XMLHttpRequest對象

var xhr = new XMLHttpRequest(),i = 0; for(var key in xhr){if(xhr.hasOwnProperty(key)){i++;} } console.log(i); //0 console.log(XMLHttpRequest.prototype.hasOwnProperty('timeout')); //true

會發現XMLHttpRequest實例對象沒有自身屬性，實際上，它的所有屬性均來自于XMLHttpRequest.prototype。
追根溯源

xhr => XMLHttpRequest.prototype => XMLHttpRequestEventTarget.prototype => EventTarget.prototype => Object.prototype

二、XMLHttpRequest實例的屬性
1、readyState
只讀，readyState記錄了ajax調用過程中所有可能的狀態，表示XMLHttpRequest請求當前所處的狀態。

0表示未初始化，請求已建立； 1表示初始化，請求已建立，但未發送； 2表示發送數據，請求已發送； 3表示數據傳送中，請求處理中，響應的數據還不夠齊全； 4表示完成，數據接收完畢。

2、response
只讀，表示服務器的響應內容。
3、responseType
表示服務器返回數據的類型，缺省為空字符串，可取 "arraybuffer"，"blob"，"document"，"json"，"text" 共五種類型。
4、responseText
只讀，表示服務器響應內容的文本形式。
5、responseXML
只讀, responseXML表示xml形式的響應數據, 缺省為null, 若數據不是有效的xml, 則會報錯.
6、status
只讀，status表示本次請求所得到的HTTP狀態碼，初始值為0。如果服務器沒有顯式地指定狀態碼，那么status將被設置為默認值，即200。基本上，只有2xx和304的狀態碼，表示服務器返回是正常狀態。

1** 消息；2** 成功；3** 重定向； 4** 請求錯誤； 5** 服務器錯誤。 200，OK，訪問正常 301，Moved Permanently，永久移動 302，Move temporarily，暫時移動 304，Not Modified，未修改 305，請求的資源必須通過指定的代理才能被訪問 307，Temporary Redirect，暫時重定向 400，語義有誤，當前請求無法被服務器理解 401，Unauthorized，未授權 403，Forbidden，禁止訪問，服務器已經理解請求，但是拒絕執行它。 404，Not Found，未發現指定網址，請求失敗，在服務器上面沒有找到請求的資源。 500，Internal Server Error，服務器代碼錯誤

7、statusText
只讀，statusText表示服務器發送的狀態提示，包含整個狀態信息，比如"200 OK"。

8、timeout
用于指定ajax的超時時長，表示多少毫秒后，如果請求仍然沒有得到結果，就會自動終止。如果該屬性等于0，就表示沒有時間限制。
9、responseURL
responseURL返回ajax請求最終的URL，如果請求中存在重定向，那么responseURL表示重定向之后的URL。
10、withCredentials
withCredentials是一個布爾值，默認為false，表示跨域請求中不發送cookies等信息。當它設置為true時，cookies，authorization headers 或者TLS客戶端證書都可以正常發送和接收。顯然，它的值對同域請求沒有影響，該屬性適用于IE10+，opera12+及其他現代瀏覽器。

xhr.withCredentials = true;

服務器必須顯示返回Access-Control-Allow-Credentials這個頭信息。

Access-Control-Allow-Credentials: true

11、upload
屬性默認返回一個XMLHttpRequestUpload對象，用于上傳資源，該對象具有如下方法：

onloadstart onprogress onabort onerror onload ontimeout onloadend

三、XMLHttpRequest實例的方法
1、getResponseHeader()
getResponseHeader方法用于獲取ajax響應頭中指定字段的值，如果response headers中存在相同的字段，那么它們的值將自動以字符串的形式連接在一起。
2、getAllResponseHeaders()
getAllResponseHeaders方法用于獲取所有安全的ajax響應頭，響應頭以字符串形式返回。每個HTTP報頭名稱和值用冒號分隔，如key:value，并以\r\n結束。
3、open()
open方法用于指定發送HTTP請求的參數，它的使用格式如下，一共可以接受五個參數。

void open(string method, //表示HTTP動詞，比如“GET”、“POST”、“PUT”和“DELETE”。string url, //表示請求發送的網址。optional boolean async, //格式為布爾值，默認為true，表示請求是否為異步。optional string user, //表示用于認證的用戶名，默認為空字符串。optional string password //表示用于認證的密碼，默認為空字符串。 );

4、send()
send方法用于實際發出HTTP請求。如果不帶參數，就表示HTTP請求只包含頭信息，也就是只有一個URL，典型例子就是GET請求；如果帶有參數，就表示除了頭信息，還帶有包含具體數據的信息體，典型例子就是POST請求。
所有XMLHttpRequest的監聽事件，都必須在send()方法調用之前設定。
5、setRequestHeader()
setRequestHeader方法用于設置HTTP頭信息。該方法必須在open()之后、send()之前調用。如果該方法多次調用，設定同一個字段，則每一次調用的值會被合并成一個單一的值發送。

//指定請求的type為json格式 xhr.setRequestHeader("Content-type", "application/json"); //除此之外, 還可以設置其他的請求頭 xhr.setRequestHeader('x-requested-with', '123456');

6、overrideMimeType()
overrideMimeType方法用于強制指定response的MIME類型，即強制修改response的Content-Type。

xhr.overrideMimeType("text/xml; charset = utf-8"); xhr.send();

四、XMLHttpRequest實例的事件
1、onreadystatechange事件
onreadystatechange事件回調方法在readystate狀態改變時觸發，默認會傳入Event實例。在一個收到響應的ajax請求周期中，會觸發4次onreadystatechange事件。
2、onloadstart事件
onloadstart事件回調方法在ajax請求發送之前觸發，觸發時機在readyState==1狀態之后，readyState==2狀態之前。onloadstart方法中默認將傳入一個ProgressEvent事件進度對象。
3、onprogress事件
onprogress事件回調方法在readyState==3狀態時開始觸發，默認傳入ProgressEvent對象。有兼容性問題，適用于IE10+及其他現代瀏覽器。

//跟蹤上傳進度 xhr.upload.onprogress = function(e){var percent = 100 * e.loaded / e.total;console.log('upload: ' + precent + '%'); }

4、onerror事件
onerror事件回調方法在ajax請求出錯后執行，通常只在網絡出現問題時或者ERR_CONNECTION_RESET時觸發(如果請求返回的是407狀態碼，chrome下也會觸發onerror)。
5、onabort事件
用來終止已經發出的HTTP請求。取消后, readyState狀態將被設置為0(UNSENT)。
6、onload事件
onload事件回調方法在ajax請求成功后(readyState==4狀態后)觸發。

7、onloadend事件
onloadend事件回調方法在ajax請求完成后(readyState==4狀態后或者readyState==2狀態后)觸發，方法中默認傳入一個ProgressEvent事件進度對象。

轉載于:https://www.cnblogs.com/camille666/p/js_xmlhttprequest_obj.html

總結

以上是生活随笔為你收集整理的XHR对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。