转载请标明出处
本文出自HCY的博客
Ajax是“Asynchronous javascript And xml”的缩写，中文译作“异步Javascript和XML”。使用AJAX可以通过HTTP协议与服务器交互数据，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页如果需要更新内容，必须重新加载整个网页页面。此外，它也是实现前端与后端解耦的重要技术手段。
为了实现AJAX技术，早期微软的IE5、IE6浏览器内嵌了xmlhttp组件，其它浏览器比如Opera、Mozila的早期版本则内嵌了XMLHttPRequest组件。XMLHTTP与XMLHttpRequest有很多相同的属性和方法，因此XMLHTTP也被一起叫做XMLHttpRequest，简称XHR。后来XHR被W3C组织标准化。各浏览器也逐渐按照W3C制定的标准来实现XHR，到目前为止，仍然有部分的属性和方法不被部分浏览器支持。下面的图片截取于 Can I Use网站，它描述了目前各浏览器对XHR的兼容情况。因此，在使用XHR开发时需要注意兼容性，不过笔者认为，老版本浏览器的占有量会越来越少，新版本的浏览器可能会更加严格的按照W3C制定的标准来实现XHR，兼容性问题就会被慢慢淡化，Jquery框架在2.2的版本在实例化XHR时就不考虑IE5、IE6的兼容性问题了。
为了实现兼容IE5、IE6浏览器版本，所以可以用下面的代码创建XHR实例。
var xhr;if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xhr=new XMLHttpRequest();}else{ // IE6, IE5 浏览器执行代码 xhr=new ActiveXObject("Microsoft.XMLHTTP");}XHR可以通过HTTP协议与服务器交换数据,要发送HTTP请求要使用到下面这些方法和属性：
open方法用于创建HTTP请求，但是请求并未发送，其定义如下：
open(method, url [, async = true [, username = null [, passWord = null]]])参数method定义请求的类型，如GET、POST方法等等，大小写不敏感参数url定义请求的URL地址参数async定义是否异步处理请求，true(异步)或者false(同步)，默认为true参数username定义用户名，不常用，默认为null参数password定义密码，不常用，默认为nullsetRequestHeader方法用于向请求添加HTTP头，其定义如下:
setRequestHeader(name, value)参数name定义HTTP请求头部的名称参数value定义HTTP请求头部的值注意: 1. setRequestHeader方法必须在open方法调用之后、send方法之前调用，否则会出现异常 2. setRequestHeader方法可以连续调用多次，如果已经存在同名的HTTP头时，最终结果是追加而不是覆盖
//例子1client.setRequestHeader('X-Test', 'one');client.setRequestHeader('X-Test', 'two');//最后的结果为X-Test: one, two//例子2client.setRequestHeader('X-Test', 'one');client.setRequestHeader('X-Test', 'one');//最后的结果为X-Test: one, onetimeout属性用于设置HTTP请求的超时时间，单位毫秒。当发生超时时，会触发ontimeout事件。在IE中，超时属性只能在调用 open() 方法之后且在调用 send() 方法之前设置。
upload用于在数据传输到服务器时收集一些传输信息，比如上传了多少字节，总共多少字节等，其里面还包含了一些事件回调。
send方法用于发送open方法创建的HTTP请求，其定义如下：
send([body = null])参数body定义HTTP请求的数据，当HTTP请求的方法为GET、HEAD时，该参数被忽略。body的类型可以为ArrayBuffer(二进制缓冲数组)、Blob(二进制大对象)、Document(类似XML格式的数据)、DOMString（字符串）、FormData(表单)。上面几种数据类型的介绍可参考:
ArrayBuffer、Blob、Document、DOMString、FormData类型的数据介绍
当请求发送后如果想终止这个请求，则可以调用abort方法，其定义如下：
abort()当XHR发送异步请求后，我们无法知道请求是否发生了异常、请求何时到达服务器、服务器何时返回响应数据。XHR为我们提供了很多的事件回调，用来通知我们请求及响应状态的改变。下面的接口定义语言描述了跟XHR相关的事件接口定义。
interface XMLHttpRequestEventTarget : EventTarget { // event handlers attribute EventHandler onloadstart; attribute EventHandler onprogress; attribute EventHandler onabort; attribute EventHandler onerror; attribute EventHandler onload; attribute EventHandler ontimeout; attribute EventHandler onloadend;};interface XMLHttpRequestUpload : XMLHttpRequestEventTarget {};interface XMLHttpRequest : XMLHttpRequestEventTarget { // event handler attribute EventHandler onreadystatechange; // states //XHR的状态定义 const unsigned short UNSENT = 0; const unsigned short OPENED = 1; const unsigned short HEADERS_RECEIVED = 2; const unsigned short LOADING = 3; const unsigned short DONE = 4; //用于描述XHR的状态 readonly attribute unsigned short readyState; // request [SameObject] readonly attribute XMLHttpRequestUpload upload;};readyState属性用于描述XHR的状态，它有下面五种状态：| 值 | 状态 | 描述 |
|---|---|---|
| 0 | UNSENT | 最初始状态，还未调用open方法 |
| 1 | OPENED | 已经调用了open方法 |
| 2 | HEADERS_RECEIVED | 已经调用了send方法，响应的HTTP头部和状态可以获取 |
| 3 | LOADING | 正在下载数据，下载的数据还不完整 |
| 4 | DONE | 数据下载完成 |
- onreadystatechange属性可以指定一个回调函数，当XHR的状态（即readyState）发生改变时就会调用该函数，可以在这个回调函数中判断请求是否成功。
xhr.onreadystatechange = function() { if (xhr.readyState == 4) { //当XHR的状态为4时判断请求成功与否，然后处理响应的数据，虽然当XHR的状态为2或者3时可以获取到响应状态，但是此时的数据还未下载完全，不能处理响应数据 if (xhr.status == 200) { //请求成功，处理响应数据 } else { //请求失败 } } }upload属性代表上传数据的过程，它是XMLHttpRequestUpload的实例，XMLHttpRequestUpload继承XMLHttpRequestEventTarget接口，XMLHttpRequestEventTarget有7个回调方法，在数据上传的过程中会调用相应的方法。XHR也继承XMLHttpRequestEventTarget接口，因此它也拥有这些回调方法，但是它的回调方法大多都是从服务器下载响应数据的过程中触发的。upload的回调方法会在数据上传的过程中触发，XHR的回调方法大多在响应数据下载的过程中触发，具体的触发时机见下表：
| 事件 | 触发时机 |
|---|---|
| onreadystatechange | 当readyState的值改变时触发，除了当它从非0变成0时 |
| onloadstart | 当调用send方法时会触发xhr.onloadstart,然后会触发xhr.upload.onloadstart，代表开始上传数据 |
| onprogress | 上传数据过程中会触发xhr.upload.onprogress，下载数据过程中会触发xhr.onprogress，onprogress每50ms会触发一次 |
| onabort | 调用abort方法后会触发 |
| onerror | 当发生网络异常的时候会触发，如果上传数据的过程还未结束，此时会先触发xhr.upload.onerror，然后再触发xhr.onerror；如果上传数据的过程已经结束，此时只会触发xhr.onerror |
| onload | 上传数据成功，会触发xhr.upload.onload；下载数据成功会触发xhr.onload |
| ontimeout | 当服务端响应的时间超过指定的timeout时间时，会触发此事件 |
| onloadend | 上传数据完成（成功或者失败）时会触发xhr.upload.onloadend；下载数据完成（成功或失败）会触发xhr.onloadend |
通过下面的代码验证，可以得出事件触发的顺序。
var xhr = new XMLHttpRequest(); xhr.timeout = 1; //xhr events xhr.onreadystatechange = function() { console.log("onreadystatechange(),readyState=" + xhr.readyState); } xhr.onloadstart = function(event) { console.log("onloadstart()"); } xhr.onprogress = function(event) { console.log("onprogress()"); } xhr.onabort = function(event) { console.log("onabort()"); } xhr.onerror = function(event) { console.log("onerror()"); } xhr.onload = function(event) { console.log("onload()"); } xhr.ontimeout = function(event) { console.log("ontimeout()"); } xhr.onloadend = function(event) { console.log("onloadend()"); } //upload events xhr.upload.onloadstart = function(event) { console.log("upload.onloadstart()"); } xhr.upload.onprogress = function(event) { console.log("upload.onprogress()"); } xhr.upload.onabort = function(event) { console.log("upload.onabort()"); } xhr.upload.onerror = function(event) { console.log("upload.onerror()"); } xhr.upload.onload = function(event) { console.log("upload.onload()"); } xhr.upload.ontimeout = function(event) { console.log("upload.ontimeout()"); } xhr.upload.onloadend = function(event) { console.log("upload.onloadend()"); } try { xhr.open("POST", "http://localhost:8080/Server/test", true); xhr.send("hello"); } catch (e) { alert(e.toString()); }打印的顺序如下：
//调用了open方法onreadystatechange(),readyState=1//调用了send方法onloadstart()//上传数据过程中的事件回调upload.onloadstart()//开始上传请求数据upload.onprogress()//正在上传请求数据upload.onload()//成功上传请求数据upload.onloadend()//完成上传请求数据//下载响应数据过程中的事件回调onreadystatechange(),readyState=2//已经获取到响应头部和响应状态码onreadystatechange(),readyState=3//正在下载响应数据，改变状态onprogress()//正在下载响应数据onreadystatechange(),readyState=4//响应数据下载完成，改变状态onload()//成功下载响应数据onloadend()//完成下载响应数据XMLHttpRequestEventTarget里面的回调方法的参数类型为ProgressEvent，ProgressEvent的定义如下：
interface ProgressEvent : Event { readonly attribute boolean lengthComputable;//数据长度是否可计算的 readonly attribute unsigned long long loaded;//已经下载或者上传了多少字节 readonly attribute unsigned long long total;//需要下载或者上传的总字节数};所以在onprogress方法回调中，可以通过loaded和total这两个属性来实现上传或者下载的进度条功能。
因此下面的代码实现的效果与方式一相同
xhr.addEventListener("loadstart", function(event) { console.log("loadstart()"); });了解了XHR的请求、XHR的事件回调之后，就剩下处理XHR响应的工作了，比如解析数据等等，要处理响应，需要了解下面的方法和属性。
getResponseHeader方法可以获取HTTP响应头指定键值的数据，其定义如下：
getResponseHeader(ByteString name);参数name为HTTP响应头部的键值getAllResponseHeaders方法可以获取所有的HTTP响应头的数据，其定义如下：
getAllResponseHeaders()status属性表示HTTP响应状态码，即200、404等；statusText属性表示HTTP响应状态的描述文本，即OK、Not Found等。
可以在发送请求之前设置responseType，用于指定返回的响应数据的类型，responseType的类型有以下几种：
| 类型 | 描述 |
|---|---|
| empty string | 空字符串，这是默认值 |
| arraybuffer | 二进制缓冲数组 |
| blob | 二进制大对象 |
| document | 文档类型 |
| json | JSON类型 |
| text | 文本类型 |
处理响应数据时，需要根据responseType来判断返回的数据类型。当responseType为text或者empty string类型时可以使用responseText属性，为其它类型时调用responseText会发生异常；当responseType为document或者empty responseXML属性，为其它类型时调用responseXML会发生异常；当responseType不是empty string、text、document类型时，需要转换成具体的类型进行解析。
通过XHR回调事件的触发时机我们可以知道，onreadystatechange回调会触发多次，因此方式二更优。
扫一扫关注我的公众号。
新闻热点
疑难解答
