W jaki sposób Facebook pokazuje postęp ładowania przeglądarki podczas ładowania strony AJAX?

Aby klient komunikatora był zawsze zalogowany, Facebook unika pełnych wczytywania stron, używając AJAX do załadowania swoich stron przed wstawieniem ich do dokumentu.W jaki sposób Facebook pokazuje postęp ładowania przeglądarki podczas ładowania strony AJAX?

Jednak podczas żądań Facebooka AJAX przeglądarka wydaje się być widocznie wczytywania; przycisk przeładowania zmienia się na X, a wskaźnik postępu wbudowany w przeglądarce wskazuje ładowanie/oczekiwanie itp.)

Udało mi się wdrożyć nawigację opartą na AJAX, ale moja przeglądarka nie pokazuje żadnego wskazania ładowania (ponieważ żądania są asynchroniczne) jak robi to Facebook?

Źródło

2012-01-18 reach4thelasers

"aby klient komunikatora był zawsze zalogowany" Komunikator pozostaje w tym samym stanie, nawet jeśli otwiera linki w nowej karcie ... – feeela

Przeglądarka wyświetla stan załadowania, gdy w ładowanym dokumencie znajduje się element. Żądania Ajax są w całości tworzone z poziomu JavaScript; nie ma to wpływu na dokument, a więc stan ładowania nie jest wyzwalany.

Z drugiej strony, większość żądań Facebooka jest tworzona poprzez wstawienie do dokumentu znacznika <script>, wskazując plik JavaScript zawierający żądane dane. (Zasadniczo JSONP, z wyjątkiem tego, że używają innego formatu). Przeglądarka wyświetli stan ładowania, ponieważ znacznik <script> jest nieobciążonym elementem w dokumencie.

Ta technika/JSONP może narazić Twoją witrynę na zagrożenia bezpieczeństwa, jeśli nie będziesz ostrożny, ponieważ dozwolone są żądania z innych witryn. Facebook radzi sobie z tym poprzez generowanie losowych adresów URL dla każdego zasobu, które są wysyłane do przeglądarki podczas ładowania strony początkowej.

Źródło

2012-01-18 19:08:48

Dzięki za wnikliwą odpowiedź. Jednak gdy próbuję tego podejścia (utwórz tag 'script', ustaw jego' src' na moim kontrolerze JSON, dołącz to do mojego znacznika 'head' lub' body', przeglądarka nie wyświetla wskaźnika ładowania. z powodzeniem i widzę dodany znacznik skryptu w moim źródle strony .Dodałem też metodę "Uśpienia" do mojej metody po stronie serwera, aby zasymulować długotrwały proces, aby zobaczyć ładowanie pojawia się.Ale wciąż nie ma szczęścia.Wszelkie pomysły? – Kamyar

Ps Kiedy używam 'IFrame', wszystko działa dobrze, ale nie można tego zrobić za pomocą znacznika' script'. – Kamyar

@Kamyar Nie jestem pewien, wróciłem i próbowałem zrobić to jeszcze raz przed chwilą, a ja miał te same problemy, które opisujesz.Jestem pewien, że to działało, kiedy napisałem tę odpowiedź ... Nie jestem pewien, czy coś się zmieniło, czy też coś tu nie tak. –

Facebook korzysta z iframe do komunikacji, gdy chce wyświetlić stan "zajętości" przeglądarki. Możesz używać elementów iframe do wykonywania domen ajaxowych w różnych domenach, korzystając z funkcji wywołania funkcji iframe w oknie nadrzędnym.

Źródło

2012-01-30 01:17:09 skarE

Należy pamiętać, że ładowanie elementów iframe powoduje, że wskaźnik zajętości przeglądarki jest zależny od przeglądarki. Safari i późniejsze IE zdecydowały się wyłączyć te wskaźniki dla iframe (które imho jest głupie/barowe dla użytkowników, ale z pewnością sprawia, że ich przeglądarki "pojawiają się" szybciej dzięki mniejszej liczbie rzeczy wyzwalających zajęte stany), więc nawet ta technika nie zadziała. – Dtipson

Facebook używa narzędzia, które opracowało pod nazwą Big Pipe, aby zasadniczo przesyłać strumieniowo swoją witrynę do klienta w porcjach. Wysyłają początkowy znacznik skryptu z pustym DOM do klienta, a skrypt ładuje moduły na stronie asynchronicznie - przy czym klient przedstawia moduł 1 podczas pobierania modułu 2 przez serwer, co poprawia czas ładowania.

Oprócz tego używają techniki o nazwie z długim sondowaniem. Dzięki protokołowi HTTP 1.1 mogą korzystać z trwałego połączenia i nie muszą się martwić limitami czasu. Kiedy strona jest renderowana, skrypt po stronie klienta wysyła żądanie AJAX do Facebooka, aby zasadniczo "wysłuchać" zdarzenia. Będzie tam siedzieć i słuchać, aż zdarzy się wydarzenie. W międzyczasie przeglądarka będzie wyglądać jak "ładująca" dane.

Gdy zdarzenie zostanie wywołane na końcu Facebooka (powiedzmy, że ktoś skomentował twój wpis na ścianie), FB wyśle tę odpowiedź z powrotem do klienta, aby wywołać odpowiednie wywołania zwrotne (np. Wyskakując z małej podpowiedzi narzędzia, informując o komentarz) i NATYCHMIAST wysłać kolejne żądanie do FB, aby odsłuchać następne wydarzenie.

Źródło

2012-01-30 18:18:24 AlienWebguy

W jaki sposób Facebook pokazuje postęp ładowania przeglądarki podczas ładowania strony AJAX?

Odpowiedz

Powiązane problemy