[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 ![](https://box.kancloud.cn/060a1adad4613a42bda11954a7f6d070_554x238.png) ~~~ 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 ![](https://box.kancloud.cn/c81a76f83f9c0c8e0324231c8d47694a_554x185.png) ~~~ 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); } ~~~