Ajax più richieste allo stesso tempo

Question

recentemente ho sviluppato un progetto sono stato inviare più richieste Ajax in una singola pagina ASPX. Ho anche messo un timer se questa richiesta si verificava con intervallo di 5 secondi. Tutto sembra funzionare bene fino a quando improvvisamente le risposte si confondono. So che potrei fare la stessa cosa con una sola richiesta, ma mi chiedo perché questo sta accadendo. Ho guardato in Internet ma non riesco ancora a trovare una soluzione. Ora ho effettivamente adottato questo stile di codifica come fare una richiesta con più risultati, ma mi chiedo e voglio davvero sapere come fare più richieste Ajax se la risposta non si confonderà. Questo è il mio codice di esempio:

$(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

Se è necessario le richieste per accadere in ordine, non si dovrebbe usare AJAX (la prima "a" è per "asincrona").

Per risolvere questo problema è possibile chiamare request2() nella richiamata per il "successo" della prima richiesta.

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

    }); 
} 

Answer 2

Questo non è colpa JavaScript, è incasinato perché si sta chiamando una singola pagina nello stesso tempo. Se avessi due pagine lato server per i tuoi due file AJAX, allora andrebbe bene. Prova a creare due file aspx diversi per il tuo diverso methods per farli chiamare insieme.

Ma non sarebbe una buona pratica. Perché non hai inviato il metodo come parametro e hai una condizione nel tuo file aspx per metodi diversi? Quindi, se hai due (o più) metodi utilizzati contemporaneamente, invia semplicemente entrambi al server con una singola chiamata. Si salverà un'intestazione HTTP e il ritardo di chiamata per la chiamata.

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

Come è stato detto, non è possibile garantire l'ordine che i risultati tornano in. Ma se è necessario essere in grado di determinare questo, si potrebbe in teoria creare un identificatore univoco per ogni richiesta asincrona che è fatto, quindi riordinare le risposte in arrivo di conseguenza.

Un esempio in cui vedo che una soluzione di questo tipo è utile quando si eseguono azioni sul tasto (ad esempio onkeyup). Quando fai qualcosa di simile, potresti voler codificare un timestamp, un numero di versione o simili, in modo da poter garantire una sorta di ordine. Se l'utente sta tentando di cercare "test", è possibile che la risposta del completamento automatico per "tes" venga restituita prima della risposta per "te". Se semplicemente sovrascrivi i dati di completamento automatico, questo ovviamente non sarà il comportamento desiderato, poiché potresti visualizzare risultati errati per i token di ricerca correnti.

La codifica di un timestamp (o ID univoco, contatore, numero di versione, chiave, ecc.) Consente di verificare questo per verificare di avere la risposta più aggiornata o di ordinare i risultati per data/ora se si necessità di garantire l'ordine, ecc.

Answer 4

La funzione seguente accetta una matrice di URL per le richieste JSON e richiama la richiamata con una serie di risultati una volta completate tutte le richieste. Può essere facilmente adattato all'uso non JSON.

L'idea è di riporre le risposte in arrivo in un array mentre arrivano, e quindi invocare il callback solo quando tutti i risultati sono in. Questo approccio è un buon modo per aggiornare in batch il DOM e per evitare di avere un timer per ogni nodo che si desidera aggiornare.

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); 
      } 
     }); 
    }); 
}