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 支持的状态码。

打印页面