Hacer algo cuando inicia o termina el evento AJAX con jQuery

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.

3 thoughts on “Hacer algo cuando inicia o termina el evento AJAX con jQuery”

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *