Ajax同时请求多个请求答案

【问题标题】：Ajax multiple requests at the same timeAjax同时请求多个请求
【发布时间】：2011-11-28 16:00:22
【问题描述】：

最近我开发了一个项目，我在单个 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);
            }

        });
    }

【问题讨论】：

搞混了？在异步环境中，您无法保证哪个调用会先返回。

标签： javascript asp.net-ajax

【解决方案1】：

下面的函数将接受 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);
            }
        });
    });
}

【讨论】：

【解决方案2】：

如前所述，您无法保证结果返回的顺序。但如果有必要确定这一点，您可以想象为每个发出的异步请求创建一个唯一标识符，然后整理相应的传入响应。

我认为这种解决方案很有用的一个例子是在对击键执行操作时（例如 onkeyup）。执行此类操作时，您可能希望对时间戳、版本号或类似内容进行编码，以便保证某种顺序。如果用户尝试搜索“test”，则“tes”的自动完成响应可能会在“te”的响应之前返回。如果您只是覆盖自动完成数据，那么这显然不是您想要的行为，因为您可能会为当前的搜索标记显示不正确的结果。

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

【讨论】：

【解决方案3】：

这不是 JavaScript 的错误，而是因为您同时调用了一个页面而搞砸了。如果您的两个 AJAX 文件有两个服务器端页面，那就没问题了。尝试为不同的methods 创建两个不同的aspx 文件，让它们一起调用。

但这不是一个好习惯。为什么不将方法作为参数发送并在您的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);
            }

        });
    }

【讨论】：

【解决方案4】：

如果您需要按顺序执行请求，则不应使用 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();
        }

    });
}

【讨论】：