如何在jQuery中制作批量的ajax请求？

Question

我想知道如何在n组中进行ajax调用.

这是我的用例:

我有一个显示使用数据的表.您可以深入到每一行,如果每行都有一个公共属性,您可以深入钻取,您可以选择一次钻入所有行.对于每一行,进行ajax调用以获取要附加到表的数据.

在某些情况下,最多可以同时钻50行.可以想象,这给服务器带来了很大的压力.我最好能以较小的批次发送这些电话,这些电话会在等待批量生效之前发送掉吗？

我知道有像jquery消息队列这样的插件可能会帮助我,但这是一个工作项目,所以我们想尽可能地避免插件.

Answer 1

您可以查看使用jQuery.when,它允许您在所有请求完成后执行回调函数.

$.when($.ajax("request1"), $.ajax("request2"), $.ajax("request3"))
 .done(function(data1,  data2, data3){
         // Do something with the data
 });

要么

$.when($.ajax("request1"), $.ajax("request2"), $.ajax("request3"))
.then(successCallback, errorHandler);

有关更多信息,请参阅以下帖子.

此外,我不确定您对使用插件的担忧应该受到您在工作环境中的影响,特别是如果它简化了您的工作.因此可以提高工作效率.当然,您必须仔细选择插件,因为质量和长期维护可能是个问题.

Answer 2

使用jQuery的Ajax调用通常是异步的.因此,如果您有50行,jQuery将异步发送所有50个请求 - 当您从服务器获得响应时,您无法控制处理序列.

您可以async: false在$.ajax调用时使用,以便在循环遍历行时只向服务器发送一个请求:

$.ajax({
    url: location,
    data: params,
    async: false,
    success: function(msg) { // do something}
});

此方法(async: false)的问题是用户可能会遇到"冻结"或无响应的页面.

另一种方法是在JavaScript中使用递归,以便调用仍然是异步的,但是ajax调用仍然等待每行的成功事件,如下所示:

var maxRows = 50;

function myFunc(index) {
   $.ajax({
       url: location,
       data: params,
       async: true,
       success: function(msg) { 
            if (index < maxRows) {
               // do something
            }
            else {
               return; //index equals maxRows--stop the recursion
            }
            index++;
            myFunc(index); //call the function again
       }
   });

   $(document).ready(function() {
       myFunc(0);      
   });
}