AJAX リクエストを反復的にシーケンスする方法

AJAX リクエストのシーケンス

さまざまなシナリオで、開発者は、要素ごとに AJAX リクエストを開始して、コレクションを反復処理する必要が生じることがあります。目的は、同時リクエストや潜在的な問題によってサーバーが過負荷になるのを回避し、次の要素に進む前に各リクエストを完了できるようにすることです。さらに、同期 AJAX 呼び出しの使用を回避することで、ブラウザの応答性を確保できます。

コレクションを反復処理するためのデザイン パターン

一般的な解決策には、コールバックが成功するたびに進むイテレータ コンテキストを作成することが含まれますが、多くの人は、より合理化されたアプローチを求めています。以下に効果的な設計パターンをいくつか示します。

jQuery 1.5

ソリューションの jQuery 1.5 バージョンは、$.Deferred、$.queue()、および $.ajax() メソッドを利用します。また、リクエストの完了時に解決される Promise も提供します。

<code class="javascript">$.ajaxQueue = function(ajaxOpts) {
  var jqXHR, dfd = $.Deferred(), promise = dfd.promise();

  ajaxQueue.queue(doRequest);

  promise.abort = function(statusText) {
    if (jqXHR) {
      return jqXHR.abort(statusText);
    }
    var queue = ajaxQueue.queue(), index = $.inArray(doRequest, queue);
    if (index > -1) {
      queue.splice(index, 1);
    }
    dfd.rejectWith(ajaxOpts.context || ajaxOpts,
      [promise, statusText, ""]);
    return promise;
  };

  function doRequest(next) {
    jqXHR = $.ajax(ajaxOpts)
      .done(dfd.resolve)
      .fail(dfd.reject)
      .then(next, next);
  }

  return promise;
};</code>

jQuery 1.4

jQuery の以前のバージョン (特に 1.4) では、空のオブジェクトでアニメーション キューを利用することで、 AJAX リクエスト用のカスタム「キュー」を作成します。

<code class="javascript">(function($) {
  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {
    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {
      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);
        next();
      };

      $.ajax(ajaxOpts);
    });
  };
})(jQuery);</code>

使用例

次の HTML 構造を考えてみましょう。

<code class="html"><ul id="items">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="output"></ul></code>

$.ajaxQueue() プラグインの使用#it​​ems 内のアイテムの HTML を #output にコピーできます:

<code class="javascript">$("#items li").each(function(idx) {
  $.ajaxQueue({
    url: '/echo/html/',
    data: {html : "["+idx+"] "+$(this).html()},
    type: 'POST',
    success: function(data) {
      $("#output").append($("<li>", { html: data }));
    }
  });
});</code>

このアプローチにより、コピー リクエストが確実に順番に処理され、過度のサーバー負荷によって生じる潜在的な問題が防止されます。

以上がAJAX リクエストを反復的にシーケンスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。