Cancelando peticiones del objeto $.ajax de jQuery

Ajax Flow

Ajax Flow

Cuando desarrollamos aplicaciones web, en algunos casos es necesario cancelar las peticiones hechas vía ajax, simplemente para que no se acumulen llamados al servidor..

En este ejemplo, enviaré una petición a una url cualquiera que inmediatamente cancelaré, para ejemplificar.

var xhr = null;
 
// Enviar petición
xhr = $.ajax({
    type: 'POST',
    url: 'http://url',
    data: {
      'nombre':'jack',
      'origen':'nicaragua'
    },
    success:function(msg) {
       console.log(msg);
    }
});
 
// Cancelar petición
xhr.abort()

Yo utilizo una variable global especial (xhr por mi buena imaginación) dentro de un objeto global.. y lo que me gusta hacer es preguntar si la petición fue respondida.. en caso de que aun siga pendiente y esté a punto de hacer una nueva, cancelo la primer petición e inicio una nueva.

if(xhr && xhr.readyState != 4) { 
    xhr.abort();
}
 
xhr = $.ajax({
    type: 'POST',
    url: 'http://url',
    data: {
      'nombre':'jack',
      'origen':'nicaragua'
    },
    success:function(msg) {
       console.log(msg);
    }
});

Ahora en caso de querer cancelar cualquier petición (para aplicaciones muy grandes), lo que se hace es almacenar los objetos xhr en un arreglo y luego recorrerlo para finalizar todas las conexiones.. entonces,

(function($) {
    var xhrRequests = [];
 
    // Cada vez que se hace una peticion, la agregamos al arreglo
    $(document).ajaxSend(function(e, jqXHR, options) {
        xhrRequests.push(jqXHR);
    });
 
    // Y al completarse la peticion la eliminamos del arreglo, de lo contrario se quedara para ser cancelada
    $(document).ajaxComplete(function(e, jqXHR, options) {
        xhrRequests = $.grep(xhrRequests, function(x) {
            return x != jqXHR;
        });
    });
 
    // Recorrer cada peticion y cancelarla
    var abandonarTodasLasPeticiones = function() {
        $.each(xhrRequests, function(idx, jqXHR) {
            jqXHR.abort();
        });
    };
})(jQuery);

De tal manera que solamente haciendo abandonarTodasLasPeticiones(); se cancelaran todas las peticiones hechas con anterioridad, espero que esto les ayude a comprender y que hacer con sus peticiones..

#HappyCoding

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..

Facebook Twitter LinkedIn Google+ Flickr YouTube Skype 

Compartir en...Tweet about this on TwitterPin on Pinterest0Share on LinkedIn0Share on Google+0Share on Facebook4