Introducción.
Este pequeño fragmento de código es muy útil, permite manipular un objeto del DOM cuando suceden los eventos de inicio o terminación del AJAX. Muy útil para mostrar de manera fácil y automatizada un indicador de AJAX para informar al usuario que hay una transacción asíncrona en curso.
Procedimiento.
$('#loader').ajaxStart(function () {
$(this).fadeIn();
});
$('#loader').ajaxStop(function () {
$(this).fadeOut();
});
Adicionalmente hay otros eventos que pueden manejarse de igual manera ajaxComplete, ajaxError, ajaxSend y ajaxSuccess, además de los ya mencionados ajaxStart y ajaxStop.
Enlaces.
- 7 things i wish i had known about jquery.
http://blog.themeforest.net/tutorials/7-things-i-wish-i-had-known-about-jquery/ - jQuery: AJAX API Documentation.
http://docs.jquery.com/Ajax
Artículos relacionados:
Hola!, muy bueno el tip!. Tengo una duda haber si me puedes orientar. Como podria hacer para cancelar una peticion de ajax con jquery. Caso: se realiza una peticion pulsando en un link de un menu para acceder a una seccion de la web, pero esta peticion se demora mucho y decides hacer click en otro link del menu y se genera una segunda peticion. El pero es que la primera peticion quedó en curso y si mas tarde termina este contenido se cargará, provocando un efecto indeseado para el usuarios.
Saludos!
October 15, 2009 @ 11:16 am
Hola kto. Yo pensaría que en primera instancia la mejor solución es asignar un tiempo prudencial para el requerimiento AJAX y que cumplido ese tiempo sin obtener respuesta la solicitud asíncrona se cancele automáticamente (timeout), para hacer esto sólo es especificar el parámetro timeout en las opciones de la invocación.
Ver: http://docs.jquery.com/Ajax/jQuery.ajax#options
Aparentemente existe un método abort() para cancelar a voluntad el requerimiento asíncrono. Para hacer esto tendrás que tener a mano una referencia de la llamado (objeto $.ajax) para invocar en él el método.
Ver: http://docs.jquery.com/API/1.1/AJAX
October 15, 2009 @ 12:13 pm