javascript基础从小白到高手系列六百六十一：进度事件

Progress Events 是W3C 的工作草案，定义了客户端服务器端通信。这些事件最初只针对XHR，现
在也推广到了其他类似的API。有以下6 个进度相关的事件。
 loadstart：在接收到响应的第一个字节时触发。
 progress：在接收响应期间反复触发。
 error：在请求出错时触发。
 abort：在调用abort()终止连接时触发。
 load：在成功接收完响应时触发。
 loadend：在通信完成时，且在error、abort 或load 之后触发。
每次请求都会首先触发loadstart 事件，之后是一个或多个progress 事件，接着是error、abort
或load 中的一个，最后以loadend 事件结束。
这些事件大部分都很好理解，但其中有两个需要说明一下。
load 事件
Firefox 最初在实现XHR 的时候，曾致力于简化交互模式。最终，增加了一个load 事件用于替代
readystatechange 事件。load 事件在响应接收完成后立即触发，这样就不用检查readyState 属性
了。onload 事件处理程序会收到一个event 对象，其target 属性设置为XHR 实例，在这个实例上
可以访问所有XHR 对象属性和方法。不过，并不是所有浏览器都实现了这个事件的event 对象。考虑
到跨浏览器兼容，还是需要像下面这样使用XHR 对象变量：
let xhr = new XMLHttpRequest();
xhr.onload = function() {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open(“get”, “altevents.php”, true);
xhr.send(null);
只要是从服务器收到响应，无论状态码是什么，都会触发load 事件。这意味着还需要检查status
属性才能确定数据是否有效。Firefox、Opera、Chrome 和Safari 都支持load 事件。
progress 事件
Mozilla 在XHR 对象上另一个创新是progress 事件，在浏览器接收数据期间，这个事件会反复触
发。每次触发时，onprogress 事件处理程序都会收到event 对象，其target 属性是XHR 对象，且
包含3 个额外属性：lengthComputable、position 和totalSize。其中，lengthComputable 是
一个布尔值，表示进度信息是否可用；position 是接收到的字节数；totalSize 是响应的Content-
Length 头部定义的总字节数。有了这些信息，就可以给用户提供进度条了。以下代码演示了如何向用
户展示进度：
let xhr = new XMLHttpRequest();
xhr.onload = function(event) {
if ((xhr.status >= 200 && xhr.status < 300) ||
xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.onprogress = function(event) {
let divStatus = document.getElementById(“status”);
if (event.lengthComputable) {
divStatus.innerHTML = “Received " + event.position + " of " +
event.totalSize +
" bytes”;
}
};
xhr.open(“get”, “altevents.php”, true);
xhr.send(null);
为了保证正确执行，必须在调用open()之前添加onprogress 事件处理程序。在前面的例子中，
每次触发progress 事件都会更新HTML 元素中的信息。假设响应有Content-Length 头部，就可以
利用这些信息计算出已经收到响应的百分比。