XMLHttpRequest对象是基于XML的HTTP请求,是一个浏览器接口,用于与服务器交互，我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据，并且虽然名字叫XMLHttpRequest，但实际上可以用于获取任何类型的数据。
XMLHttpRequest对象使用方式- 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
- 建立http连接
xhr.open('GET', '/login');
- 发送请求
xhr.send()
- 获取返回数据
//就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert( xhr.statusText );
}
};
readystate
| 值 | 状态 | 描述 |
|---|---|---|
| 0 | UNSENT | XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法 |
| 1 | OPENED | open() 方法已经被调用 |
| 2 | HEADERS_RECEIVED | send() 方法已经被调用，响应头也已经被接收 |
| 3 | LOADING | 响应体部分正在被接收 |
| 4 | DONE | 请求操作已经完成。这意味着数据传输已经彻底完成或失败 |
- 终止请求
XMLHttpRequest.abort() //当一个请求被终止，它的 readyState 将被置为0,并且请求的 status 置为 0。fetch 概述
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 的请求和响应，它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
特点- 基于标准 Promise 实现，支持 async / await
- 脱离了 XHR，是 ES 规范中新的实现方式。
- 语法简洁，更加语义化
-
fetch 不支持 abort （xhr 有个 xhr.abort 方法能够直接阻断请求）
-
fetch 没有办法原生监测请求的进度，而 XHR 能够。
-
fetch 兼容性并不太好，IE 不支持
- fetch 只对网络请求报错，对400,500都看成成功的请求，服务器返回400， 500 错误码时并不会 reject，只有网络错误这些致使请求不能完成时， fetch 才会被 reject。须要封装去处理。
- fetch 默认不会带 cookie，须要添加配置项： fetch(url, {credentials: ‘include’})
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
Document
