如何在 Web 浏览器中跟踪 XMLHttpRequest 的进度更新？

获取 XMLHttpRequest 的进度更新

Web 浏览器为客户端-服务器数据交换提供 XMLHttpRequest (XHR) 对象。虽然标准 XHR API 缺乏固有的进度跟踪功能，但有一些方法可以监控数据传输的进度。

上传的字节数：

XHR 公开 xhr.upload。 onprogress 事件用于监控数据上传的进度。由于浏览器会跟踪总数据大小和上传的数量，因此可以提供准确的进度信息。

下载的字节数：

跟踪下载进度更具挑战性，因为在服务器到达之前，浏览器不知道将从服务器发送的数据的大小。一种解决方案是在服务器脚本上设置 Content-Length 标头，指示要发送的数据的总大小。有了此标头，浏览器就可以准确监控下载进度。

示例实现：

以下代码示例演示了使用 jQuery UI 跟踪文件上传的进度显示进度条：

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: bytes received
    // evt.total: total bytes (from the Content-Length header)
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar('option', 'value', percentComplete);
  }
}

function sendreq(evt) {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.open('GET', 'test.php', true);
  req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
      // Handle the response here
    }
  };
  req.send();
}</code>

在服务器端脚本上设置 Content-Length 标头可确保准确跟踪上传和下载数据的进度。

结论：

虽然标准 XHR API 缺乏内置的进度跟踪功能，但上述技术允许开发人员监控 Web 应用程序中数据传输的进度。通过设置适当的内容长度标头并利用 JavaScript 事件处理程序，开发人员可以创建直观且用户友好的界面，为用户提供实时进度更新。

以上是如何在 Web 浏览器中跟踪 XMLHttpRequest 的进度更新？的详细内容。更多信息请关注PHP中文网其他相关文章！