Page 246 - Web性能权威指南

➌ 以 1 MB 为步长迭代数据块
➍ 告诉服务器上传的数据范围（开始位置 - 结束位置 / 总大小）
➎ 通过 XHR 上传 1 MB 大小的数据片段

XHR 不支持请求流，这意味着在调用 send() 时必须提供完整的文件。不过，前面
的例子示范了一个简单的解决方案：切分文件，然后通过多个 XHR 请求分段上传。
这种实现方案当然不能替代真正的请求流 API，但对某些应用来说却是一个可行的
方案。

切分大文件上传是个不错的技巧，适合连接不稳定或经常中断的场景。此
时，假如某个块由于掉线而上传失败，应用可以随后只重新上传该块，而
不必重新上传整个大文件。

15.5 监控下载和上传进度

网络连接可能会间歇性中断，而延迟和带宽也高度不稳定。因此，我们怎么知道
XHR 请求成功了，超时了，还是失败了？ XHR 对象提供了一个方便的 API，用于
监控进度事件（表 15-1），这些事件代表请求的当前状态。

表15-1：XHR的进度相关事件

事件类型 说明 触发次数
loadstart 传输已开始 一次
progress 正在传输 零或多次
error 传输出错 零或多次
abort 传输终止 零或多次
load 传输成功 零或多次
loadend 传输完成 一次

每个 XHR 请求开始时都会触发 loadstart 事件，而结束时都会触发 loadend 事件。
在这两事件之间，还可能触发一或多个其他事件，表示传输状态。因此，要监控进
度，可以在 XHR 对象上注册一系列 JavaScript 事件监听器：

var xhr = new XMLHttpRequest();
xhr.open('GET','/resource');
xhr.timeout = 5000; ➊

xhr.addEventListener('load', function() { ... }); ➋
xhr.addEventListener('error', function() { ... }); ➌
var onProgressHandler = function(event) {

XMLHttpRequest ｜ 233