Comment séquencer les requêtes Ajax pour un contrôle optimal ?

Séquençage des requêtes Ajax

Lorsque vous parcourez une collection et effectuez des appels Ajax individuels pour chaque élément, il est essentiel de contrôler la séquence pour empêcher la surcharge du serveur et le gel du navigateur. Bien que des itérateurs personnalisés puissent être utilisés, il existe des solutions plus élégantes.

jQuery 1.5

Dans jQuery 1.5 et supérieur, le plugin $.ajaxQueue() exploite $.Deferred, $.queue() et $.ajax() pour gérer le séquençage des requêtes et fournir une promesse qui se résout une fois la requête terminée.

Mise en œuvre :

<br>(function($) {</p>
<p>var ajaxQueue = $({});</p>
<p>$.ajaxQueue = function( ajaxOpts ) {</p> <pre class="brush:php;toolbar:false">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;

};

})(jQuery);

jQuery 1.4

Pour jQuery 1.4, la file d'attente d'animation peut être utilisée pour créer une « file d'attente » personnalisée. Vous pouvez également créer votre propre plugin $.ajaxQueue() qui utilise la file d'attente 'fx' de jQuery pour lancer automatiquement la première requête de la file d'attente si elle n'est pas déjà en cours d'exécution.

Implémentation :

<br>(function($) {<br> var ajaxQueue = $({});</p>
<p>$.ajaxQueue = function(ajaxOpts) {</p> <pre class="brush:php;toolbar:false">var oldComplete = ajaxOpts.complete;

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

};

})(jQuery);

Exemple :

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

});
});

Cela garantit que chaque requête Ajax est exécutée de manière séquentielle, permettant une gestion gracieuse de la charge du serveur et le maintien de la réactivité du navigateur.

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!