Javascript/jQuery中的并行Ajax调用

Question

我是Javascript/jquery世界的新手,需要一些帮助.现在,我正在编写一个html页面,我必须进行5次不同的Ajax调用才能获取数据以绘制图表.现在,我正在调用这样的5个ajax调用:

$(document).ready(function() {
    area0Obj = $.parseJSON($.ajax({
        url : url0,
        async : false,
        dataType : 'json'
    }).responseText);

    area1Obj = $.parseJSON($.ajax({
        url : url1,
        async : false,
        dataType : 'json'
    }).responseText);
.
.
.
    area4Obj = $.parseJSON($.ajax({
        url : url4,
        async : false,
        dataType : 'json'
    }).responseText);

    // some code for generating graphs

)} // closing the document ready function 

我的问题是,在上面的场景中,所有的ajax调用都是串行的.也就是说,1次调用完成后2次启动,2次完成3次启动等等.每次Ajax调用大约需要5到6秒才能获取数据,这使得整个页面在大约30秒内被加载.

我尝试将异步类型设为true,但在这种情况下,我没有立即获取数据来绘制图表,这违背了我的目的.

我的问题是:如何将这些调用并行,以便我开始并行获取所有这些数据,并且可以在更短的时间内加载我的页面？

提前致谢.

Answer 1

使用jQuery.when(deferreds):

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

只有在完成所有3个ajax调用时才会调用回调函数.