XMLHttpRequest 异步请求
最后更新于：2022-04-02 03:25:54
[TOC]
## 简单例子
```
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.open('GET', '/endpoint', true);
xhr.send(null);
```
## 属性
### readyState
* 0，实例已经生成，`open()`方法没被调用
* 1，`open()`方法已经调用，`send()`方法没有调用，仍可使用实例的`setRequestHeader()`方法，设定 HTTP 请求的头信息。
* 2，`send()`方法已经调用，并且服务器返回的头信息和状态码已经收到。
* 3，接收服务器的数据体(body)。这时，如果实例的`responseType`属性等于`text`或者空字符串，`responseText`属性就会包含已经收到的部分信息。
* 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。
### onreadystatechange 添加 `readyState` 的变化
### response 服务器返回的数据体
可以是任何数据类型,字符串、对象、二进制对象
### responseType 返回的数据类型
* ""（空字符串）：等同于`text`，表示服务器返回文本数据。
* "arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。
* "blob"：Blob 对象，表示服务器返回二进制对象。
* "document"：Document 对象，表示服务器返回一个文档对象。
* "json"：JSON 对象。
* "text"：字符串。
如果设置返回值为 `json` 则`xhr.response` 返回json对象
不能通过 `responseText` 取得对象
```
var xhr = new XMLHttpRequest();
xhr.open('get', 'test.php', true);
xhr.responseType='json';
//设置发回值类型
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.response.name);
} else {
console.error(xhr.status);
}
}
}
xhr.onerror = function () {
console.log(xhr.statusText);
}
xhr.send(null)
```
### responseText 从服务器接收到的字符串
如果没有指定返回类型,默认使用此方法
### responseXML 返回执行后的DOM 文件
1. `Content-Type`是`text/html`和`application/xml`,只需设置 `responseType`属性为`document`
2. 如果 HTTP 回应的`Content-Type`头信息不等于`text/xml`和`application/xml`,还需设置`overrideMimeType('xml')`
```
xhr.responseType = 'document';
//若Content-type 不是 text/xml 或者 application/xml
xhr.overrideMimeType('text/xml');
```
### responseURL 请求的地址
### status / statusText 返回状态吗和描述
### timeout / ontimeout 是指超时时间 超时触发的函数
```
var xhr = new XMLHttpRequest();
xhr.open('GET', '/server);
xhr.ontimeout = function () {
console.error('The request for ' + url + ' timed out.');
};
xhr.timeout = 10 * 1000;
// 指定 10 秒钟超时
xhr.send(null);
```
### withCredentials 跨域请求时,是否包含用户信息(如Cookie 和认证的 HTTP 头信息)
默认为`false`
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
```
### upload 异步文件上传
`
`
```
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function (e) {};
var progressBar = document.querySelector('progress');
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
progressBar.value = (e.loaded / e.total) * 100;
// 兼容不支持