Morton 5 de marzo de 2014 a las 09.06
   Imprimir artículo
elWebmaster.com

Cómo resolver múltiples llamadas simultáneas de Ajax con una simple llamada de jQuery


AJAX, CSS, html, javascript, jQuery, carga, llamadas, request, callback

jquerywideDigamos que hay una funcionalidad de tu sitio web que sólo se usa el 5% del tiempo. Esa funcionalidad requiere de HTML, CSS y JavaScript para funcionar. Por lo que eliges Ajax para resolver las veces que esa funcionalidad sea utilizada. Son tres los pedidos Ajax que vamos a necesitar, y habrá que esperar que los tres se resuelvan. ¿Cuál es la mejor manera de hacer esto?

Las llamadas Ajax en jQuery están provistas de callbacks:

  1. $.ajax({
  2.   statusCode: {
  3.     url: "/feature",
  4.     success: function() {
  5.     }
  6.   }
  7. });

También puedes usar un atajo, con el método $.get():

  1. $.get("/feature/").done(function() {
  2. });

Pero tenemos tres pedidos Ajax que necesitamos resolver, y queremos esperar a que los tres finalicen antes de hacer nada. Aquí hay otra opción:

  1. $.get("/feature/", function(html) {
  2.  
  3.   $.get("/assets/feature.css", function(css) {
  4.  
  5.     $.getScript("/assets/feature.js", function() {
  6.  
  7.        $("<style />").html(css).appendTo("head");
  8.  
  9.        $("body").append(html);
  10.  
  11.     });
  12.  
  13.   });
  14.  
  15. });

Esto espera hasta que todo este resuelto antes de agregar nada a la página. Para el momento en que el usuario vea algo, ya va a estar todo resuelto.  El problema con esto es que es lento. Un pedido, se resuelve, siguiente pedido, se resuelve, y así.

Hay una manera de hacerlo más rápido, con los tres pedidos en paralelo.

Vamos a usar el método de jQuery $.when(), que toma una lista de objetos y los devuelve en un simple callback.

  1. $.when(
  2.  
  3.   // objeto,
  4.  
  5.   // objeto,
  6.  
  7.   // objeto
  8.  
  9. ).then(function() {
  10.  
  11.  // lo que necesites que suceda
  12.  
  13. });

Así que nuestro callback se reescribiría así:

  1. $.when(
  2.   $.get("/feature/", function(html) {
  3.     globalStore.html = html;
  4.   }),
  5.  
  6.   $.get("/assets/feature.css", function(css) {
  7.     globalStore.css = css;
  8.   }),
  9.  
  10.   $.getScript("/assets/feature.js")
  11.  
  12. ).then(function() {
  13.  
  14.   $("<style />").html(globalStore.css).appendTo("head");
  15.  
  16.   $("body").append(globalStore.html);
  17.  
  18. });

Eso es todo ¡Esperamos que  te sea de utilidad!

Fuente original del artículo: CSS-Tricks
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder