Antes de cancelar las llamadas previas, unas se superponian a otras dando lugar a un tiempo de respuesta mayor y a una mala experiencia de usuario

La idea pues fue que al lanzar una nueva petición AJAX, se cancelara la anterior de manera que sólo hubiera solo una activa y por tanto sólo se cargaran datos durante las pausas de escritura en el input, y del mismo modo haciendo que mientras se escribía de forma rápida, no colapsar el servidor con llamadas haciendo todo el proceso de una forma menos trabada.

Cancelando las llamadas anteriores, se consigue que los resultados se muestren de forma más rápida y de forma menos trabada.

Entonces empecé a googlear como hacer esto, y encontré algunas respuestas pero ninguna me funcionó (como la de relanzar la petición para cancelar la anterior) y otras me parecieron muy complicadas para el cometido sencillo que tenia (aplicar un patrón observador). Incluso me encontré con quien decía que era imposible abortar la llamada AJAX desde el cliente (navegador).

Pues bie, gracias a jQuery encontré una solución muy sencilla aprovechando el evento beforeSend. Se trata de crear una variable global, donde guardaremos la conexión HTTPRequest, y en dicho evento beforeSend miraremos si hay alguna conexión, si la hay, abortaremos mediante la función abort() y meteremos la nueva conexión realizada en la variable global. Dando paso encontes al evento success, complete o error sólo con una conexión activa. Nuestra llamada AJAX con jQuery deberia quedar más o menos así, sin olvidar declarar la variable httpR como global:
[cc lang=”javascript”]
$.ajax({
url: ‘La URL a llamar’
beforeSend: function(data2){
/*httpR es la variable global donde guardamos la conexion*/
if(httpR){
/*Si habia alguna conexion anterior, la cancelamos*/
httpR.abort();
}
/*Guardamos la nueva conexion*/
httpR = data2;
},
success: function(data) {
/*Handler al recibir los datos OK*/
},
error: function(e, xhr){
/*Handler de error en la funcion*/
}
});
[/cc]
Para ver la mejora que se consigue, he preparado una demo que podéis ver aquí y descargar los archivos para probarlo.
Ver demo – Descargar archivos