javascript - 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 (延期):

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

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