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 éviter surcharge du serveur et 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 :

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 :

var oldComplete = ajaxOpts.complete;

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

};

})(jQuery);

Exemple :

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