Question

最近我开发了一个项目，我在一个aspx页面上发送了多个ajax请求。我还放了一个计时器，这个请求发生间隔5秒。一切似乎都很好，直到突然响应混乱。我知道我可以用一个请求做同样的事情，但我想知道为什么会这样。我环顾了互联网，但我还没找到任何解决方案。我现在实际上采用了这种编码风格，比如使用多个结果发出一个请求，但我想知道并且我真的想知道如何制作多个ajax请求，响应不会混淆。这是我的示例代码：

 $(document).ready(function () {
        var a = setInterval("request1()", 5000);
        var b = setInterval("request2()", 5000);
    });

function request1() {

        $.ajax({
            url: 'ajaxhandler.aspx?method=method1' ,
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=utf-8');
            },
            success: function (data) {
                  alert(data);
            }

        });
    }


function request2() {

        $.ajax({
            url: 'ajaxhandler.aspx?method=method2' ,
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=utf-8');
            },
            success: function (data) {
                  alert(data);
            }

        });
    }

Answer 1

如果您需要按顺序发生请求，则不应使用AJAX（第一个“a”用于“异步”）。

要解决此问题，您可以在回调中调用request2（）以获取第一个请求的“成功”。

function request1() {
    $.ajax({
        url: 'ajaxhandler.aspx?method=method1' ,
        beforeSend: function (xhr) {
            xhr.overrideMimeType('text/plain; charset=utf-8');
        },
        success: function (data) {
              request2();
        }

    });
}

Answer 2

这不是JavaScript的错误，因为你在同一时间调用单个页面而搞砸了。如果您的两个AJAX文件有两个服务器端页面，那就没关系了。尝试为不同的aspx创建两个不同的methods文件，以便将它们一起调用。

但这不是一个好习惯。为什么不将该方法作为参数发送，并在aspx文件中为不同的方法设置条件？然后，如果您同时使用两个（或更多）方法，则只需通过一次调用将两者都发送到服务器。您将为呼叫保存HTTP标头和呼叫延迟。

function requestAll() {

        $.ajax({
            url: 'ajaxhandler.aspx' ,
            data: ['method1', 'method2'],
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=utf-8');
            },
            success: function (data) {
                  alert(data);
            }

        });
    }

Answer 3

如前所述，您不能保证结果返回的顺序。但是如果有必要能够确定这一点，您可以想象为每个异步请求创建一个唯一标识符，然后将其排序相应的回复。

我看到这样的解决方案有用的一个例子是在击键时执行操作（例如onkeyup）。在执行此类操作时，您可能希望对时间戳，版本号或类似信息进行编码，以便您可以保证某种顺序。如果用户试图搜索“test”，则可能在“te”的响应之前返回“tes”的自动完成响应。如果您只是覆盖自动填充数据，那么这显然不是所需的行为，因为您可能会显示当前搜索令牌的错误结果。

对时间戳（或唯一ID，计数器，版本号，密钥等）进行编码将允许您检查此项以验证您是否拥有最新响应，或者如果需要，可以按时间戳对结果进行排序保证订单等。

Answer 4

下面的函数将接受JSON请求的URL数组，并在完成所有请求后使用一组结果调用回调。它可以很容易地适应非JSON使用。

这个想法是在传入的响应到达时将其存入数组，然后只有在所有结果都进入时才调用回调。这种方法是批量更新DOM并避免为每个节点设置计时器的好方法你想要更新。

function multi_getJSON(urls, callback)
{
    // number of ajax requests to wait for
    var count = urls.length;

    // results of individual requests get stuffed here
    var results = [];

    // handle empty urls case
    if(count === 0)
    {
        callback(results);
        return;
    }

    urls.forEach(function(url, index)
    {
        $.getJSON(url, function(data)
        {
            results[index] = data;
            count = count - 1;

            // are we finished?
            if(count === 0)
            {
                callback(results);
            }
        });
    });
}

同时Ajax多个请求

4 个答案: