Ajax 简明教程
AJAX - Monitoring Progress
AJAX 提供了一个名为监视进度（Monitoring Progress）的特殊特性。通过此功能，我们可以追踪 AJAX 从 Web 浏览器到 Web 服务器做出的异步请求的进度。或者，我们可以说，使用进度监视器，还可以监视上传或从服务器下载的数据量。借助监视进度，我们可以向用户发送包含以下要点反馈：
Data Transfer Progress - 我们可以监视从服务器传输到客户端的数据的进度。或者，我们还可以追踪传输或接收了多少数据，以与给定文件的大小进行比较。
Request Status - Wan 还可以监视我们做出的请求的一般状态（例如，请求是否仍在进行中、已完成或待处理）。它可以帮助程序员向用户提供当前请求的适当反馈。
Error Handling - 除了追踪当前状态之外，在请求数据时处理任何错误也很重要，例如服务器端错误、网络问题等。因此，通过错误处理，我们可以轻松地向用户发送通知，以便他/她可以对发生的错误采取适当的操作。
How to Monitor Progress
若要监视 AJAX 请求的进度，我们可以使用以下方法：
Using onprogress event - 若要监视请求的进度，我们可以定义一个 “onprogress” 事件，该事件会在数据传输处理期间定期触发。它通常用于监视文件下载或大型数据/文件传输的进度。它监视的信息进度，例如加载了多少数据、传输数据的总大小等。
Example
在以下程序中，我们将借助 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>Using onreadystatechange event − 我们可以通过生成一个 onreadystatechnage 事件来监控请求的进展情况。当 XMLHttpRequest 的 readyState 属性发生改变时，该事件就会触发。readyState 属性返回请求的当前状态。
Example
在下面的程序中，我们将借助 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>