多个ajax调用处理答案

【问题标题】：Multiple ajax call handling多个ajax调用处理
【发布时间】：2009-02-06 23:32:30
【问题描述】：

我正在使用 jQuery 进行一些 ajax 调用，想知道人们是如何处理这种情况的。

向服务器发出 ajax 请求以检索某些信息。
在请求返回之前发出另一个请求。第一个请求现在无效且已过期。

如何判断初始请求现在无效并且在返回时可以忽略。我只想显示第二个请求的结果并忽略（或取消）第一个。

【问题讨论】：

【解决方案1】：

jQuery 从对ajax() 的调用中返回XmlHttpRequest 对象，我用它来实现您想要的，如下所示：

var lastRequest;
function getSomeData() {
    if(lastRequest) {
        lastRequest.abort();
        lastRequest = null
    }
    lastRequest = $.ajax(...);
}

最终的结果是，如果发出后续请求，则早期请求的响应将被忽略。

【讨论】：

工作就像一种享受。在原型中使用transport.abort();

【解决方案2】：

记录一个标识请求的变量（例如：“request_id”）。在每次新请求时将变量加 1。仅当服务器返回的 request_id 等于您在客户端的变量时才处理请求。

【讨论】：

这是我考虑过的。
@Craig：所以它值得一票，对吧？因为您没有在原始问题上指定。
这正是我在这些情况下所做的。效果很好。

【解决方案3】：

我以前从未遇到过这种情况，但是您可以发送一个在发出请求时递增的密钥，然后将密钥与响应一起发回。当响应到达时，您可以检查密钥是否符合您的预期。

var incrementor = 1;
var lastSent = 0;

jQuery(document).ready(function() {

    jQuery('a.submitter').click(function(event) {
        event.preventDefault();
        lastSent = incrementor;
        incrementor++;
        jQuery.post(
            'some-url.php',
            {
                'request-id': lastSent,
                'other-data': 'some-data'
            },
            function( data, textStatus ) {
                if( data.requestId == lastSent ) {
                    // Do stuff
                }
            },
            'json'
        );
    });

});

【讨论】：

我喜欢这种方法，但是如果您无法控制服务定义怎么办？

【解决方案4】：

“如何判断初始请求现在无效”

你不要……！您在客户端层排队 Ajax 请求，并且在之前的请求返回之前不要让它们触发并且完成它们对 DOM 的操作......

您可以在我关于“如何创建 Ajax 库”的博客中获得有关如何执行此操作的一些详细信息； http://ra-ajax.org/how-to-create-an-ajax-library-part-7-the-ra-ajax-class.blog

【讨论】：

这会带来糟糕的用户体验。
@Cletus - 确定您的服务器是否是“愚蠢的数据桶”，但如果您的服务器上有业务逻辑（而不是客户端上的 JS），那么您的 Ajax 请求实际上可能会执行应该影响客户的东西。那么取消它显然不是一个选择......

【解决方案5】：

我不希望涉及服务调用，您可能无法始终控制服务定义。我想看看这样的东西

$(function() {
    $('.ajaxButton').click(function() {
        $.currentCallId = (new Date()).getTime();

        $.ajax({
            type: "get",
            url: 'http://www.google.com/',
            beforeSend: function(xhr) {
                this.callId = $.currentCallId;
            },
            success: function(data) {
                if (this.callId === $.currentCallId) {
                    // process it
                } else {
                    // throw it out
                }
            }
        });
    });
});

【讨论】：