14

私はJavascript/jqueryの世界に完全に慣れていないので、助けが必要です。現在、グラフをプロットするためのデータを取得するために5つの異なるAjax呼び出しを行う必要がある1つの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秒で読み込まれます。 。

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

私の質問は、これらの呼び出しを並列に行うにはどうすればよいですか。これにより、このすべてのデータを並列に取得し始め、ページをより短時間でロードできるようになります。

前もって感謝します。

4

9 に答える 9

27

jQuery.when (遅延)の使用:

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

コールバック関数は、3 つの ajax 呼び出しがすべて完了したときにのみ呼び出されます。

于 2012-09-14T19:21:04.917 に答える
2

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

于 2012-09-14T18:15:13.863 に答える
1

このようにしてみましょう：

<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() 関数を 1 つ作成し、それを 3 回呼び出しました。結果は非同期で受信されるため、たとえば、最初に 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/非同期に関する情報を明確に見ることができます。デフォルトの非同期パラメーター値 = true があります。

デフォルトでは、すべてのリクエストは非同期で送信されます (つまり、これはデフォルトで true に設定されています)。同期リクエストが必要な場合は、このオプションを false に設定します。クロスドメイン リクエストと dataType: "jsonp" リクエストは、同期操作をサポートしていません。同期リクエストはブラウザを一時的にロックし、リクエストがアクティブな間はすべてのアクションを無効にする可能性があることに注意してください...

于 2012-09-14T18:34:51.120 に答える
1

以下は私にとってはうまくいきました-シリアル化されたオブジェクトを渡す必要がある複数の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
      }
于 2019-09-25T15:01:38.337 に答える
0

あなたの例のようにそれを処理することはできません。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
于 2012-09-14T18:19:57.320 に答える
0

さまざまな ajax 関数のすべての機能を 1 つの ajax 関数に結合するか、1 つの ajax 関数から他の関数​​を呼び出して (この場合はプライベート/コントローラー側になります)、結果を返すことができます。Ajax 呼び出しは多少停止するため、それらを最小限に抑えることが最善の方法です。

また、ajax 関数を非同期にすることもできます (通常の関数のように動作します)。その後、すべての関数がデータを返した後に、最後にグラフをレンダリングできます。

于 2012-09-14T18:35:28.977 に答える
0

問題の解決策は次のとおりです: http://jsfiddle.net/YZuD9/

于 2012-09-14T18:35:45.947 に答える
0

jQuery.ajax では、次のようにコールバック メソッドを提供する必要があります。

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

または直接使用できます

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

参照

于 2012-09-14T18:14:42.753 に答える
0

リクエストを非同期にディスパッチし、コールバック関数を定義してレスポンスを取得する必要があるようです。

あなたがしたように、変数が正常に割り当てられるまで (つまり、応答がちょうど到着するまで)、次の要求のディスパッチに進むまで待機します。このようなものを使用してください。

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

これでうまくいくはずです。

于 2012-09-14T18:23:18.970 に答える