AJAX - 進度監控

AJAX 提供了一個名為進度監控的特殊功能。使用此功能，我們可以跟蹤 AJAX 從 Web 瀏覽器到 Web 伺服器的非同步請求的進度。或者可以說，使用進度監控器，我們還可以監控從伺服器到使用者的上傳或下載了多少資料。藉助進度監控，我們可以向用戶傳送反饋，其中包含以下幾點：

資料傳輸進度 - 我們可以監控從伺服器到客戶端傳輸的資料進度。或者我們還可以跟蹤與給定檔案總大小相比，傳輸或接收了多少資料。

請求狀態 - 我們還可以監控我們發出的請求的整體狀態（例如請求是否仍在進行中、已完成或掛起）。這有助於程式設計師向用戶提供當前請求的適當反饋。

錯誤處理 - 除了跟蹤當前狀態外，處理請求資料時發生的任何錯誤（例如伺服器端錯誤、網路問題等）也很重要。因此，使用錯誤處理，我們可以輕鬆地向用戶傳送通知，以便他/她可以對發生的錯誤採取適當的措施。

如何監控進度

要監控 AJAX 請求的進度，我們可以使用以下方法：

使用 onprogress 事件 - 要監控請求的進度，我們可以定義一個“onprogress”事件，該事件在資料傳輸處理期間定期觸發。它通常用於監控檔案下載或大型資料/檔案傳輸的進度。它監控諸如載入了多少資料、傳輸資料的總大小等資訊。

示例

在下面的程式中，我們將藉助 onprogress 事件來監控請求的當前狀態。在這裡，我們建立一個名為 displayStatus() 的 Javascript 函式，該函式顯示正在傳輸多少資料的狀態。此函式發出 AJAX 請求以將資料傳送到給定的 URL。因此，它使用 XMLHttpRequest 物件建立一個請求，然後定義一個回撥函式來處理伺服器提供的響應。在回撥函式內。onprogress 事件檢查傳輸資料的當前進度。在 onprogress 事件處理程式中，我們可以檢查進度資料是否可計算以避免除零錯誤。如果它是可計算的，那麼我們可以計算傳輸到伺服器的資料百分比。

<script>
function displayStatus() {
   // Creating XMLHttpRequest object
   var myObj = new XMLHttpRequest();

   // Creating call back function
   // Here onprogress return the percentage of transferred data 
   myObj.onprogress = function(myEvent) {
      if (myEvent.lengthComputable){
         var dataTarnsferPercentage = (myEvent.loaded/myEvent.total)*100;
         console.log("Current progress of the data transfer:", dataTarnsferPercentage);
      }
   };
   // Open the given file
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // Sending the request to the server
   myObj.send();
}
</script>

使用 onreadystatechange 事件 - 我們可以透過建立 onreadystatechange 事件來監控請求的進度。每當 XMLHttpRequest 的 readyState 屬性發生變化時，此事件就會觸發。readyState 屬性返回請求的當前狀態。

示例

在下面的程式中，我們將藉助 onreadystatechange 事件來監控請求的當前狀態。在這裡，我們建立一個名為 displayStatus() 的 Javascript 函式，該函式顯示請求當前狀態的狀態。此函式發出 AJAX 請求以從給定的 URL 檢索資料。因此，它使用 XMLHttpRequest 物件建立一個請求，然後定義一個回撥函式來處理伺服器提供的響應。在回撥函式內。onreadystatechange 事件使用 readyState 屬性檢查請求的當前狀態。如果 readyState 為 XMLHttpRequest.DONE，則表示請求已完成並列印“請求已完成”。否則列印“請求正在進行中”。

<script>
function displayStatus() {
   // Creating XMLHttpRequest object
   var myObj = new XMLHttpRequest();

   // Creating call back function
   // Here onreadystatechange return the current state of the resuest
   myObj.onreadystatechange = function() {
      if (this.readyState == XMLHttpRequest.DONE){
         console.log("Request is completed")
      }else{
         console.log("Request is in-progress")
      }
   };
   // Open the given file
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // Sending the request to the server
   myObj.send();
}
</script>

結論

這就是我們如何監控請求的進度。這樣我們就可以輕鬆跟蹤正在傳輸多少資料、成功處理了多少資料、錯誤等等。在下一篇文章中，我們將瞭解 AJAX 支援的狀態碼。

列印頁面