简单的分析下XMLHttpRequest对象

创建xhr对象

var xhr = new XMLHttpRequest()

关于xhr对象属性

• 追踪xhr发送ajax的状态
  1. xhr.readyState对象即是当前请求对象的时时状态
  2. xhr.readyState有四种状态
     • 0: open()方法还未被调用
     • 1: send()方法还未被调用
     • 2: send()方法已经被调用, 响应头和响应状态已经返回.
     • 3: 响应体下载中; responseText中已经获取了部分数据.
     • 4: 整个请求过程已经完毕.
  3. 通过上面可以发现,当xhr.open()没有执行，打印xhr.readyState即是0,当然xhr.send()没有执行,xhr.readyState即是1，如果执行了open()和send()那么readyState只可能会出现2_{4而不会出现0}1；

4. xhr.readyState的每次变化都会触发xhr.onreadystatechange事件

---

• 上传和下载的进度条的显示
  1. xhr的进度事件分为上传xhr.upload.onprogress和下载的xhr.onprogress
  2. 都会给事件监听函数传递一个实参event对象,event.loaded表示已经载入的数据,event.total表示总共数量,前提是event. lengthComputable优值得情况下才可以。

3. 栗子：

    //下载
     xhr.onprogress = progressHandle
    //上传
    xhr.upload.onprogress = progressHandle
    
    function progressHandle(e) {
        var e = e || event 
        if(e.lengthComputable) {
            return Math.round(e.loaded / e.total * 100)+'%'
        }
    }
   

---

• 指定响应的数据类型 xhr.responseType
  1. 含义： 就是设置响应数据类型,如果后台返回的是个字符串的json,那么前台设置xhr.responseType = 'json',那么自动转化成json对象，而不需要前台JSON.parse()去转化了

2. 可选值：
   • '' : 默认就是字符串
   • 'json': 把后台的字符串对象转成json格式,如果后台传的根本不是字符串json或者json,那么前台获取不到,得到的xhr.response为null；
   • 后面的以后再写吧,天快亮了

---

• 获取response的信息（response, responseText, reponseXML）
  1. 三种属性都必须等待xhr.status == 200和xhr.readyState == 4才能获取到值,不然是''或者null和responseType设的值有关
  2. xhr.response 会返回响应的数据
  3. xhr.responseText 只有当responseType = 'text'或者'',才会有值返回，否则是Null

---

关于xhr对象的方法

• 设置请求头-setRequestHeader(string headerType, string type)

 🌰栗子： xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
- headerType:请求头的键,常用的比如'Content-Type',这里其实是不区分大小写的,等同于'content-type';
- type:请求头的值,web客户端常用的几个分别是multipart/form-data来上传图片等文件适用于type=file,application/x-www-form-urlencoded来上传表单数据
- xhr.setRequestHeader()方法必须写在open()之后,send()方法之前，否则会报错
- 此方法可多次调用,如果键相同,也不会覆盖,则会累加；

---

• 获取响应头信息

1. xhr.getResponseHeader(string headerKey),获取单个请求头的信息,必须填写一个自定义的请求头的key(其实就是chrome控制台里面,后台返回给前台的那些response headers里面的那些你想得到某个字段)；
2. xhr.getAllResponseHeaders(), 获取所有的响应头的信息，就是chrome控制台response headers里面的那些键值对都会返回；
3. 上面两个方法并不是获取到所有的信息,部分安全信息是获取不到的,比如cookie之类的
4. 注意：要想获取到响应头的信息,两个方法都必须放在onreadystatechange方法中并且xhr.status === 200和xhr.readyState === 4才能成功获取到

---

• send(data)和可以发送的数据
  1. send(data)中的data可以是以下几种类型：

  ArrayBuffer
  Blob
  Document
  DOMString
  FormData
  null
  

  2. send(data)中的data类型会影响request中的Content-type请求类型,如下：
     • Document => text/html;charset=UTF-8
     • Strinf => text/plain;charset=UTF-8
     • FormData => multipart/form-data; boundary=[xxx]
  3. xhr.setRequestHeader会强制覆盖这些默认值

---

xhr对象的事件

• 事件列表(xhr和xhr.upload都有)

onloadstart
onprogress
onabort
ontimeout
onerror
onload
onloadend

 
- **触发条件**
1. onreadystatechange > 每当xhr.readyState改变时触发;xhr.readyState由非0值变为0时不触发。
2. onloadstart > 调用xhr.send()方法后立即触发,若xhr.send()未被调用则不会触发此事件。
3. onprogress > xhr.upload.onprogress在上传阶段(即xhr.send()之后,xhr.readystate=2之前)触发,每50ms触发一次;xhr.onprogress在下载阶段(即xhr.readystate=3时)触发,每50ms触发一次。
4.  onload > 当请求成功完成时触发,此时xhr.readystate=4
5. onerror > 在请求过程中,若发生Network error则会触发此事(若发生Network error时,上传还没有结束,则会先触发xhr.upload.onerror,再触发xhr.onerror;若发生Network error时,上传已经结束,则只会触发xhr.onerror. **注意**,只有发生了网络层级别的异常才会触发此事件,对于应用层级别的异常,如响应返回的xhr.statusCode是4xx
时,并不属于Network error,所以不会触发onerror
事件,而是会触发onload事件。