[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);
}
~~~
