¿Cuál es la forma correcta de administrar múltiples solicitudes de ajax?

Question

Todos hemos visto algunos ejemplos en los tutoriales de AJAX donde se envían algunos datos. Todos ellos (más o menos) se ven como:

var http = createRequestObject(); // shared between printResult() and doAjax() 

function createRequestObject() { /* if FF/Safari/Chrome/IE ... */ ... } 

function printResult() 
{ 
    if (http.readyState == 4) { ... } 
} 

function doAjax() { 
    var request = 'SomeURL'; 
    http.open('post', request); 
    http.onreadystatechange = printResult; 
    data = ...; // fill in the data 
    http.send(data); 
} 

// trigger doAjax() from HTML code, by pressing some button 

Este es el escenario que no entiendo por completo: ¿y si el botón se pulsa varias veces muy rápido? ¿Debería doAjax() de alguna manera reiniciar el objeto http? Y si, si el objeto se reinicializa, ¿qué ocurre con las solicitudes que ya están en el aire?

PD: al moderador: esta pregunta es probablemente más relacionada con la wiki de la comunidad. Como se indica aquí (https://meta.stackexchange.com/questions/67581/community-wiki-checkbox-missing-in-action), si lo hago bien, por favor marque esta pregunta adecuadamente.

Answer 1

Seguro que existen numerosas bibliotecas hoy en día que realizan un trabajo decente y deben utilizarse en el entorno de producción. Sin embargo, mi pregunta era sobre los detalles debajo del capó. Así que aquí encontré la forma similar al cálculo de lamda para tener objetos de solicitud dedicados por solicitud. Aquellos objeto será, obviamente, se pasa a la función de devolución de llamada que se llama cuando llega la respuesta etc:

function printResult(http) { 
    if (http.readyState == 4) { ... } 
    ... 
} 

function doAjax() { 
    var http = createRequestObject();  
    var request = 'SomeURL'; 

    http.open('get', request);  
    http.onreadystatechange = function() { printResult(http); }; 
    http.send(null); 
    return false; 
} 

con éxito probado en Chrome e IE9.

Answer 2

He utilizado una cola de solicitudes por página para tratar este escenario (para suprimir solicitudes duplicadas y garantizar el orden secuencial de las solicitudes), pero puede haber una solución más estandarizada.

Dado que esto no se proporciona de forma predeterminada, deberá implementarlo en JavaScript dentro de su página (o un script vinculado). En lugar de comenzar una solicitud de Ajax, al hacer clic en un botón se agregaría una solicitud a una cola. Si la cola está vacía, ejecute la solicitud Ajax, con una devolución de llamada que elimine la entrada en cola y ejecute la siguiente (si existe).

Consulte también: How to implement an ajax request queue using jQuery

Answer 3

Desde AJAX tiene asynchronus la naturaleza, con cada botón de clic se elevaría evento asíncrono que GET/POST algunos datos desde/hacia el servidor. Proporciona una devolución de llamada, por lo que se activará tantas veces como el servidor termine de procesar los datos.

Es un comportamiento normal por defecto, no debe reiniciar el objeto http. Si desea presentar una operación de envío múltiple, debe hacerlo manualmente (por ejemplo, deshabilitar el botón cuando se realiza la primera llamada).

También sugiero usar jQuery $ .ajax porque encapsula muchos de estos detalles.