So sequenzieren Sie AJAX-Anfragen iterativ

Sequenzierung von AJAX-Anfragen

In verschiedenen Szenarien müssen Entwickler möglicherweise eine Sammlung durchlaufen und für jedes Element eine AJAX-Anfrage initiieren. Das Ziel besteht darin, den Abschluss jeder Anfrage zu ermöglichen, bevor mit dem nächsten Element fortgefahren wird, und so zu vermeiden, dass der Server mit gleichzeitigen Anfragen und potenziellen Problemen überlastet wird. Darüber hinaus stellt die Vermeidung der Verwendung synchroner AJAX-Aufrufe sicher, dass der Browser reaktionsfähig bleibt.

Entwurfsmuster zum Durchlaufen von Sammlungen

Während eine gängige Lösung darin besteht, einen Iteratorkontext zu erstellen, der bei jedem erfolgreichen Rückruf voranschreitet, Viele streben einen schlankeren Ansatz an. Hier sind einige effektive Entwurfsmuster:

jQuery 1.5

Die jQuery 1.5-Version der Lösung nutzt die Methoden $.Deferred, $.queue() und $.ajax(). Es bietet auch ein Versprechen, das nach Abschluss der Anfrage aufgelöst wird.

<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

Für frühere Versionen von jQuery (insbesondere 1.4) bietet die Nutzung der Animationswarteschlange für ein leeres Objekt eine Möglichkeit dazu Erstellen Sie eine benutzerdefinierte „Warteschlange“ für AJAX-Anfragen.

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

Beispielverwendung

Beachten Sie die folgende HTML-Struktur:

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

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

Verwendung des $.ajaxQueue()-Plugins , können Sie den HTML-Code der Elemente in #items nach #output kopieren:

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

Dieser Ansatz stellt sicher, dass die Kopieranforderungen nacheinander verarbeitet werden, wodurch potenzielle Probleme durch übermäßige Serverlast vermieden werden.

Das obige ist der detaillierte Inhalt vonSo sequenzieren Sie AJAX-Anfragen iterativ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!