取得 XMLHttpRequest 的進度更新

Web 瀏覽器為用戶端伺服器資料交換提供 XMLHttpRequest (XHR) 物件。雖然標準 XHR API 缺乏固有的進度追蹤功能，但有一些方法可以監控資料傳輸的進度。

上傳位元組數：

XHR 公開 xhr.upload。 onprogress 事件用於監控資料上傳的進度。由於瀏覽器會追蹤總資料大小和上傳的數量，因此可以提供準確的進度資訊。

下載位元組數：

追蹤下載進度更具挑戰性，因為在伺服器到達之前，瀏覽器不知道將從伺服器發送的資料的大小。一種解決方案是在伺服器腳本上設定 Content-Length 標頭，指示要傳送的資料的總大小。有了此標頭，瀏覽器就可以準確監控下載進度。

範例實作：

以下程式碼範例示範了使用jQuery UI 追蹤檔案上傳的進度顯示進度條：

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();
}

在伺服器端腳本上設定 Content-Length 標頭可確保準確追蹤上傳和下載資料的進度。

結論：

雖然標準 XHR API 缺乏內建的進度追蹤功能，但上述技術可讓開發人員監控 Web 應用程式中資料傳輸的進度。透過設定適當的內容長度標頭並利用 JavaScript 事件處理程序，開發人員可以創建直覺且用戶友好的介面，為用戶提供即時進度更新。