首先，先來一個簡易的ajax:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.send(null);
就是這樣一個簡單的ajax請求就完成了，接下來對 XMLHttpRequest 對象及所擁有的方法、屬性進行說明。
XMLHttpRequest():
這是個構造函數，用于初始化一個XMLHttpRequest對象。
方法
xhr.open(method, url, async, user, password):
作用: 通過XMLHttpRequest實例，打開一個請求。
參數:
- method(String): 請求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下個參數是非HTTP(S)的URL,則忽略該參數
- url(String): 請求訪問的URL地址
- async(Boolean): 配置是否為異步執行，默認值為true; 如果想了解更多請點擊ajax的同步與異步
- user(String): 授權參數
- password(String): 授權參數
注意: 在未調用send()前, 再次調用open()方法等同于abort()
xhr.send(data)
說明: 發送請求
參數：
data(String, Array, Object): 發送請求時所需要傳遞的參數，為空時傳遞null
xhr.abort();
說明：中止請求
xhr.getAllResponseHeaders();
說明：獲取全部響應頭信息
注意：需要在onreadystatechange事件函數中使用
xhr.getResponseHeader(headerStr);
說明：獲取響應頭信息
注意：需要在 onreadystatechange 事件函數中使用
參數：
headerStr: 響應頭名稱
屬性
xhr.readyState
說明：當前請求的五種狀態值，一般在事件函數 onreadystatechange 中作為條件判斷，以下是五種狀態值及對應說明。
- 0未打開，xhr.open()方法還未被調用.
- 1未發送, xhr.send()方法還未被調用.
- 2已獲取響應頭,xhr.send()方法已經被調用, 響應頭和響應狀態已經返回.
- 3正在下載響應體, xhr.響應體下載中; responseText中已經獲取了部分數據.
- 4請求完成, 整個請求過程已經完畢.
xhr.responseType
說明： 通知服務器，請求所期待反回的數據類型
不同的配置會影響接收返回數據的方式，常用的數據類型有兩種，對應的接收屬性為：
text => responseText
json => response
不建議配置該項，使用默認字符串進行接收，接收后在客戶端自行轉換格式。
xhr.timeout
說明: 通過該屬性進行超時時長設置，單位為毫秒。超時后會觸發 ontimeout 事件
注意: 當前請求為同步請求時，使用該屬性會拋異常。
xhr.withCredentials
說明: 跨域請求是否提供憑據(cookie、HTTP認證及客戶端SSL證明等)。想了解更多請查看ajax中的withCredentials使用效果。
xhr.upload
說明：該屬性指向 XMLHttpRequestUpload 上傳對象，通過在該對象上綁定事件來處獲取相應的信息。除過 onreadystatechange 事件不可以綁定至 XMLHttpRequestUpload 以象，其它事件均可以綁定
想了解更多請查看帶進度的簡單上傳。
事件
xhr.onreadystatechange
說明: 監聽屬性 xhr.readyState ，在該值發生改變后觸發并執行事件函數；
示例:
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4) {
return;
}
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
// jquery success(XHR, TS)
options.success(xhr.response, xhr.status);
} else {
// jquery error(XHR, TS, statusText)
options.error(xhr, xhr.status, xhr.statusText);
}
};
xhr.onloadstart
說明: 監聽開始事件，觸發后執行事件函數
示例:
xhr.onloadstart = function(){
console.log('開始');
}
xhr.onprogress
說明: 監聽數據傳輸進行中事件，觸發后執行事件函數
示例:
xhr.onprogress = function(){
console.log('onprogress');
}
xhr.onabort
說明: 監聽請求終止事件，觸發后執行事件函數
示例:
xhr.onabort = function(){
console.log('請求終止');
}
xhr.onerror
說明: 監聽請求失敗事件，觸發后執行事件函數
示例:
xhr.onerror = function(){
console.log('請求失敗');
}
xhr.onload
說明: 監聽請求成功事件，觸發后執行事件函數
示例:
xhr.onload = function(){
console.log('請求成功');
}
xhr.ontimeout
說明: 監聽請求延遲未完成事件，觸發后執行事件函數
示例:
xhr.ontimeout = function(){
console.log('延遲未完成');
}
xhr.onloadend
說明: 監聽請求完成事件，觸發后執行事件函數
示例:
xhr.onloadend = function(){
console.log('請求完成');
}
順帶說下 XMLHttpRequest 最先是IE提出來的，IE對互聯網貢獻很大，只是被黑的太慘。
@拭目以待
個人站點：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公眾賬號：loveJavascript
