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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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;

Copier après la connexion

};

})(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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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);
});

Copier après la connexion