[TOC]
# XHR
XHR英文全名XmlHttpRequest，中文可以解釋為可擴展超文本傳輸請求。Xml可擴展標記語言，Http超文本傳輸協議，Request請求。XMLHttpRequest對象可以在不向服務器提交整個頁面的情況下，實現局部更新網頁。當頁面全部加載完畢后，客戶端通過該對象向服務器請求數據，服務器端接受數據并處理后，向客戶端反饋數據。 XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步返回 Web 服務器的響應，并且能以文本或者一個 DOM 文檔形式返回內容。盡管名為 XMLHttpRequest，它并不限于和 XML 文檔一起使用：它可以接收任何形式的文本文檔。XMLHttpRequest 對象是名為 AJAX 的 Web 應用程序架構的一項關鍵功能。
# 屬性
|屬性|說明|
|-- |-- |
| readyState |表示XMLHttpRequest對象的狀態：<br/>0：未初始化。對象已創建，未調用open；<br/>1：open方法成功調用，但Send方法未調用；<br/>2：send方法已經調用，尚未開始接受數據；<br/>3：正在接受數據。Http響應頭信息已經接受，但尚未接收完成；<br/>4：完成，即響應數據接受完成。|
|onreadystatechange |請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上注冊的javascript函數）。|
|responseText |服務器響應的文本內容|
|responseXML| 服務器響應的XML內容對應的DOM對象|
|status| 服務器返回的http狀態碼。<br/>200表示“成功”，<br/>404表示“未找到”<br/>500表示“服務器內部錯誤"<br/>statusText 服務器返回狀態的文本信息。|
# 方法
|方法 |說明|
|--|--|
|Open(string method,string url,boolean asynch,String username,string password) |指定和服務器端交互的HTTP方法，URL地址，即其他請求信息；<br/>Method:表示http請求方法，一般使用"GET","POST".<br/>url：表示請求的服務器的地址；<br/>asynch：表示是否采用異步方法，true為異步，false為同步；<br/>后邊兩個可以不指定，username和password分別表示用戶名和密碼，提供http認證機制需要的用戶名和密碼。|
|Send(content)| 向服務器發出請求，如果采用異步方式，該方法會立即返回。<br/>content可以指定為null表示不發送數據，其內容可以是DOM對象，輸入流或字符串。|
|SetRequestHeader(String header,String Value) |設置HTTP請求中的指定頭部header的值為value.此方法需在open方法以后調用，一般在post方式中使用。<br/>(.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");)|
|getAllResponseHeaders() |返回包含Http的所有響應頭信息，其中相應頭包括Content-length,date,uri等內容。返回值是一個字符串，包含所有頭信息，其中每個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！|
|getResponseHeader(String header) |返回HTTP響應頭中指定的鍵名header對應的值|
|Abort() |停止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。|
## get
~~~
function get(url, data, callback) {
var xml = new XMLHttpRequest();
var arrData = [];
if (data != null) {
for (var item in data) {
arrData.push(item + '=' + data[item]);
}
}
var param = arrData.join('&');
xml.open('get', url + '?' + param);
xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
callback && callback(JSON.parse(xml.responseText));
}
}
xml.send(null);
}
~~~
## post
~~~
function post(url, data, callback) {
var xml = new XMLHttpRequest();
var arrData = [];
if (data != null) {
for (var item in data) {
arrData.push(item + '=' + data[item]);
}
}
var param = arrData.join('&');
xml.open('post', url);
xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
callback && callback(JSON.parse(xml.responseText));
}
}
xml.send(param);
}
~~~
