jquery - Ajaxを次々とロード

Question

ページにいくつかの ajax 呼び出しがあり、それよりもはるかに多いため、サーバーへの負担を軽減するという任務を負っています。

これは、コードの現在の設定です。

$.getJSON('charts_ajax.php',{a : 'visits', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'},function(data){
    //stuff
};

$.getJSON('charts_ajax.php',{a : 'terms', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'},function(data){
    //stuff
};
$.getJSON('charts_ajax.php',{a : 'usage', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'},function(data){
    //stuff
};
$.getJSON('charts_ajax.php',{a : 'content', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'},function(data){
    //stuff
};

そして、これは他の 15 回の呼び出しでも続きます。

サーバーを監視すると、アクティビティが非常に高くなります。

これを次々とロードし、サーバーの負担を軽減するにはどうすればよいでしょうか?

Answer 1

jQuerys deferred.thenを使用します。

$.getJSON('charts_ajax.php',{a : 'visits', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'}).then(function(data1) {
    //stuff
    $.getJSON('charts_ajax.php',{a : 'terms', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'}).then(function(data2){
         //stuff
         //etc.
    };
});

または、Deferred を返すいくつかの論理関数にコードを分割することもできます。

function someName() {
    return $.getJSON('charts_ajax.php',{a : 'visits', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'}).then(function(data1) {
        //stuff
    });
}

function someOtherName() {
    return $.getJSON('charts_ajax.php',{a : 'terms', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'}).then(function(data2){
         //stuff
    });
}

someName().then(someOtherName).then(etc).then(function() {
    console.log("done");
);

}

Answer 2

$.getJSON は省略形の Ajax 関数であり、次と同等です。

$.ajax(
{
  dataType: "json",
  url: url,
  data: data,
  success: success
});

ドキュメント（http://api.jquery.com/jQuery.ajax/）によると：

async (デフォルト: true) タイプ: ブール値 デフォルトでは、すべてのリクエストは非同期で送信されます (つまり、デフォルトで true に設定されています)。同期リクエストが必要な場合は、このオプションを false に設定します。クロスドメイン リクエストと dataType: "jsonp" リクエストは、同期操作をサポートしていません。同期リクエストはブラウザを一時的にロックし、リクエストがアクティブな間はすべてのアクションを無効にする場合があることに注意してください。jQuery 1.8 以降、jqXHR ($.Deferred) で async: false を使用することは推奨されなくなりました。jqXHR.done() や非推奨の jqXHR.success() などの jqXHR オブジェクトの対応するメソッドの代わりに、成功/エラー/完了のコールバック オプションを使用する必要があります。

したがって、次のように書き換えることができます。

$.ajax(
{
  dataType: "json",
  async: false,
  url: 'charts_ajax.php',
  data: {a : 'visits', rangeStartDate : '<?=$_POST["rangeStartDate"] ?>', rangeEndDate : '<?= $_POST["rangeEndDate"] ?>'},
  success: function(data)
  {
        //stuff
  };
});

Answer 3

単一の呼び出し/応答として書き直して解析すると、推測になります