監控 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中文網其他相關文章！
