jQuery.ajax manejo continúa respuestas: “éxito:” vs “.done”?

He estado trabajando con jQuery y AJAX durante algunas semanas y vi dos formas diferentes de ‘continuar’ el guión una vez que se realizó la llamada: success: y .done .

De la sinopsis de la documentación de jQuery obtenemos:

.done (): Descripción: agregue controladores a los que se llamará cuando se resuelva el objeto aplazado.

success: (opción .ajax ()): una función a llamar si la solicitud tiene éxito.

Entonces, ambos hacen algo después de que se haya completado / resuelto la llamada AJAX. ¿Puedo usar uno u otro al azar? ¿Cuál es la diferencia y cuándo se usa uno en lugar del otro?

success ha sido el nombre tradicional de la callback exitosa en jQuery, definida como una opción en la llamada ajax. Sin embargo, dado que la implementación de $.Deferreds y devoluciones de llamada más sofisticadas, se done es la forma preferida de implementar devoluciones de llamadas exitosas, ya que se puede invocar en cualquier deferred .

Por ejemplo, éxito:

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

Por ejemplo, hecho:

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

Lo bueno de lo done es que el valor de retorno de $.ajax es ahora una promesa diferida que puede vincularse a cualquier otro lugar en su aplicación. Entonces digamos que quieres hacer esta llamada ajax desde algunos lugares diferentes. En lugar de pasar su función de éxito como una opción a la función que realiza esta llamada ajax, puede hacer que la función devuelva $.ajax y enlazar sus devoluciones de llamada con done , fail , o lo que sea. Tenga en cuenta que always hay una callback que se ejecutará tanto si la solicitud tiene éxito como si falla. done solo se desencadenará en el éxito.

Por ejemplo:

 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 beneficio importante de esto en términos de mantenibilidad es que ha envuelto su mecanismo Ajax en una función específica de la aplicación. Si decide que necesita su llamada $.ajax para operar de manera diferente en el futuro, o usa un método ajax diferente, o se aleja de jQuery, solo tiene que cambiar la definición de xhr_get (asegúrese de devolver una promesa o al menos un método done , en el caso del ejemplo anterior). Todas las otras referencias en toda la aplicación pueden permanecer igual.

Hay muchas cosas más (mucho más $.Deferred ) que puede hacer con $.Deferred , una de las cuales es utilizar pipe para desencadenar un error en un error informado por el servidor, incluso cuando la solicitud $.ajax sí misma sea exitosa. Por ejemplo:

 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 }); 

Lea más acerca de $.Deferred aquí: http://api.jquery.com/category/deferred-object/

NOTA : A partir de jQuery 1.8, la pipe ha quedado obsoleta y se usa exactamente de la misma manera.

Si necesita async: false en su ajax, debe usar success lugar de .done . De lo contrario, es mejor usar .done . Esto es del sitio oficial de jQuery :

A partir de jQuery 1.8, el uso de async: false con jqXHR ($ .Deferred) está en desuso; debe usar las opciones de éxito / error / callback completa en lugar de los métodos correspondientes del objeto jqXHR como jqXHR.done () .