AJAX - 监控进度

AJAX 提供了一个名为"监视进度"的特殊功能。 使用此功能，我们可以跟踪 AJAX 从 Web 浏览器到 Web 服务器发出的异步请求的进度。 或者我们可以说，使用进度监视器，我们还可以监视从服务器上传或下载到用户的数据量。 借助监控进度，我们可以向用户发送反馈，其中包含以下几点−

数据传输进度 − 我们可以监控从服务器到客户端传输数据的进度。 或者我们还可以跟踪与给定文件的总大小相比传输或接收的数据量。

请求状态 − Wan 还可以监控我们发出的请求的整体状态（例如请求是否仍在进行中、已完成或待处理）。 它帮助程序员向当前请求的用户提供适当的反馈。

错误处理 − 除了跟踪当前状态之外，处理请求数据时是否发生任何错误也很重要，例如服务器端错误、网络问题等。因此，使用错误处理，我们可以轻松地向用户发送通知，以便他/她可以对发生的错误采取适当的操作。

如何监控进度

为了监控 AJAX 请求的进度，我们可以使用以下方法−

使用 onprogress 事件 − 为了监视请求的进度，我们可以定义一个"onprogress"事件，该事件在处理数据传输时定期触发。 它通常用于监视文件下载或大数据/文件传输的进度。 它监视信息的进度，例如加载了多少数据、传输数据的总大小等。

示例

在下面的程序中，我们将借助 onprogress 事件来监控请求的当前状态。 这里我们创建一个名为 displayStatus() 的 Javascript 函数，它显示正在传输的数据量的状态。 此函数发出 AJAX 请求以将数据发送到给定的 URL。 因此它使用 XMLHttpRequest 对象创建请求，然后定义回调函数来处理服务器提供的响应。 回调函数内部。 onprogress 事件检查传输数据的当前进度。 在 onprogress 事件处理程序中，我们可以检查进度数据是否可计算，以避免除零错误。 如果它是可计算的，那么我们就可以计算传输到服务器的数据的百分比。

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

   // 创建回调函数
   // 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 事件 − 我们可以通过创建 onreadystatechnage 事件来监控请求的进度。 只要 XMLHttpRequest 的 readyState 属性发生更改，就会触发此事件。 ReadyState 属性返回请求的当前状态。

示例

在下面的程序中，我们将借助 onreadystatechange 事件来监控请求的当前状态。 这里我们创建一个名为 displayStatus() 的 Javascript 函数，它显示请求的当前状态。 此函数发出 AJAX 请求以从给定 URL 检索数据。 因此它使用 XMLHttpRequest 对象创建请求，然后定义回调函数来处理服务器提供的响应。 回调函数内部。 onreadystatechange 事件借助readyState 属性检查请求的当前状态。 如果readyState为XMLHttpRequest.DONE，则表示请求完成，并打印"Request is Completed"。 否则打印"Request is in-progress"。

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

   // 创建回调函数
   // 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 支持的状态码。