Javascript/jQueryのパラレルAjaxコール

Question

私はJavascript/jqueryの世界を完全に新しくしています。今、私はグラフをプロットするためにデータを取得するために5つの異なるAjax呼び出しを作成する必要があるhtmlページを作成しています。今、私はこのように、これらの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秒でロードされます。

私は非同期型を真にしようとしましたが、その場合、私の目的を破るグラフをプロットするためにデータをすぐに取得しません。

質問： これらの呼び出しを並行して行うことができます。このデータをすべて並列に取得し始め、ページの読み込み時間を短縮できますか？

ありがとうございます。 jQuery.ajaxで

Answer 1

jQuery.when（Deferredの作り方）使用：すべての3つのAJAX呼び出しが完了したときだけ呼び出される

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

コールバック関数を

Answer 2

あなたは以下のようにコールバックメソッドを提供しなければならない：

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

か、直接あなたがasync: falseを使用していることを行うことはできません

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

reference

Answer 3

を使用することができます - すでに知っているように、コードは同期的に実行されます（つまり、前の操作が終了するまで操作は開始されません）。
async: trueを設定する（または省略する - デフォルトではtrue）。次に、AJAX呼び出しごとにコールバック関数を定義します。各コールバックの内部で、受信したデータを配列に追加します。次に、すべてのデータがロードされたかどうかを確認します（arrayOfJsonObjects.length == 5）。存在する場合は、データで必要な処理を行う関数を呼び出します。

Answer 4

例のように処理することはできません。非同期に設定すると、別のスレッドを使用してリクエストがオンになり、アプリケーションを続行できます。

この場合、エリアをプロットする新しい関数を使用し、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 

Answer 5

に見えます。

あなたのやり方では、次のリクエストをディスパッチするまで、変数が正常に割り当てられるまで待つ（応答がちょうど到着したことを意味する）。このようなものを使ってください。

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

これはトリックを行う必要があります。

Answer 6

のは、この方法でそれをやってみましょう：

<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> 

場合は、サーバー側がなめらかになります。このように：だから

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)); 
} 

、あなたが見ることができるように、サーバーから、それが3回呼び出さよりデータを取得するために一つの関数の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についての情報を見ることができます。デフォルトのasync param value = trueがあります。

デフォルトでは、すべてのリクエストは非同期で送信されます（デフォルトではtrueに設定されています）。同期要求が必要な場合は、このオプションをfalseに設定します。クロスドメインリクエストとデータタイプ： "jsonp"リクエストは同期操作をサポートしていません。同期リクエストは一時的にブラウザをロックし、要求がアクティブな間にアクションを無効にすることができます。

Answer 7

異なるajax関数のすべての機能を1つのajax関数または1つのajax関数に組み合わせて、これらの関数は（この場合はprivate/controller側になります）、結果を返します。 Ajaxの呼び出しはちょっとストールするので、それらを最小化することが最善の方法です。

ajax関数を非同期（通常の関数のように動作する）にすることもできます。次に、すべての関数がデータを返すと、最後にグラフをレンダリングできます。 http://jsfiddle.net/YZuD9/

Answer 8

はここにあなたの問題へのソリューションです。