Chiamate ajax multiple allo stesso tempo

Question

Ho sviluppato alcuni siti Web e inciampo sempre nello stesso punto: più chiamate ajax. Ho una pagina principale in cui tutto il contenuto viene caricato in modo asincrono. Quando la pagina è caricata, ci sono quattro chiamate INDEPENDENT che "disegnano" la pagina per aree (in alto, a sinistra, a destra e in basso) e mentre è caricata mostro all'utente i tipici giri di ajax. Quindi, quando una richiesta viene ricevuta dal browser, eseguo il callback e le diverse aree vengono disegnate in momenti diversi. Il fatto è che la risposta per il server a volte è confusa, voglio dire, la risposta di top è disegnata a sinistra o viceversa.

Ho provato alcune soluzioni come la creazione di un timestamp in ogni richiesta per indicare al browser e al server che ogni richiesta è diversa.

Inoltre, ho provato a configurare alcuni parametri della cache nel server, nel caso.

L'unico modo in cui funziona è stato incluso il request2 nel callback di colui, ecc

qualcuno conosce il modo corretto di farlo o mai ha battuto questo problema ?? Non voglio fare richiesta concatenata.

Grazie

Ecco un esempio di ciò che intendo:

$(document).ready(function() { 

$.get('/activity',Common.genSafeId(),function(data){$('#stream').html(data);$("#load_activity").addClass("empty");}); 
$.get('/messages',Common.genSafeId(),function(data){$('#message').html(data);$("#load_messages").addClass("empty");}); 
$.get('/deals',Common.genSafeId(),function(data){$('#new_deals_container').html(data);$("#load_deal").addClass("empty");}); 
$.get('/tasks',Common.genSafeId(),function(data){$('#task_frames').html(data);$("#load_task").addClass("empty");});}); 

E l'HTML è un semplice jsp con quattro contenitori ognuno con un differente id.

Answer 1

Assicurati di avere richiamate diverse per ogni chiamata Ajax, sembra che tu stia cercando di utilizzare la stessa funzione per tutti e quattro, quindi quando vengono chiamati fuori servizio (perché richiedono diverse quantità di tempo sul lato server) , stanno rendendo nel posto sbagliato. Se insisti a utilizzare la stessa funzione per tutte le tue callback, devi inserire qualcosa nel payload in modo che il callback sappia dove eseguire il rendering.

Answer 2

TAPPI

Closures sono un po 'mente-blowing all'inizio. Sono una caratteristica di javaScript e di molti altri linguaggi informatici moderni.

Una chiusura è formata da un'istanza eseguita di una funzione che ha una funzione interna (in genere un gestore di eventi anonimo o un metodo denominato) che deve accedere a una o più variabili esterne (cioè variabili che si trovano all'interno della funzione esterna ma al di fuori della funzione interiore). La cosa sconvolgente è che la funzione interna mantiene l'accesso alle variabili esterne anche se la funzione esterna è stata completata e restituita nel momento in cui la funzione interna viene eseguita!

Inoltre, le variabili intrappolate da una chiusura sono accessibili solo alle funzioni interne e non all'ambiente più esterno che ha portato la chiusura in essere. Questa funzione ci consente, ad esempio, di creare strutture classiche con membri privati ​​e pubblici anche in assenza di parole chiave "pubbliche" e "private".

Le chiusure sono rese possibili dall'uso di variabili esterne da parte delle funzioni interne che sopprimono la "garbage collection" di javaScript che altrimenti distruggerebbe l'ambiente della funzione esterna in un punto indeterminato dopo il completamento.

L'importanza delle chiusure per una programmazione javaScript buona e ordinata non può essere eccessivamente sollecitata.

Nel codice qui sotto la funzione getData() forme, ad ogni chiamata, una chiusura intrappolando id1 e id2 (e url), che rimangono a disposizione del gestore di risposta ajax anonima (terzo argomento $ .get di).

$(document).ready(function() { 

    function getData(url, id1, id2) { 
     $.get(url, Common.genSafeId(), function(data) { 
      $(id1).html(data); 
      $(id2).addClass("empty"); 
     }); 
    } 

    getData('/activity', '#stream', '#load_activity'); 
    getData('/messages', '#message', '#load_messages'); 
    getData('/deals', '#new_deals_container', '#load_deal'); 
    getData('/tasks', '#task_frames', '#load_task'); 

}); 

Così, piuttosto che scrivere quattro gestori separati, sfruttiamo la capacità del linguaggio di formare chiusure e chiamare la funzione stesso, getData(), quattro volte. Ad ogni chiamata, getData() forma una nuova chiusura che consente al gestore di risposta $ .get (chiamato in modo asincrono quando il server risponde) di indirizzare gli elementi DOM negli elementi .