如何跟踪XMLHttpRequest中数据传输的进度？

监控 XMLHttpRequest 的进度

XMLHttpRequest 允许 Web 应用程序异步发送和接收数据。是否可以跟踪 XMLHttpRequest 的进度，特别是上传和下载的字节数？

上传的字节数

获取上传的字节数相对简单。利用 xhr.upload.onprogress 事件。浏览器通过将上传的数据大小与总文件大小进行比较来计算进度。

下载的字节数

监视下载的字节数进度更具挑战性，因为浏览器通常不知道总响应大小。解决方法包括在服务器端脚本上设置 Content-Length 标头以指示总响应大小。这使浏览器能够计算下载进度。

示例

考虑一个读取和发送已知大小的 zip 文件的服务器脚本：

<?php $filesize = filesize('test.zip');
header("Content-Length: " . $filesize);
readfile('test.zip');
?>

下面的 JavaScript 代码可以使用 Content-Length 标头监视下载进度：

<code class="javascript">function updateProgress(evt) {
   if (evt.lengthComputable) {
      // evt.loaded: Bytes received by the browser
      // evt.total: Total bytes specified in the 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) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}</code>

此解决方案允许您监视下载进度，即使是轮询服务器更新的大文件也是如此不理想。

以上是如何跟踪XMLHttpRequest中数据传输的进度？的详细内容。更多信息请关注PHP中文网其他相关文章！