如何知道 ajax 是否正在运行 - JavaScript

最常见的问题之一是如何在 JavaScript 中检查 Ajax 是否正在运行。在这篇文章中，我们将介绍一些方法来检查 Ajax 是否正在运行，并在它们完成时执行操作。

使用 XMLHttpRequest 对象

在 JavaScript 中最常用的 Ajax 可能是使用 XMLHttpRequest 对象。通过这个对象我们可以发出 http 请求并处理服务器端的响应。通过检查 readyState 属性，我们可以了解当前请求的状态。readyState 属性的值从 0 到 4 不等，表示下面的状态。

• 0：请求未初始化
• 1：服务器连接已建立
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成，且响应已就绪

在发送请求之前，readyState 的初始值为 0。如果 readyState 值为 1 或更高，则说明请求已经发出，但服务器还没有响应。

当 readyState 值为 4 时，响应已准备就绪。如果 readyState 值为 0、2 或 3，则说明请求正在进行中。

我们可以使用下面的代码来检查 Ajax 是否正在运行。

function checkAjaxStatus() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) {
      console.log("Ajax is running.");
    } else if (xhr.readyState == 4 && xhr.status == 200) {
      console.log("Ajax is done.");
    } else {
      console.log("Error: " + xhr.status);
    }
  };
  xhr.open("GET", "your/url/here", true);
  xhr.send();
}

使用 jQuery

如果您使用 jQuery 发送 Ajax 请求，则可以使用全局 Ajax 事件来检测是否正在运行。在发送请求时，jQuery 会触发一个名为 ajaxStart 的全局事件。类似地，在请求成功或失败时，jQuery 会分别触发 ajaxSuccess 和 ajaxError 事件。

可以使用下面的代码来检查 Ajax 是否正在运行。

$(document).ajaxStart(function() {
  console.log("Ajax is running.");
});
$(document).ajaxStop(function() {
  console.log("Ajax is done.");
});

结论

使用上述任一方法，您都可以轻松地检查 Ajax 是否正在运行。请记住，在 JavaScript 中使用 Ajax 时，总是要考虑到视图交互中的长时间等待。如果用户需要等待很长时间才能看到结果，那么可能需要为其提供一些反馈。