我如何知道 jQuery 是否有待处理的 Ajax 请求？答案

【问题标题】：How do I know if jQuery has an Ajax request pending?我如何知道 jQuery 是否有待处理的 Ajax 请求？
【发布时间】：2010-12-21 19:54:24
【问题描述】：

我在使用我们制作的 jQuery 控件时遇到了一些问题。假设您有一个下拉列表，允许您输入要查找的项目的 ID，当您按 ENTER 或在文本框中失去焦点时，它会通过 jQuery 验证您输入的 ID 是否正确，如果没有则显示警报不。

问题是当普通用户在其中输入了一个无效的值并通过按下提交按钮失去焦点时，jQuery post在表单的提交发送后返回。

有什么方法可以检查 jQuery 是否有任何异步请求处理，以便我不允许表单提交？

【问题讨论】：

标签： jquery ajax xmlhttprequest

【解决方案1】：

$.ajax() 函数返回一个 XMLHttpRequest 对象。将其存储在可从提交按钮的“OnClick”事件访问的变量中。当处理提交点击时，检查 XMLHttpRequest 变量是否为：

1) null，表示尚未发送请求

2) readyState 值为 4 (Loaded)。这意味着请求已经成功发送并返回。

在任何一种情况下，返回 true 并允许提交继续。否则返回 false 以阻止提交并给用户一些指示，说明为什么他们的提交不起作用。 :)

【讨论】：

检查 null 以确定请求对象是否存在是很重要的，但如果它不为 null，您应该真正检查 request.readyState > 0 && request.readyState < 4 以确定“活动”请求，因为 readyState 0 表示虽然对象有已创建，尚未发起网络请求。

【解决方案2】：

您可以使用ajaxStart 和ajaxStop 来跟踪请求何时处于活动状态。

【讨论】：

这对我来说效果更好，因为我的控件使用 HtmlHelper 多次呈现。谢谢！
这对我有用！我正在使用 ajaxSend 和 ajaxSuccess，但有时我发送了几个 ajax 请求，我只想在开始和结束时运行一段代码。 ajaxStart 和 ajaxStop 正是我想要的！谢谢
2019 年链接已过时
这解决了我的问题，谢谢你

【解决方案3】：

$.active 返回活动 Ajax 请求的数量。

更多信息here

【讨论】：

这实际上回答了这个问题。谢谢。
一个衬里和简短的解决方案非常好

【解决方案4】：

 $(function () {
        function checkPendingRequest() {
            if ($.active > 0) {
                window.setTimeout(checkPendingRequest, 1000);
                //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active);
            }
            else {

                alert("No hay peticiones pendientes");

            }
        };

        window.setTimeout(checkPendingRequest, 1000);
 });

【讨论】：

似乎是一个不错的解决方案，但是，您是否检测到“最大调用堆栈大小”有任何问题？

【解决方案5】：

如果请求处于活动状态，我们必须使用 $.ajax.abort() 方法来中止请求。这个 promise 对象使用 readyState 属性来检查请求是否处于活动状态。

HTML

<h3>Cancel Ajax Request on Demand</h3>
<div id="test"></div>
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" />

JS 代码

//Initial Message
var ajaxRequestVariable;
$("#test").html("Please wait while request is being processed..");

//Event handler for Cancel Button
$("#btnCancel").on("click", function(){
if (ajaxRequestVariable !== undefined)

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4)
{
  ajaxRequestVariable.abort();
  $("#test").html("Ajax Request Cancelled.");
}
});

//Ajax Process Starts
ajaxRequestVariable = $.ajax({
            method: "POST",
            url: '/echo/json/',
            contentType: "application/json",
            cache: false,
            dataType: "json",
            data: {
        json: JSON.encode({
         data:
             [
                            {"prop1":"prop1Value"},
                    {"prop1":"prop2Value"}
                  ]         
        }),
        delay: 11
    },

            success: function (response) {
            $("#test").show();
            $("#test").html("Request is completed");           
            },
            error: function (error) {

            },
            complete: function () {

            }
        });

【讨论】：