XHR 对象实例全部的配置、属性、方法、回调和不可变值

当咱们声明了一个XMLHttpRequest对象的实例的时候，使用for-in来循环遍历一下这个实例（本文使用的是chrome45版本浏览器），咱们会发如今这个实例上绑定了一些内容，我把这些内容进行了一下分类：

1、配置项

也就是对xhr对象进行配置。
① timeout ： 配置请求超时时间。
② withCredentials：是否携带发送提供凭据，在下面会进行详细的说明。

2、属性项

也就是指一些请求发送或完成过程当中可能会被用户读取或使用到的一些值。
① readyState：xhr的状态码。
② status：http状态码。
③ statusText：http状态说明文本。
④ response：响应。
⑤ responseType：响应类型。
⑥ responseURL：响应的URL路径。
⑦ responseText：响应的文本数据。
⑧ responseXML：响应的XML数据。
⑨ upload：上传对象，在下面会详细说明。

3、方法项

就是能够经过这些方法进行一些交互，如发送请求，获取或设置头部信息等等。
① open：打开一个xhr请求。
② setRequestHeader：设置请求头信息。
③ send：发送请求。
④ abort：中断请求。
⑤ getResponseHeader：获取某一响应头内容。
⑥ getAllResponseHeaders：获取全部响应头内容。
⑦ overrideMimeType：覆盖服务器返回的MIME类型。
xhr对象还有一些例如addEventListener、removeEventListener等等的方法，因为和xhr没太大联系，因此这里就再也不写出来了。

4、回调项

回调项的做用是用来当xhr对象发送一些变化的时候来触发某些操做使用的。
① onabort：发生中断事件。
② onerror：产生了错误。
③ ontimeout：请求超时了。
④ onreadystatechange：xhr状态码发生了改变。
⑤ onloadstart：当process开始的时候。（关于procress咱们在后面再说）
⑥ onprogress：每次progress正在进行的时候。
⑦ onload：每次progress成功的时候。
⑧ onloadend：当process结束的时候。

5、不可变值

在xhr中存在UNSENT，OPENED，HEADERS_RECEIVED，LOADING，DONE这五个不可变值，他们所表明的内容分别是0，1，2，3，4这五个数字，在open方法调用以前，xhr对象的status属性是UNSENT，也就是0，当调用了open方法以后，可是尚未调用send的时候status的值是OPENED，当调用了send方法，已经接收到响应的头信息时，status就会变为HEADERS_RECEIVED，正在接受响应内容的时候status就是LOADING，请求已完成而且接受完全部响应内容的时候就会变为DONE。

下面对这五个分类的前四个已经里面的内容进行一个详细的记录~（有人可能会问，不是上面分了五个分类吗，可素第五个分类就那5个不可改变的值，也没有什么好说的+_+）

1、配置项

① timeout
timeout是用来设置超时时间的，默认的值是0，也就是说没有超时限制，无论请求多久都不会触发超时。能够给他设置一个类型为数字的值，表明多少毫秒以后若是没有收到响应就触发超时事件（ontimeout）。
② withCredentials
这个值是来配置是否在发送的时候携带着凭据，默认值是false，也就是默认不携带。所谓的凭据指的就是cookie、HTTP认证及客户端SSL证实等信息。这个是在CORS跨域的时候与服务器的Access-Control-Allow-Credentials进行配合使用的，若是发送了携带凭据的请求，可是服务器的响应里面没有Access-Control-Allow-Credentials是true这个值的头，那么浏览器就会因为同源限制把响应给屏蔽掉，而且调用xhr的oerror事件。
例若有下面这一段代码：

javascript（示例代码，没有考虑兼容性）

var xhr=new XMLHttpRequest(); xhr.withCredentials=true; xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ console.log("success!"); } } } xhr.onerror=function(e){ console.log("error!"); } xhr.open("GET","http://127.0.0.1/withCredentials.php"); xhr.send(null);

若是在服务端的代码试下嘛这样子的：

php

header("Access-Control-Allow-Origin: *"); echo "ok";

那么确定会报错，首先由于当客户端的withCredentials设置为true的时候，服务端的Access-Control-Allow-Origin就不能设置为*来表明任意一个域了，须要把请求的域给写出来，如： http://192.168.1.106；另外服务器端须要把Access-Control-Allow-Credentials设置为true，不然会报错：

XMLHttpRequest cannot load http://127.0.0.1/withCredentials.php. Credentials flag is "true", but the "Access-Control-Allow-Credentials" header is "". It must be "true" to allow credentials. Origin "http://192.168.1.106" is therefore not allowed access.

因此正确的服务端代码应该是：

php

header("Access-Control-Allow-Origin: http://192.168.1.106"); header("Access-Control-Allow-Credentials: true"); echo "ok";

2、属性项

① readyState
这个是xhr对象的状态码，就像是一本史书同样，贯穿于整个xhr的使用历史，从最开始没有进行任何操做的时候为UNSENT，到OPENED，HEADERS_RECEIVED，LOADING，DONE的一步步变化，咱们可使用onreadystatechange这一回调函数来侦听它的变化，咱们使用的最多的就是当它的值为4，也就是等于DONE的时候来对响应结果进行进一步的处理。
② status
因为xhr对象发送的是一个http请求，那么确定就会有http的状态码，status就是表明了状态码，当一个请求成功的时候那么状态码就是2XX或者是304，2XX表明的是服务器成功响应了，304表明是从浏览器缓存中读取了内容。

javascript

if(xhr.readyState==4){ if(xhr.status>=200&&xhr.status<300 ||="" xhr.status="=304){" console.log(xhr.response);="" }="" }<="" code=""></300>

③ statusText
这个属性的做用其实不大，就是对上面的http状态码status进行一个描述，好比说200状态码的描述就是OK。
④ response
字面意思是响应，就是响应的主体，这个值依赖于responseType，不一样的responseType就会使得response的类型不一样。

下面是不一样的responseType和response类型对照
① "" ：空值表明response是一个 DOMString 类型的值。
② arraybuffer：response是一个 ArrayBuffer 类型的值。
③ blob：response是一个 Blob 类型的值。
④ document：response是一个 Document 类型的值。
⑤ json：response是一个JSON类型的值。
⑥ text：response是一个DOMString类型的值，与responseType是空值相同。
另外还有一些浏览器独有的值，如moz-chunked-text，moz-blob等等，这些都是某种浏览器没有标准化的内容，因此这里也就不赘述了，若是有兴趣能够阅读MDN的此篇文章-》 传送门。

⑤ responseType
这就是响应的类型，在上面已经说过它与response的关系了，默认值就是为空。
⑥ responseURL
返回响应序列化的URL地址，若是URL是null就返回空字符串。如在上面最开始说withCredentials的时候的代码中的responseURL的值就是
“http://127.0.0.1/withCredentials.php”。
⑦ responseText
若是请求成功就是一个带有响应数据文本的DOMString，若是请求不成功那么这个值就是null。
⑧ responseXML
是一个包含响应数据的文档（document），若是请求失败或者是请求返回的内容不能解析为一个xml或者是html，那么这个值就是null。
⑨ upload
这是一个新的api，返回一个XMLHttpRequestUpload对象，表示上传过程。这个对象包含与xhr相似的回调函数，可使用这些回调函数来监听数据发送过程当中的进度（onprogress）、错误（onerror）、中断（onabort）等等。
可使用这个对象来建立一个上传内容的进度监测：

javascript

var xhr = new XMLHttpRequest(); var onProgressHandler = function(event) { if(event.lengthComputable) { console.log((event.loaded / event.total) * 100); } else { console.log("Can"t determine the size of the file."); } } xhr.upload.addEventListener("progress", onProgressHandler, false); xhr.open("POST","http://iwenku.net"); xhr.send(data);

3、方法项

① open
用于初始化一个请求，全部ajax请求的第一步都是要构建这么一个请求。在open方法以前xhr的readyState是UNSENT，当调用open方法以后就会变为OPENED。
open方法有5个参数，前两个是必须的，后面三个是可选的参数。
第一个是用的HTTP方法：能够传入“GET”、“POST”、“HEAD”等方法。
第二个参数是请求的地址。
第三个参数表明是否是异步（async），默认值为true，也就是使用异步的方式不阻塞主线程，若是值为false，则不使用异步的方式，在主线程知道xhr的请求结束以后才会继续执行后面的语句。下面有一段xhr的open方法异步和同步的示例：

javascript

var xhr=new XMLHttpRequest(); xhr.open("GET","http://127.0.0.1/openTest.php"); xhr.send(null); xhr.onreadystatechange=function(){ if(xhr.readyState===xhr.DONE){ console.log("done"); } } console.log("response"+xhr.responseText); for(var i=0;i<3;i++){ console.log(i);="" }<="" code=""></3;i++){>

上面open方法没有传入第三个参数，也就是使用了默认值true，表明这是一个异步的请求，最后程序的输出为：

response:
0
1
2
done

若是在上面的代码中把open的第三个参数设置为false，那么就是使用同步的方式，程序的输出结果是：

response:ok
0
1
2

能够看出来不只仅是在主线程中顺序执行了，并且readystatechange事件也没有侦听到。
② setRequestHeader
给指定的HTTP请求头赋值，这个方法若是要使用的话须要在open方法执行以后而且尚未执行send方法。

语法：setRequestHeader（请求头名称，要赋予的值）

这个方法其实很简单，以前在一个前端中级交流群里有个朋友提出来怎么来设置多个请求头，我和他说屡次调用这个方法不就好了，其实本身偷偷的去查了一下能不能调用一次这个方法同时改变多个值，事实证实是不行的~。
③ send
发送请求. 若是在open中没有设置async参数，或者是这个参数设置为了true，那么在调用send方法后send方法会当即返回，不会阻塞主线程，而后继续执行后面的代码。若是在open的时候采用的是同步的方式，也就是把第三个参数设置为了false，那么send方法就会阻塞主线程，只有当请求结束的时候才会返回。
send方法能够不传入数据，也能够传入ArrayBuffer、Blob、Document、DOMString或者是FormData等类型的数据，当数据类型为document的时候，它在发送以前会进行序列化，在FireFox3以前编码老是会采用utf8，在这以后会根据body或者xmlEncoding的编码。

什么是序列化？
序列化是将对象状态转换为可保持或传输的格式的过程。在javascript中最经常使用的进行序列化的方法是JSON.stringify，反序列化可使用JSON.parse来实现。

④ abort
若是请求已经被发送，则马上停止请求。可是这个也只是让前端结束ajax请求，至于后台会不会也结束请求再也不去执行某些操做，那么就得对后端进行设置了。
⑤ getResponseHeader
返回指定的响应头的值，若是响应头还没被接受，或该响应头不存在，则返回null。

语法：getResponseHeader（相应头名称）

javascript

var xhr=new XMLHttpRequest(); xhr.open("GET","http://127.0.0.1/getResponseHeader.php"); xhr.send(null); xhr.onreadystatechange=function(){ if(xhr.readyState===xhr.DONE){ console.log(xhr.getResponseHeader("Content-Type")); } }

上面这一段代码会输出”text/html“，也就是说在相应头中的Content-Type就是这个。
⑥ getAllResponseHeaders
这个方法和上面的getResponseHeader相相似，这个方法返回的是全部的头部信息，通过实际测试返回的内容数据类型为string。
⑦ overrideMimeType
在浏览器中显示的内容有 HTML、有 XML等等不少类型，浏览器就是使用MIME Type，也就是该资源的媒体类型来区分它们，来决定怎么显示。
媒体类型一般是经过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是经过Content-Type 来表示的，例如:Content-Type: text/HTML表示内容是 text/HTML 类型，也就是超文本文件。
这个方法的做用就是重写由服务器返回的MIME type。这个可用于强制把一个响应流看成“text/xml”来处理和解析，即便服务器没有指明数据是这个类型。
这个方法须要在open以后，send方法以前进行调用。

4、回调项
① onabort
当一个xhr实例调用abort方法的时候会触发这个回调，用于处理中断了一个xhr请求以后的一些事情。这个回调函数会传入一个XMLHttpRequestProgressEvent类型的参数：

② onerror 当xhr出现错误的时候就会触发这个回调，也会传入一个XMLHttpRequestProgressEvent对象。 ③ ontimeout 当请求的执行时间超过了timeout设置的时长的时候就会触发这个超时回调。 ④ onreadystatechange 每当 XMLHttpRequest 的属性 readyState 发生改变时就会触发这个事件，可是根据实际测试若是open的时候这个ajax请求不是异步的，那么就不会触发这个事件。 当一个 XMLHttpRequest 请求被 abort() 方法取消时 readystatechange 事件也不会被触发。 还剩下4个回调，这四个都是关于progress的，因此在这里一块儿来写一下~ 在 XHR2 (XMLHttpRequest Level 2) 的规范性已经定义了 Progress Event 事件，好让咱们在发送异步请求的时候可以得知进度。 onloadstart：当process开始的时候触发。 onloadend：当process结束的时候。 onprogress：每次progress正在进行的时候触发，会传入一个XMLHttpRequestProgressEvent对象，能够从这个对象的total属性、loaded对象等来获取总大小和已经加载的大小。 onload：每次progress成功的时候触发。