JavaScript 进度事件
Progress Events 定义了客户端与服务器端通信的进度监控机制。这些事件最初针对 XMLHttpRequest (XHR),现已推广到其他类似 API。主要包含以下 6 个进度相关事件:
- loadstart:在接收到响应的第一个字节时触发。
- progress:在接收响应期间反复触发。
- error:在请求出错时触发。
- abort:在调用 abort() 终止连接时触发。
- load:在成功接收完响应时触发。
- loadend:在通信完成时,且在 error、abort 或 load 之后触发。
每次请求都会首先触发 loadstart 事件,之后是一个或多个 progress 事件,接着是 error、abort 或 load 中的一个,最后以 loadend 事件结束。
load 事件
Firefox 最初在实现 XHR 时致力于简化交互模式,增加了一个 load 事件用于替代 readyState 检查。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 头部定义的总字节数。有了这些信息,就可以给用户提供进度条了。以下代码演示了如何向用户展示进度:

