关于 XMLHttpRequest 对象需要注意的地方

Ajax和XMLHttpRequest不是同一个东西

Ajax不等同于XMLHttpRequest，细究起来它们两个是属于不同维度的2个概念。
ajax是一种技术方案。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.

What is AJAX? www.tutorialspoint.com/ajax/what_is_ajax.htm

用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

XMLHttpRequest标准分为Level 1和Level 2

XMLHttpRequest Level 1主要存在以下缺点：

受同源策略的限制，不能发送跨域请求；

不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；

在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

那么Level 2对Level 1 进行了改进，XMLHttpRequest Level 2中新增了以下功能：

可以发送跨域请求，在服务端允许的情况下；

支持发送和接收二进制数据；

新增formData对象，支持发送表单数据；

发送和获取数据时，可以获取进度信息；

可以设置请求的超时时间；

level 2的功能可以看这篇文章 XMLHttpRequest Level 2 使用指南，文章中对新增的功能都有具体代码示例。

XMLHttpRequest兼容性

IE8/IE9、Opera Mini 完全不支持xhr对象

IE10/IE11部分支持，不支持 xhr.responseType为json

部分浏览器不支持设置请求超时，即无法使用xhr.timeout

部分浏览器不支持xhr.responseType为blob

IE10 支持xhr了，但是不支持 withCredentials 属性，也就是跨域的时候，没法带cookie过去(即服务端没法读取到cookie)，因此如果在IE10，有用到xhr跨域请求的话，并且服务端需要校验cookie信息的，那么只能将cookie读出来，然后作为参数带过去。

获取response header

xhr提供了2个用来获取响应头部的方法：getAllResponseHeaders和getResponseHeader。前者是获取 response 中的所有header 字段，后者只是获取某个指定 header 字段的值。另外，getResponseHeader(header)的header参数不区分大小写。
xhr在获取响应头部的时候，不是所有的头部都可以获取的：

Set-Cookie 、 Set-Cookie2 这2个字段，无论是同域还是跨域请求, 都没法获取，这个是因为 W3C的 xhr 标准中做了限制
对于跨域请求，客户端允许获取的response header字段只限于“ simple response header ”和“ Access-Control-Expose-Headers ” ，这个是因为 W3C 的 cors 标准对于跨域请求也做了限制

simple response header 只有这6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定，这个头部是服务端在返回跨域响应的时候，所返回的一个可选的头部。
比如以php来说，如果在跨域的时候，设置这个响应头部的时候：

1	$response->header('Access-Control-Expose-Headers', 'x-redirect');

设置请求的超时时间

XMLHttpRequest提供了timeout属性来允许设置请求的超时时间。

1	xhr.timeout

单位：milliseconds 毫秒
默认值：0，即不设置超时。
这边有涉及到到一个记时的开始时间和结束时间：
开始时间：调用xhr.send()方法的时候
结束时间：xhr.loadend事件触发的时候
不过有两个点需要注意：

可以在 send()之后再设置此xhr.timeout，但计时起始点仍为调用xhr.send()方法的时刻。

当xhr为一个sync同步请求时，xhr.timeout必须置为0，否则会抛错。

如果超时，那么对应就是 ontimeout 事件会被触发。

如何发一个同步请求

xhr默认发的是异步请求，但也支持发同步请求（当然实际开发中应该尽量避免使用）。到底是异步还是同步请求，由xhr.open（）传入的async参数决定。
也就是当async为false的时候，其实就是发送同步请求，当xhr为同步请求时，有如下限制：

xhr.timeout必须为0

xhr.withCredentials必须为 false

xhr.responseType必须为””（注意置为”text”也不允许）

若上面任何一个限制不满足，都会抛错，而对于异步请求，则没有这些参数设置上的限制。
而且应该尽量避免使用sync同步请求，为什么呢？
因为我们无法设置请求超时时间（xhr.timeout为0，即不限时）。在不限制超时的情况下，有可能同步请求一直处于pending状态，服务端迟迟不返回响应，这样整个页面就会一直阻塞，无法响应用户的其他交互。
另外，标准中并没有提及同步请求时事件触发的限制，如在 chrome中，当xhr为同步请求时，在xhr.readyState由2变成3时，并不会触发 onreadystatechange事件，xhr.upload.onprogress和 xhr.onprogress事件也不会触发。

如何获取上传、下载的进度

可以通过onprogress事件来实时显示进度，默认情况下这个事件每50ms触发一次。需要注意的是，上传过程和下载过程触发的是不同对象的onprogress事件：

上传触发的是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.withCredentials与 CORS 的关系

我们都知道，在发同域请求时，浏览器会将cookie自动加在request header中。但大家是否遇到过这样的场景：在发送跨域请求时，cookie并没有自动加在request header中。
造成这个问题的原因是：在CORS标准中做了规定，默认情况下，浏览器在发送跨域请求时，不能发送任何认证信息（credentials）如”cookies”和”HTTP authentication schemes”。除非xhr.withCredentials为true（xhr对象有一个属性叫withCredentials，默认值为false）。
所以根本原因是cookies也是一种认证信息，在跨域请求中，client端必须手动设置xhr.withCredentials=true，且server端也必须允许request能携带认证信息（即response header中包含Access-Control-Allow-Credentials:true），这样浏览器才会自动将cookie加在request header中。

另外，要特别注意一点，一旦跨域request能够携带认证信息，server端一定不能将Access-Control-Allow-Origin设置为*，而必须设置为请求页面的域名。

以php为例，如果要设置cors的话，中间件的标准代码如下：

public function handle(Request $request, Closure $next)
{
    $response = $next($request);
    $origin = $request->header('Origin');
    $origin = rtrim($origin, '/');
    $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : $origin;
    // 判断是否是合法域名，这个方法自己实现，反正这个origin一定要在允许跨域的白名单之内
    if(!Http::checkIsVerifyDomain($origin)){
        $origin = 'http://yourdomain.com';
    }
    $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
    // 如果有客户端有自定义头部的话，那么这个也要加上去
    // $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
    $response->header('Access-Control-Allow-Headers', 'origin, content-type');
    $response->header('Access-Control-Allow-Origin', $origin);
    $response->header('Access-Control-Allow-Credentials', 'true');
    return $response;
}

xhr相关事件

XMLHttpRequestEventTarget接口定义了7个事件：