In che modo Facebook mostra i progressi del caricamento del browser durante i carichi di pagina AJAX?

Per mantenere il client di messaggistica istantanea loggato in qualsiasi momento, Facebook evita il caricamento di tutta la pagina utilizzando AJAX per caricare le sue pagine prima di inserirle nel documento.In che modo Facebook mostra i progressi del caricamento del browser durante i carichi di pagina AJAX?

Tuttavia, durante le richieste di Facebook AJAX il browser sembra essere visibilmente in fase di caricamento; il pulsante di ricarica cambia in X e l'indicatore di avanzamento integrato nel browser indica caricamento/attesa ecc.

Sono riuscito a implementare correttamente la navigazione basata su AJAX, ma il mio browser non mostra alcuna indicazione di caricamento (dal momento che le richieste sono asincrone) come fa Facebook?

fonte

2012-01-18 reach4thelasers

"per mantenere sempre attivo il client di messaggistica istantanea" L'IM rimane nello stesso stato, anche se apre i collegamenti in una nuova scheda ... – feeela

Il browser visualizza lo stato di caricamento quando è presente un elemento nel documento che viene caricato. Le richieste Ajax sono fatte interamente da JavaScript; il documento non è interessato e quindi lo stato di caricamento non viene attivato.

D'altra parte, la maggior parte delle richieste di Facebook viene effettuata inserendo un tag <script> nel documento, che punta a un file JavaScript contenente i dati desiderati. (Essenzialmente JSONP, tranne che usano un formato diverso.) Il browser visualizzerà il suo stato di caricamento perché il tag <script> è un elemento scaricato nel documento.

Questa tecnica/JSONP può esporre il sito a rischi per la sicurezza se non si presta attenzione, poiché le richieste tra siti sono consentite. Facebook si occupa di questo generando URL casuali per ogni risorsa, che vengono inviati al browser nel caricamento iniziale della pagina.

fonte

2012-01-18 19:08:48

Grazie per la risposta perspicace. Tuttavia, quando provo questo approccio (creare un tag 'script', impostare' src' sul mio controller JSON, aggiungerlo al mio tag 'head' o' body', il browser non visualizza l'indicatore di caricamento. con successo e vedo il tag script aggiunto nel mio sorgente di pagina.Anche ho aggiunto il metodo 'Sleep' al mio metodo lato server per simulare un processo di lunga durata, per vedere il caricamento appare.Ma ancora senza fortuna.Tutte le idee? – Kamyar

Ps Quando uso 'IFrame', tutto funziona bene, ma non posso farlo con il tag' script'. – Kamyar

@Kamyar In realtà non sono sicuro, sono tornato e ho provato a farlo di nuovo io stesso poco fa, e io ha avuto gli stessi problemi che stai descrivendo.Sono abbastanza sicuro che funzionasse quando ho scritto questa risposta ... Non sono sicuro se qualcosa è cambiato o se ho sbagliato qualcosa qui. –

Facebook utilizza iframe per la comunicazione quando desiderano che venga visualizzato lo stato del browser 'occupato'. È possibile utilizzare iframe per eseguire ajax di dominio incrociato facendo sì che le funzioni di chiamata iframe nella finestra padre.

fonte

2012-01-30 01:17:09 skarE

Si noti che se i carichi iframe attivano l'indicatore di occupato del browser dipende interamente dal browser. Safari e gli IE successivi hanno scelto di sopprimere questi indicatori per gli iframe (che imho è sciocco/bar per gli utenti, ma sicuramente rende i loro browser "più veloci" avendo meno elementi che attivano gli stati occupati) quindi anche quella tecnica non funzionerà. – Dtipson

Facebook utilizza uno strumento che hanno sviluppato chiamato Big Pipe per eseguire fondamentalmente il flusso del sito sul client in blocchi. Invia un tag script iniziale con un DOM nudo al client e lo script carica i moduli nella pagina in modo asincrono - l'idea è che il client presenta il modulo 1 mentre il server recupera il modulo 2, migliorando quindi il tempo di caricamento.

Oltre a questo, usano una tecnica chiamata polling lungo. Con HTTP 1.1 possono sfruttare una connessione persistente e non doversi preoccupare dei timeout. Quando la pagina viene renderizzata, lo script sul lato client fa in modo che una richiesta AJAX di Facebook essenzialmente "ascolti" per un evento. Si siederà lì e ascolterà fino a quando non si verificherà un evento. Nel frattempo, il browser sembrerà "caricare" i dati.

Quando un evento viene attivato alla fine di Facebook (ad esempio qualcuno ha commentato sul tuo post sul muro), FB invierà tale risposta al client per attivare i rispettivi richiami (come far apparire un piccolo suggerimento che ti permette di sapere commento) e invia IMMEDIATAMENTE un'altra richiesta a FB per ascoltare il prossimo evento.

fonte

2012-01-30 18:18:24 AlienWebguy

In che modo Facebook mostra i progressi del caricamento del browser durante i carichi di pagina AJAX?

risposta

Problemi correlati