XMLHttpRequest2.0特性

XMLHttpRequest 2.0新特性

首先了解部分XMLHttpRequest 1.0的缺陷：

1. 无法读取和上传二进制文件，只支持文本数据的传送
2. 传送和接收数据时，没有进度信息，只能提示有没有完成
3. 受到同域限制，只能向同一域名的服务器请求数据

设置HTTP请求的时间限制

新增timeout属性，该属性可以设置HTTP请求时限：

const xhr = new XMLHttpRequest()
// 设置xhr请求超时时间为 60 秒
xhr.timeout = 60000
xhr.ontimeout = e => console.log(`请求超时：${e}`)

使用FormData对象管理表单对象

const formData = new FormData()
formData.append('username', 'laoliu')
formData.append('password', 'laoba')
xhr.send(formData)

还可以将<form></form>作为参数传入FormData()

const formEle = document.querySelectorAll('form')[0]
const formData = new FormData(formEle)

上传文件

通过<input type='file'>选择文件，使用append()将文件数据放入formData中上传至服务器

const formData = new FormData()
// 单文件
formData.append('files',fils[0])
xhr.send(formData)

上传大文件、多文件基本原理如此。 大文件可使用FileReader.readAsArrayBuffer()进行读取、切片分段上传。

实现跨域请求

跨域请求，就是Ajax允许向不同域名的服务器发出HTTP请求

前提是：浏览器端允许跨域，服务器端同意跨域

如果满足这个前提，跨域请求和不跨域请求的代码写法一致

新增responseType和response属性

responseType

1. 用于指定服务器端返回数据的数据类型，可用值有text、arraybuffer、blob、json或document
2. 如果属性值指定为空字符串或者不使用responseType属性，则返回响应的数据。

response

如果向服务器端提交请求成功，则返回数据

1. responseType值为 text ，response返回值是 字符串
2. responseType值为 arraybuffer ，response返回值是 ArrayBuffer 对象
3. 如果 responseType 为 blob ，response 返回值为一个 Blob 对象。
4. 如果 responseType 为 json ，response 返回值为一个 JSON 对象。
5. 如果 responseType 为 document ，response 返回值为一个 Document 对象。

获取服务器端的二进制数据

const xhr = new XMLHttpRequest()
xhr.open('get', '/images/test.png', true)
xhr.responseType = 'blob'
xhr.send()
// ......
const blobData = new Blob([xhr.response],{type:'impage/png'})

数据传输进度

1. 下载的progress事件属于XMLHttpRequest对象。
2. 上传的progress事件属于XMLHttpRequest.upload对象

与 progress 事件相关的，还有其他 5 个事件，可以分别指定回调函数。

1. load：传输成功完成
2. abort：传输被用户取消
3. error：传输中出现错误
4. loadstart：传输开始
5. loadEnd：传输结束，无论成功还是失败