AJAX - 监控进度

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

数据传输进度 − 我们可以监控从服务器传输到客户端的数据的进度。或者，我们还可以跟踪与给定文件的总大小相比，传输或接收的数据量。
请求状态 − Wan 还可以监控我们所发出请求的整体状态（例如请求是仍在进行中、是已完成还是待处理）。它可以帮助程序员向当前请求的用户提供适当的反馈。
错误处理 − 除了跟踪当前状态外，在请求数据时处理是否发生任何错误（如服务器端错误、网络问题等）也很重要。因此，使用错误处理，我们可以轻松地向用户发送通知，以便他/她可以对发生的错误采取适当的措施。

如何监控进度

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

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

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


<script>
function displayStatus() {
   // 创建XMLHttpRequest对象
   var myObj = new XMLHttpRequest();

   // 创建回拨功能
   // onprogress返回传输数据的百分比 
   myObj.onprogress = function(myEvent) {
      if (myEvent.lengthComputable){
         var dataTarnsferPercentage = (myEvent.loaded/myEvent.total)*100;
         console.log("Current progress of the data transfer:", dataTarnsferPercentage);
      }
   };
   // 打开给定的文件
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // 将请求发送到服务器
   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() {
   // 创建XMLHttpRequest对象
   var myObj = new XMLHttpRequest();

   // 创建回拨功能
   // 在这里readystatechange返回结果的当前状态
   myObj.onreadystatechange = function() {
      if (this.readyState == XMLHttpRequest.DONE){
         console.log("Request is completed")
      }else{
         console.log("Request is in-progress")
      }
   };
   // 打开给定的文件
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // 将请求发送到服务器
   myObj.send();
}
</script>

结论

这就是我们监控请求进度的方式。这样我们就可以轻松跟踪正在传输的数据量、成功处理的数据量、错误等。现在在下一篇文章中，我们将看到 AJAX 支持的状态码。

打印本页