如何使用jquery链接ajax调用

Question

我需要在不锁定浏览器的情况下创建一系列N个Ajax请求，并且希望使用jQuery延迟对象来完成此操作。

这是一个带有三个请求的简单示例，但我的程序可能需要排队超过100个（请注意，这不是确切的用例，实际代码确实需要确保步骤（N-1）

$(document).ready(function(){ 

    var deferred = $.Deferred(); 

    var countries = ["US", "CA", "MX"]; 

    $.each(countries, function(index, country){ 

     deferred.pipe(getData(country)); 

    }); 

}); 

function getData(country){ 

    var data = { 
     "country": country 
    }; 


    console.log("Making request for [" + country + "]"); 

    return $.ajax({ 
     type: "POST", 
     url: "ajax.jsp", 
     data: data, 
     dataType: "JSON", 
     success: function(){ 
      console.log("Successful request for [" + country + "]"); 
     } 
    }); 

} 

下面是被写入到控制台（所有请求并行制成，如预期的响应时间是成正比的每个国家的数据的大小：

执行下一步）之前

Making request for [US] 
Making request for [CA] 
Making request for [MX] 
Successful request for [MX] 
Successful request for [CA] 
Successful request for [US] 

我怎样才能得到延期对象把这些排队给我？我试着改变管道，但得到相同的结果。

下面是所期望的结果：

Making request for [US] 
Successful request for [US] 
Making request for [CA] 
Successful request for [CA] 
Making request for [MX] 
Successful request for [MX] 

编辑：

我感谢您的建议使用一个数组来存储请求参数，但jquery的推迟对象具有排队请求的能力和我真的很想学习如何充分利用这个功能。

这实际上是我想要做的事：

when(request[0]).pipe(request[1]).pipe(request[2])... pipe(request[N]); 

不过，我想在指定时间的请求进入管道一步，以便有效地利用各遍历：

deferred.pipe(request[0]); 
deferred.pipe(request[1]); 
deferred.pipe(request[2]); 

Answer 1

使用自定义对象

function DeferredAjax(opts) { 
    this.options=opts; 
    this.deferred=$.Deferred(); 
    this.country=opts.country; 
} 
DeferredAjax.prototype.invoke=function() { 
    var self=this, data={country:self.country}; 
    console.log("Making request for [" + self.country + "]"); 

    return $.ajax({ 
     type: "GET", 
     url: "wait.php", 
     data: data, 
     dataType: "JSON", 
     success: function(){ 
      console.log("Successful request for [" + self.country + "]"); 
      self.deferred.resolve(); 
     } 
    }); 
}; 
DeferredAjax.prototype.promise=function() { 
    return this.deferred.promise(); 
}; 


var countries = ["US", "CA", "MX"], startingpoint = $.Deferred(); 
startingpoint.resolve(); 

$.each(countries, function(ix, country) { 
    var da = new DeferredAjax({ 
     country: country 
    }); 
    $.when(startingpoint).then(function() { 
     da.invoke(); 
    }); 
    startingpoint= da; 
}); 

小提琴http://jsfiddle.net/7kuX9/1/

是有点更清晰，最后几行可以写成

c1=new DeferredAjax({country:"US"}); 
c2=new DeferredAjax({country:"CA"}); 
c3=new DeferredAjax({country:"MX"}); 

$.when(c1).then(function() {c2.invoke();}); 
$.when(c2).then(function() {c3.invoke();}); 

随着管

function fireRequest(country) { 
     return $.ajax({ 
      type: "GET", 
      url: "wait.php", 
      data: {country:country}, 
      dataType: "JSON", 
      success: function(){ 
       console.log("Successful request for [" + country + "]"); 
      } 
     }); 
} 

var countries=["US","CA","MX"], startingpoint=$.Deferred(); 
startingpoint.resolve(); 

$.each(countries,function(ix,country) { 
    startingpoint=startingpoint.pipe(function() { 
     console.log("Making request for [" + country + "]"); 
     return fireRequest(country); 
    }); 
}); 

http://jsfiddle.net/k8aUj/1/

编辑：提琴输出日志在结果窗口中http://jsfiddle.net/k8aUj/3/

每个管道调用返回一个新的承诺，这反过来用于下水管。请注意，我只提供了sccess函数，应该为失败提供类似的函数。

在每个解决方案中，Ajax调用延迟到需要通过在功能包装他们，并为每个项目创建列表中的一个新的承诺建链。

我相信，自定义对象提供了一个更简单的方法来操纵链，但管道可以更好地满足您的口味。

注意：自jQuery 1.8起，deferred.pipe()已弃用，deferred.then取而代之。

Answer 2

我不完全确定你为什么要这样做，但保留你需要请求的所有URL的列表，并且在调用success函数之前不要求下一个URL。 I.E.，success将有条件地拨打deferred。

Answer 3

更新： deferred.pipe已被弃用

这是是jQuery的API中已经记载的东西很多代码。看到http://api.jquery.com/deferred.pipe/

你可以只保留管道，直到所有100制成。

或者说，我写的东西，使n次的调用，并解决已取得的所有呼叫的数据的单一功能。注意：它返回的数据不是超级XHR对象。 https://gist.github.com/1219564

Answer 4

我知道我迟到了这一点，但我相信你的原代码，主要是罚款，但有两个（也许三）问题。

你getData(country)被立即调用，因为你是如何编码你管的参数。你的方式，getData()立即执行，结果（ajax的承诺，但http请求立即开始）作为参数传递到pipe()。因此，不要传递回调函数，而是传递一个对象 - 这会导致管道的新延迟被立即解决。

我认为它需要

deferred.pipe(function() { return getData(country); }); 

现在是一个回调函数，当递延管道的父母已经决定，将被调用。用这种方法编码会引发第二个问题。在解析主体延迟之前，getData（）都不会执行。

潜在的第三个问题可能是，因为所有的管道都会连接到延迟的主站，所以你并没有一个链，我想知道它是否可以同时执行它们。文档说，回调是按顺序执行的，但由于回调函数返回一个promise并运行异步，所以它们可能仍然有些并行执行。

所以，我认为你需要像这样

var countries = ["US", "CA", "MX"]; 
var deferred = $.Deferred(); 
var promise = deferred.promise(); 

$.each(countries, function(index, country) { 
    promise = promise.pipe(function() { return getData(country); }); 
}); 

deferred.resolve(); 

Answer 5

注：在jQuery 1.8，你可以用.then，而不是.pipe。 .then函数现在返回一个新的承诺，.pipe已被弃用，因为它不再需要。有关承诺的更多信息，请参阅promises spec;有关承诺的更清晰的库，请参阅q.js，而不要使用jQuery依赖关系。

countries.reduce(function(l, r){ 
    return l.then(function(){return getData(r)}); 
}, $.Deferred().resolve()); 

如果您喜欢使用q。JS：

//create a closure for each call 
function getCountry(c){return function(){return getData(c)};} 
//fire the closures one by one 
//note: in Q, when(p1,f1) is the static version of p1.then(f1) 
countries.map(getCountry).reduce(Q.when, Q()); 

原来的答复：

另一个管;不是一件轻松的事情，但一点点更紧凑：

countries.reduce(function(l, r){ 
    return l.pipe(function(){return getData(r)}); 
}, $.Deferred().resolve()); 

Reduce documentation可能是开始了解上面的代码是如何工作的最佳场所。基本上，它有两个参数，一个回调和一个初始值。

该回调迭代应用于数组的所有元素，其中第一个参数是前一次迭代的结果，第二个参数是当前元素。这里的技巧是getData()返回jquery deferred promise，并且管道确保在当前元素上调用getData之前，前一个元素的getData完成。

第二个参数$.Deferred().resolve()是解析延迟值的习惯用法。它被提供给回调执行的第一次迭代，并确保第一个元素上的getData被立即调用。

Answer 6

我已经成功使用jQuery队列。

$(function(){ 
    $.each(countries, function(i,country){ 
     $('body').queue(function() { 
     getData(country); 
     }); 
    }); 
}); 

var getData = function(country){ 
    $.ajax({ 
    url : 'ajax.jsp', 
    data : { country : country }, 
    type : 'post', 
    success : function() {       
     // Que up next ajax call 
     $('body').dequeue(); 
    }, 
    error : function(){ 
     $('body').clearQueue(); 
    } 
    }); 
};