Truco: Abortar peticiones AJAX pendientes antes de enviar otra

Truco: Abortar peticiones AJAX pendientes antes de enviar otra

Arquitectura Ajax

En algunas ocasiones interesa cancelar o detener varias peticiones AJAX que ya han sido realizadas. En un sistema muy asíncrono, puede que unas llamadas sean más prioritarias que otras o que incluso cierta petición deba anular al resto de peticiones pendientes….

Existe un método del viejo XMLHttpRequest llamado abort() que realiza esta función y que también está soportado por jQuery. La idea es ejecutarlo justo antes de enviar al servidor una petición AJAX prioritaria que deba anular a las que ya estuvieran activas.

Pero, ¿cómo anularlas todas de un plumazo?

El truco consiste en “apilar” cada conexión justo antes de realizar una llamada y “desapilarla” al completar la petición. Una función abortarAll() se encargaría de cancelarlas todas a la vez. He aquí el código:

[javascript]
$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(idx, jqXHR) {
jqXHR.abort();
});
$.xhrPool.length = 0
};

$.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR);
},
complete: function(jqXHR) {
var index = $.xhrPool.indexOf(jqXHR);
if (index > -1) {
$.xhrPool.splice(index, 1);
}
}
});
[/javascript]

La función de jQuery .ajaxSetup() establece una configuración por defecto común a todas las llamadas .ajax() que se realicen en el futuro (incluso para aquellas que se llevan a cabo a través de la función .load()).

Precaución: como .ajaxSetup() establece una configuración por defecto hemos de tener cuidado de no sobrescribir sus parámetros más adelante. La documentación oficial desaconseja su uso por esta misma razón.

Ahora imaginaos que nos toca ejecutar una llamada asíncrona prioritaria que debe cancelar al resto. Llamamos a la función así:

[javascript]
$.xhrPool.abortAll();

//Llamada con prioridad
.ajax(…);
[/javascript]

Una última aclaración

Cuando una petición ha sido enviada al servidor, esta queda fuera de nuestro control. Lo que hace .abort() es ignorar cualquier respuesta que pudiera devolver el servidor a partir del momento en que ha sido abortada. Por tanto no sirve para evitar la sobrecarga o prevenir un ataque DoS.

Previous Offliberty: Pruebas de que existe vida offline.
Next HeiaHeia! La red social para mantenerse en forma.

About author

Angel
Angel 172 posts

Siempre quise ser inventor y escritor: por lo primero me hice ingeniero, y en cuanto a lo segundo, escribo aquí de vez en cuando sobre telecomunicaciones y tecnología. Me gustan los robots, los perretes y los libros (analógicos).

You might also like

Desarrollo 8 Comentarios

Summernote, un potentísimo editor WYSIWYG en Bootstrap

Hoy traigo carne fresca y gratis. En muchos proyectos web surge la imperiosa necesidad de incluir un editor de texto enriquecido del tipo WYSIWYG, acrónimo de “What You See Is

Borrar directorio (no vacío) en Linux

  Si estás leyendo, esto probablemente sea porque empiezas a estar muy cabreado y estés considerando seriamente la opción de tirar el portátil por la ventana con tal de cargarte

Aprende Android: crea un cliente HTTP con HttpURLConnection

¿Estás desarrollando una aplicación para Android? ¿Necesitas que tu aplicación se comunique con algún servidor solicitándole algún servicio y gestionar la respuesta recibida? Sí ese es tu caso, puede que

1 Comentario

  1. Carlos
    julio 12, 16:44 Reply

    Hola, tengo una pregunta , si serian tan amables de ayudarme ,
    tengo una vista parcial mvc c#.net con un boton submit, el formulario es ajax.beginform
    y cuando doy click las peticiones xhr se van acumulando mas y mas, hasta llegar a un punto que se vuelve super lento la aplicacion ya que esta procesando todas esas peticiones,

    hay alguna forma de borrar y que solo me ejecute una sola peticion??
    ya intente borrar cache, outputcache , pero el problema esta cuando doy boton click
    la unica forma de vaciar esas peticiones es recargando la pagina, pero el cliente no le gusta

    adjunto una imagen, la peticion xhr se llama savemetricdetail, se va acumulando
    http://i66.tinypic.com/5vyl9u.png

Deja un comentario