分类：XMLHttpRequest

分类
XMLHttpRequest

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

如何设置请求的超时时间

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]]])

值解释
methodGET/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 Documenttext/html;charset=UTF-8
Docuemnt不是HTMLDocumentapplication/xml;charset=UTF-8
DOMStringtext/plain;charset=UTF-8
FormDatamultipart/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()未被调用则不会触发此事件。
onprogressxhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。
onload当请求成功完成时触发，此时xhr.readystate=4
onloadend当请求结束（包括请求成功和请求失败）时触发
onabort当调用xhr.abort()后触发
ontimeoutxhr.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事件。

事件触发顺序

正常触发流

  1. xhr.onreadystatechange(之后每次变化都会触发一次)
  2. xhr.onloadstart
  3. xhr.upload.onloadstart
  4. xhr.upload.onprogress
  5. xhr.upload.onloadend
  6. xhr.onprogress
  7. xhr.onload
  8. xhr.onloadend

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

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

成功回调

更倾向xhr.onload

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