# XHR
- [XHR](#XHR_1)
- [屬性](#_4)
- [方法](#_12)
- [get](#get_23)
- [post](#post_45)
# XHR
XHR英文全名XmlHttpRequest，中文可以解釋為可擴展超文本傳輸請求。Xml可擴展標記語言，Http超文本傳輸協議，Request請求。XMLHttpRequest對象可以在不向服務器提交整個頁面的情況下，實現局部更新網頁。當頁面全部加載完畢后，客戶端通過該對象向服務器請求數據，服務器端接受數據并處理后，向客戶端反饋數據。 XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步返回 Web 服務器的響應，并且能以文本或者一個 DOM 文檔形式返回內容。盡管名為 XMLHttpRequest，它并不限于和 XML 文檔一起使用：它可以接收任何形式的文本文檔。XMLHttpRequest 對象是名為 AJAX 的 Web 應用程序架構的一項關鍵功能。
# 屬性
屬性說明readyState表示XMLHttpRequest對象的狀態：
0：未初始化。對象已創建，未調用open；
1：open方法成功調用，但Send方法未調用；
2：send方法已經調用，尚未開始接受數據；
3：正在接受數據。Http響應頭信息已經接受，但尚未接收完成；
4：完成，即響應數據接受完成。onreadystatechange請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上注冊的javascript函數）。responseText服務器響應的文本內容responseXML服務器響應的XML內容對應的DOM對象status服務器返回的http狀態碼。
200表示“成功”，
404表示“未找到”
500表示“服務器內部錯誤"
statusText 服務器返回狀態的文本信息。# 方法
方法說明Open(string method,string url,boolean asynch,String username,string password)指定和服務器端交互的HTTP方法，URL地址，即其他請求信息；
Method:表示http請求方法，一般使用"GET","POST".
url：表示請求的服務器的地址；
asynch：表示是否采用異步方法，true為異步，false為同步；
后邊兩個可以不指定，username和password分別表示用戶名和密碼，提供http認證機制需要的用戶名和密碼。Send(content)向服務器發出請求，如果采用異步方式，該方法會立即返回。
content可以指定為null表示不發送數據，其內容可以是DOM對象，輸入流或字符串。SetRequestHeader(String header,String Value)設置HTTP請求中的指定頭部header的值為value.此方法需在open方法以后調用，一般在post方式中使用。
(.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);
}
```
