Javascript/jQuery中的并行Ajax调用

使用jQuery.when（延迟）：

$.when( $.ajax("/req1"), $.ajax("/req2"), $.ajax("/req3") ).then(function(resp1, resp2, resp3){ 
    // plot graph using data from resp1, resp2 & resp3 
});

回调函数仅在完成所有3个ajax调用时调用。

使用async: false无法做到这一点——正如您所知，代码是同步执行的（即，直到上一个操作完成后，操作才会开始）
您将希望设置async: true（或者忽略它——默认情况下为true）。然后为每个AJAX调用定义一个回调函数。在每个回调中，将接收到的数据添加到一个数组中。然后，检查是否已加载所有数据（arrayOfJsonObjects.length == 5）。如果有，调用一个函数对数据执行任何您想要的操作。

让我们试着用这种方式来做：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var area0Obj = {responseText:''};
        var area1Obj = {responseText:''};
        var area2Obj = {responseText:''};
        var url0 = 'http://someurl/url0/';
        var url1 = 'http://someurl/url1/';
        var url2 = 'http://someurl/url2/';
        var getData = function(someURL, place) {
            $.ajax({
                type     : 'POST',
                dataType : 'json',
                url      : someURL,
                success  : function(data) {
                    place.responseText = data;
                    console.log(place);
                }
            });
        }
        getData(url0, area0Obj);
        getData(url1, area1Obj);
        getData(url2, area2Obj);
    }); 
</script>

如果服务器端将是smth。像这样：

public function url0() {
    $answer = array(
        array('smth' => 1, 'ope' => 'one'),
        array('smth' => 8, 'ope' => 'two'),
        array('smth' => 5, 'ope' => 'three')
    );
    die(json_encode($answer));
}
public function url1() {
    $answer = array('one','two','three');
    die(json_encode($answer));
}
public function url2() {
    $answer = 'one ,two, three';
    die(json_encode($answer));
}

所以，正如您所看到的，创建了一个从服务器获取数据的函数getData（），并调用了3次。结果将以异步方式接收，例如，第一个可以获得第三个调用的答案，最后一个可以获得第一个调用的结果。

控制台的答案是：

[{"smth":1,"ope":"one"},{"smth":8,"ope":"two"},{"smth":5,"ope":"three"}]
["one","two","three"]
"one ,two, three"

PS。请阅读以下内容：http://api.jquery.com/jQuery.ajax/在那里你可以清楚地看到关于async的信息。默认异步参数值为true。

默认情况下，所有请求都是异步发送的（即，默认情况下设置为true）。如果需要同步请求，请将此选项设置为false。跨域请求和数据类型："jsonp"请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。。。

以下对我有效-我有多个ajax调用，需要传递一个串行化的对象：

    var args1 = {
        "table": "users",
        "order": " ORDER BY id DESC ",
        "local_domain":""
    }
    var args2 = {
        "table": "parts",
        "order": " ORDER BY date DESC ",
        "local_domain":""
    }
    $.when(
        $.ajax({
                url: args1.local_domain + '/my/restful',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                type: "POST",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify(args1),
                error: function(err1) {
                    alert('(Call 1)An error just happened...' + JSON.stringify(err1));
                }
            }),
        $.ajax({
            url: args2.local_domain + '/my/restful',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            type: "POST",
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify(args2),
            error: function(err2) {
                calert('(Call 2)An error just happened...' + JSON.stringify(err2));
            }
        })                     
    ).then(function( data1, data2 ) {
        data1 = cleanDataString(data1);
        data2 = cleanDataString(data2);
        data1.forEach(function(e){
            console.log("ids" + e.id)
        });
        data2.forEach(function(e){
            console.log("dates" + e.date)
        });
    })
    function cleanDataString(data){
            data = decodeURIComponent(data);
            // next if statement was only used because I got additional object on the back of my JSON object
            // parsed it out while serialised and then added back closing 2 brackets
            if(data !== undefined && data.toString().includes('}],success,')){ 
                temp = data.toString().split('}],success,');
                data = temp[0] + '}]';
            }
            data = JSON.parse(data);
            return data;                    // return parsed object
      }

在jQuery.ajax中，您应该提供如下回调方法：

j.ajax({
        url : url0,
        async : true,
        dataType : 'json',
        success:function(data){
             console.log(data);
        }
    }

或者你可以直接使用

jQuery.getJSON(url0, function(data){
  console.log(data);
});

参考

您将无法像您的示例那样处理它。设置为async会使用另一个线程在上发出请求，并让您的应用程序继续运行。

在这种情况下，您应该使用一个新函数来绘制区域，然后使用ajax请求的回调函数将数据传递给该函数。

例如：

$(document).ready(function() {
    function plotArea(data, status, jqXHR) {
      // access the graph object and apply the data.
      var area_data = $.parseJSON(data);
    }
    $.ajax({
        url : url0,
        async : false,
        dataType : 'json',
        success: poltArea
    });
    $.ajax({
        url : url1,
        async : false,
        dataType : 'json',
        success: poltArea
    });
    $.ajax({
        url : url4,
        async : false,
        dataType : 'json',
        success: poltArea
    });
    // some code for generating graphs
}); // closing the document ready function 

看起来您需要异步调度请求，并定义一个回调函数来获取响应。

按照您的方式，它将等待变量被成功分配（意思是：响应刚刚到达），直到它继续调度下一个请求。就用这样的东西。

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: function(data) {
     area0Obj = data;
  }
});

这应该奏效。

以下是您的问题的解决方案：http://jsfiddle.net/YZuD9/

您可以将不同ajax函数的所有功能组合到一个ajax函数中，或者从一个ajax功能中调用其他函数（在这种情况下，它们将是私有/控制器端），然后返回结果。Ajax调用确实有点停滞，所以要尽量减少它们。

您还可以使ajax函数异步（这样会像正常函数一样工作），然后在所有函数返回数据后，您可以在最后渲染图形。