Ajax solicitudes múltiples al mismo tiempo

Question

recientemente desarrollé un proyecto donde envié múltiples solicitudes ajax en una sola página aspx. También puse un temporizador si esta solicitud está sucediendo con un intervalo de 5 segundos. Todo parece funcionar bien hasta que de repente las respuestas se mezclan. Sé que podría hacer lo mismo con una solicitud, pero me pregunto por qué está sucediendo esto. Miré a través de Internet pero todavía no encuentro ninguna solución. Ahora, en realidad, adopté este estilo de codificación, como hacer una solicitud con resultados múltiples, pero me pregunto y realmente quiero saber cómo hacer múltiples solicitudes de ajax si la respuesta no se mezcla. Este es mi código de ejemplo:

$(document).ready(function() { 
     var a = setInterval("request1()", 5000); 
     var b = setInterval("request2()", 5000); 
    }); 

function request1() { 

     $.ajax({ 
      url: 'ajaxhandler.aspx?method=method1' , 
      beforeSend: function (xhr) { 
       xhr.overrideMimeType('text/plain; charset=utf-8'); 
      }, 
      success: function (data) { 
        alert(data); 
      } 

     }); 
    } 


function request2() { 

     $.ajax({ 
      url: 'ajaxhandler.aspx?method=method2' , 
      beforeSend: function (xhr) { 
       xhr.overrideMimeType('text/plain; charset=utf-8'); 
      }, 
      success: function (data) { 
        alert(data); 
      } 

     }); 
    } 

Answer 1

Si necesita las solicitudes que suceder, no se debe utilizar AJAX (la primera "a" es para "asíncrono").

Para solucionar esto puede llamar a request2() en la devolución de llamada para el "éxito" de su primera solicitud.

function request1() { 
    $.ajax({ 
     url: 'ajaxhandler.aspx?method=method1' , 
     beforeSend: function (xhr) { 
      xhr.overrideMimeType('text/plain; charset=utf-8'); 
     }, 
     success: function (data) { 
       request2(); 
     } 

    }); 
} 

Answer 2

Esto no es un error de JavaScript, está mal porque está llamando a una sola página al mismo tiempo. Si tuviera dos páginas laterales del servidor para sus dos archivos AJAX, estaría bien. Intente crear dos archivos diferentes aspx para usted diferente methods para tenerlos juntos.

Pero eso no sería una buena práctica. ¿Por qué no envió el método como un parámetro y tiene una condición en su archivo aspx para diferentes métodos? Luego, si tiene dos (o más) métodos utilizados al mismo tiempo, simplemente envíe ambos al servidor con una sola llamada. Guardará un encabezado HTTP y un retraso de llamada para su llamada.

function requestAll() { 

     $.ajax({ 
      url: 'ajaxhandler.aspx' , 
      data: ['method1', 'method2'], 
      beforeSend: function (xhr) { 
       xhr.overrideMimeType('text/plain; charset=utf-8'); 
      }, 
      success: function (data) { 
        alert(data); 
      } 

     }); 
    } 

Answer 3

Como se ha dicho, no se puede garantizar el orden en que los resultados regresan. Pero si es necesario ser capaz de determinar esto, se podría crear posiblemente un identificador único para cada solicitud asíncrona que se hace, luego, ordena las respuestas entrantes según corresponda.

Un ejemplo en el que veo que una solución de este tipo es útil es cuando se realizan acciones con una pulsación de tecla (por ejemplo, onkeyup). Al hacer algo como esto, es posible que desee codificar una marca de tiempo, número de versión o similar, para que pueda garantizar algún tipo de orden. Si el usuario está intentando buscar "prueba", es posible que la respuesta de autocompletar para "tes" sea devuelta antes de la respuesta para "te". Si simplemente sobrescribe los datos de autocompletar, obviamente este no será el comportamiento deseado, ya que podría mostrar resultados incorrectos para el (los) token (s) de búsqueda actual.

La codificación de una marca de tiempo (o identificación única, contador, número de versión, clave, etc.) le permitirá verificar esto para verificar que tiene la respuesta más actualizada u ordenar los resultados por marca de tiempo si necesidad de garantizar el orden, etc.

Answer 4

La siguiente función aceptará una matriz de URL para solicitudes JSON e invocará la devolución de llamada con una matriz de resultados una vez que todas las solicitudes hayan finalizado. Se puede adaptar fácilmente al uso no JSON.

La idea es esconder las respuestas entrantes en una matriz a medida que llegan, y luego invocar la devolución de llamada una vez que todos los resultados estén disponibles. Este enfoque es una buena manera de actualizar por lotes el DOM y evitar tener un temporizador para cada nodo que desea actualizar.

function multi_getJSON(urls, callback) 
{ 
    // number of ajax requests to wait for 
    var count = urls.length; 

    // results of individual requests get stuffed here 
    var results = []; 

    // handle empty urls case 
    if(count === 0) 
    { 
     callback(results); 
     return; 
    } 

    urls.forEach(function(url, index) 
    { 
     $.getJSON(url, function(data) 
     { 
      results[index] = data; 
      count = count - 1; 

      // are we finished? 
      if(count === 0) 
      { 
       callback(results); 
      } 
     }); 
    }); 
}