JavaScript 进度事件详解：从 loadstart 到 loadend

什么是进度事件？

Progress Events 是 W3C 草案中定义的一组机制，主要用于描述客户端与服务器端的通信过程。虽然最早是为 XMLHttpRequest (XHR) 设计的，但现在已推广到其他类似 API。

在实际开发中，你通常会遇到以下六个关键事件，它们构成了完整的请求生命周期：

• loadstart：接收到响应第一个字节时触发。
• progress：接收响应期间反复触发，用于更新进度。
• error：请求出错时触发。
• abort：调用 abort() 终止连接时触发。
• load：成功接收完响应时触发。
• loadend：通信结束时触发，无论成功还是失败（在 error、abort 或 load 之后）。

流程上，每次请求都会先触发 loadstart，随后是一个或多个 progress 事件，接着是 error、abort 或 load 中的一个，最后以 loadend 收尾。

load 事件详解

Firefox 最初实现 XHR 时曾尝试简化交互模式，最终用 load 事件替代了繁琐的 readystatechange 检查。当响应接收完成，onload 处理程序立即被调用，无需再轮询 readyState 属性。

需要注意的是，虽然 event.target 通常指向 XHR 实例，但并非所有浏览器都完美支持这个对象结构。为了跨浏览器兼容，建议始终引用原始的 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 事件都会被触发。这意味着我们仍需手动检查 属性来确认数据是否有效。目前 Firefox、Opera、Chrome 和 Safari 均支持此事件。