Comment séquencer les requêtes AJAX de manière itérative

Séquençage des requêtes AJAX

Dans divers scénarios, les développeurs peuvent rencontrer le besoin de parcourir une collection, en lançant une requête AJAX pour chaque élément. L'objectif est de permettre à chaque requête de se terminer avant de passer à l'élément suivant, en évitant de surcharger le serveur avec des requêtes simultanées et des problèmes potentiels. De plus, éviter l'utilisation d'appels AJAX synchrones garantit que le navigateur reste réactif.

Modèle de conception pour l'itération à travers les collections

Bien qu'une solution courante implique la création d'un contexte d'itérateur qui avance à chaque rappel réussi, beaucoup recherchent une approche plus rationalisée. Voici quelques modèles de conception efficaces :

jQuery 1.5

La version jQuery 1.5 de la solution utilise les méthodes $.Deferred, $.queue() et $.ajax(). Il fournit également une promesse qui se résout une fois la demande terminée.

<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

Pour les versions antérieures de jQuery (1.4 en particulier), exploiter la file d'attente d'animation sur un objet vide fournit un moyen de créez une « file d'attente » personnalisée pour les requêtes 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>

Exemple d'utilisation

Considérez la structure HTML suivante :

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

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

Utilisation du plugin $.ajaxQueue() , vous pouvez copier le HTML des éléments dans #items vers #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>

Cette approche garantit que les demandes de copie sont traitées de manière séquentielle, évitant ainsi tout problème potentiel résultant d'une charge excessive du serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!