在使用 XMLHttpRequest 下载在线资源的时候，如何实

在使用 XMLHttpRequest 下载在线资源时，你可以利用 XMLHttpRequest 对象的 onprogress 事件来实时获得下载进度。 onprogress 事件在请求进行中，每次服务器返回数据时就会被触发一次。

在 onprogress 事件处理函数中，你可以通过 event.loaded 和 event.total 属性来获取已经下载的字节数和文件总字节数，从而计算下载进度的百分比。在计算出百分比之后，你可以将其实时更新到页面中的 UI 元素上，例如进度条等。

以下是一个示例代码：

function downloadFile(url, onprogress, onload) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "arraybuffer";
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        onload(xhr.response);
      }
    }
  };
  xhr.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      onprogress(percentComplete);
    }
  };
  xhr.send(null);
}

在上面的代码中，我们定义了一个 downloadFile 函数来下载在线资源。这个函数接受三个参数：资源的 URL、下载进度回调函数和下载完成回调函数。在函数中，我们使用 XMLHttpRequest 对象来获取资源的字节数据。在 onprogress 事件处理函数中，我们计算出已下载的字节数和文件总字节数，然后计算出下载进度的百分比，并将其传递给下载进度回调函数。在 onload 事件处理函数中，我们将下载完成的资源数据传递给下载完成回调函数。