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
Muchísimas gracias…es EXACTAMENTE lo que andaba buscando!
Muy claro y útil.
Saludos desde Chile!
Nos da gusto saber que te ha servido.
Saludos
GEnial tuto simple y especifico gracias
Es justo lo que buscamos, hacer cosas simples.
Saludos
Muchas gracias!!! Está genial explicado. Pero dando una vuelta de tuerca… ¿cómo podría cancelar todas las peticiones menos una específica? ¿y al revés, cancelar una en concreto y dejar el resto?
Muchas gracias de nuevo, fue de gran ayuda 😉