XMLHttpRequest 的 readystatechange 事件和 load 事件的区别

分别在 onreadystatechange 和 onload 里写入代码：

xhr.onload = function () {
    console.log(`load:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`);
}
xhr.onreadystatechange = function () {
    console.log(`readystatechange:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`);
}
xhr.open(...);
xhr.send(...);

输出结果如下：

readystatechange : xhr.readyState == 1 ,xhr.status=200
readystatechange : xhr.readyState == 2 ,xhr.status=200
readystatechange : xhr.readyState == 3 ,xhr.status=200
readystatechange : xhr.readyState == 4 ,xhr.status=200
load : xhr.readyState == 4 ,xhr.status=200

可以看到，readystatechange 事件先于 load 事件执行。load 事件就相当于 readyState 的值为 4 后触发的事件。如果不需要跟踪请求返回之前的过程时，用 load 事件更省事儿。

然而...

load 事件并不总是被触发。比如当网络错误时，目标地址访问不了时，会触发 error 事件，load 事件就不会被触发。404 之类的错误只是服务器返回的状态代码，并不是请求过程错误，所以 load 事件会触发，而 error 事件反而不会触发。

如果需要无论哪种情况都被触发的话，请用 loadend 事件。

OK！既然有 loadend 事件，当然还会有 loadstart 事件！

这些事件的触发顺序是：

readystatechange > loadstart > readystatechange > readystatechange > progress > readystatechange > load / error > loadend 

readystatechange 每次触发时 readyState 值不同。