XMLHttpRequest – 追少普通的前端生涯

获取类型及如何获取

responseType值	xhr.response数据类型	获取方式
“”(默认)	String字符串	responseText
“text”	String字符串	responseText
“document”	Document对象	responseXML
“json”	javascript对象	response
“blob”	Blob对象	response
“arrayBuffer”	ArrayBuffer对象	response

如何追踪请求当前状态

xhr.onreadystatechange = function () {
    switch(xhr.readyState){
      case 1://OPENED
        //do something
            break;
      case 2://HEADERS_RECEIVED
        //do something
        break;
      case 3://LOADING
        //do something
        break;
      case 4://DONE
        //do something
        break;
    }

值	状态	描述
0	UNSENT（初始状态，未打开）	此时xhr对象被成功构造open()方法还未被调用
1	OPENED (已打开，未发送)	open()方法已被成功调用，send()方法还未被调用。。注意：只有xhr处于OPENED状态，才能调用xhr.setRequestHeader()和xhr.send(),否则会报错
2	HEADERS_RECEIVED (已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回
3	LOADING (正在下载响应体)	响应体(response entity body)正在下载中，此状态下通过xhr.response可能已经有了响应数据
4	DONE (整个数据传输过程结束)	整个数据传输过程结束，不管本次请求是成功还是失败

如何设置请求的超时时间

xhr.timeout=0 单位毫秒，默认0为不超时

请求开始

xhr.send()的时候

请求结束

xhr.loadend触发的时候

注意点

send之后还可以设置timeout
xhr为一个sync同步请求是，xhr.timeout必须设置为0。

同步请求

尽量不使用，可能会导致页面一直阻塞，xhr.readyState由2变成3时，并不会触发onreadystatechange事件，xhr.upload.onnprogress和xhr.onprogress事件也不会触发。

open(method, url [, async = true [, username = null [, password = null]]])

值	解释
method	GET/POST/HEADER不区分大小写
url	可以是相对地址，也可以是绝对地址如http://zhuishao.net/example.php
async	默认为true即为异步请求，async=false是同步请求

同步请求限制

xhr.timeout必须为0
xhr.withCredentials必须为false
xhr.responseType必须为””

获取上传下载进度

上传事件触发的是xhr.upload对象的onprogress事件
下载触发的是xhr对象的onprogress事件

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
    if (event.lengthComputable) {
      var completedPercent = event.loaded / event.total;
    }
 }

可以发送什么数据

xhr.send(data);

ArrayBuffer
Blob
Document
DOMString
FormData
null

get方法一般不传参，传了也会被置为null

data值	content-type的默认值
Document同时也是HTML Document	text/html;charset=UTF-8
Docuemnt不是HTMLDocument	application/xml;charset=UTF-8
DOMString	text/plain;charset=UTF-8
FormData	multipart/form-data; boundary=[xxx]
其他类型	不会设置默认值

xhr.withCredentials与CORS

浏览器跨域发送请求不能发送任何认证信息（cookies和HTTP authentication schemes），除非xhr.withCredentials为true,默认值是false。

浏览器端withCredentials	服务器端 Access-Control-Allow-Origin	服务器端 Access-Control-Allow-Credentials
false(默认)	随意	随意
true	请求页面域名，不能是*	true

事件及触发条件

事件	触发条件
onreadystatechange	每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。
onloadstart	调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。
onprogress	xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。
onload	当请求成功完成时触发，此时xhr.readystate=4
onloadend	当请求结束（包括请求成功和请求失败）时触发
onabort	当调用xhr.abort()后触发
ontimeout	xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。
onerror	在请求过程中，若发生Network error则会触发此事件（若发生Network error时，上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。

事件触发顺序

正常触发流

xhr.onreadystatechange(之后每次变化都会触发一次)
xhr.onloadstart
xhr.upload.onloadstart
xhr.upload.onprogress
xhr.upload.onloadend
xhr.onprogress
xhr.onload
xhr.onloadend

发生abort/timeout/error异常的处理

一旦发生abort，timeout,error异常，先立即终止当前请求
readystate置为4触发xhr.onreadystatechange
若上传没有结束依次触发xhr.upload.onprogress,xhr.upload.[onabort|ontimeout|onerror],xhr.upload.onloadend
触发xhr.onporgress事件
触发xhr.[onabort|ontimeout|onerror]事件
触发xhr.onloadend事件

成功回调

更倾向xhr.onload

xhr.onload = function () {
    //如果请求成功
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      //do successCallback
    }
  }