jQuery.ajax manipulation continuer réponses: "un succès:" vs ".fait"?

Question

J'ai travaillé avec jQuery et AJAX pour quelques semaines maintenant et j'ai vu deux manières différentes de continuer le script une fois que l'appel a été fait: success: et .done.

À partir de la synthèse de l' jQuery documentation , nous obtenons:

.done(): Description: Ajouter des gestionnaires à être appelée lorsque l'objet Reporté est résolu.

succès: (.ajax() de l'option): Une fonction qui doit être appelée si la demande aboutit.

Donc, à la fois de faire quelque chose après l'appel AJAX a été achevé/en résolu. Puis-je utiliser l'un ou l'autre au hasard? Quelle est la différence et quand l'un est utilisé à la place de l'autre?

Answer 1

success a été le nom traditionnel de la réussite de rappel en jQuery, définie comme une option de l'appel ajax. Cependant, depuis la mise en œuvre de l' $.Deferreds plus sophistiquées, les rappels, done est la meilleure façon de mettre en œuvre succès rappels, comme il peut être appelé à tout deferred.

Par exemple, le succès:

$.ajax({
  url: '/',
  success: function(data) {}
});

Par exemple, le fait:

$.ajax({url: '/'}).done(function(data) {});

La bonne chose à propos de done , c'est que la valeur de retour de l' $.ajax est maintenant un différé de promesse, qui peut être liée à n'importe où ailleurs dans votre application. Donc, disons que vous voulez faire cet appel ajax à partir de différents endroits. Plutôt que de passer dans votre réussite en fonction des options de la fonction qui rend cet appel ajax, vous pouvez juste avoir le retour de la fonction $.ajax lui-même et de lier votre callbacks avec done, fail, then, ou quoi que ce soit. Notez que always est un rappel qui sera exécuté si la demande réussit ou échoue. done ne sera déclenchée en cas de succès.

Par exemple:

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    beforeSend: showLoadingImgFn
  })
  .always(function() {
    // remove loading image maybe
  })
  .fail(function() {
    // handle request failures
  });

}

xhr_get('/index').done(function(data) {
  // do stuff with index data
});

xhr_get('/id').done(function(data) {
  // do stuff with id data
});

Un avantage important en termes de maintenabilité est que vous avez enveloppé vos ajax mécanisme dans une application spécifique à la fonction. Si vous décidez que vous avez besoin de votre $.ajax appel à fonctionner différemment dans l'avenir, ou si vous utilisez une autre méthode ajax, ou vous vous éloignez de jQuery, vous n'avez qu'à changer l' xhr_get définition (en étant sûr de retour d'une promesse ou d'au moins un done méthode, dans le cas de l'exemple ci-dessus). Toutes les autres références tout au long de l'app peut rester le même.

Il y a beaucoup plus (beaucoup plus frais) des choses que vous pouvez faire avec $.Deferred, dont l'un est d'utiliser pipe pour déclencher une panne sur une erreur signalée par le serveur, même lorsque l' $.ajax la demande elle-même réussit. Par exemple:

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json'
  })
  .pipe(function(data) {
    return data.responseCode != 200 ?
      $.Deferred().reject( data ) :
      data;
  })
  .fail(function(data) {
    if ( data.responseCode )
      console.log( data.responseCode );
  });
}

xhr_get('/index').done(function(data) {
  // will not run if json returned from ajax has responseCode other than 200
});

Lire plus à propos de $.Deferred ici: http://api.jquery.com/category/deferred-object/

REMARQUE: Comme de jQuery 1.8, pipe a été dépréciée en faveur de l'utilisation de then exactement de la même manière.