javascript - 如何正确编写http响应以便使用XHR进度事件监听器

Question

我想使用XHR对象的“progress”事件来获取下载进度。

以下是来自 MDN 的示例代码

var req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);

req.open();

...

// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
  alert("The transfer is complete.");
}

function transferFailed(evt) {
  alert("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  alert("The transfer has been canceled by the user.");
}

我已经编写了类似的代码，但进度事件的 lengthComputable 字段结果为 false。 loaded 字段是某个有限值，但 total 设置为零。

从上面代码示例中的注释中，我可以看到浏览器没有在 HTTP 响应中获取足够的信息来计算有意义的下载进度。

编写响应以使其正常工作的正确方法是什么？我在测试中看到的响应有 Transfer-encoding: chunked 和 Content-Length: 8。我从 Tornado Web 服务器生成它。

Answer 1

在 chunked transfer encoding ，响应的总长度不是由服务器指示的，因此客户端无法提前知道。

您可以尝试两件事。

• 禁用分块传输编码，转而使用 Content-Length 的正常方法。这就是进度事件规范 requires 。但我不知道 Tornado 是否/如何实现这一点。

• 或者，在自定义响应 header 中包含总长度，例如 X-Total-Length。然后，使用这样的代码来确定您的百分比:

  function updateProgress(evt) {
    var total = evt.lengthComputable ?
                evt.total : parseInt(req.getResponseHeader('X-Total-Length'));
    if (total) {
      var percentComplete = evt.loaded / total;
      // ...
    }
  }