在使用 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 事件处理函数中，我们将下载完成的资源数据传递给下载完成回调函数。
