W jaki sposób strony internetowe z wiadomościami, np. Forbes / Zdnet, bezproblemowo łączą jedną stronę w drugą?

Jeśli przejdziesz do np .:

Po przejściu na dół strony wczytywana jest historia New News, a adres URL mojej przeglądarki internetowej zmienia się na adres URL tej historii Next News. Zastanawiałem się więc, w jaki sposób strona internetowa może niemal natychmiast załadować następną stronę z niemal nieznacznym opóźnieniem między stronami. Czy są to na przykład: Wstępne pobieranie strony z historią Next News, a następnie naprawdę szybkie ładowanie strony?

javascript web-development web-applications html websites zordman
źródło

Naciśnij i przytrzymaj Endklawisz, a zobaczysz opóźnienie procesu ładowania.

MonkeyZeus

Ważniejsze pytanie brzmi: dlaczego to robią?

Odpowiedzi:

Krótka odpowiedź jest taka, że kod JavaScript strony po stronie klienta wykrywa, kiedy „zbliżysz się” do dołu strony, i prosi serwer o więcej danych, kiedy to nastąpi.

Bez uzyskania zbyt technicznej wiedzy nie przeładowują całej strony. Zamiast tego kod JavaScript na tej stronie żąda więcej danych od serwera, a następnie, gdy otrzymuje nowe dane, dodaje te dane do bieżącej strony. Części strony, które nie wymagają zmiany, pozostają całkowicie niezmienione.

Najnowocześniejszym sposobem na to jest użycie funkcji modyfikacji historii HTML5 , która wydaje się być tym, czego używają te strony.

Ixrec
źródło

W twoim opisie brakuje kroku: gdzie faktycznie zmieniają historię, wraz z dodawaniem kolejnych danych do strony. Który sprawia, że „najbardziej nowoczesny sposób robi to ” rodzaj niewygodne, ponieważ ten odnosi się do procesu modyfikacji historię, która w rzeczywistości nie dostać wymienionego w odpowiedzi. (Gramatycznie, to odsyła do pozostawiając resztę strony bez zmian, czy może do dodawania danych do strony, która jest zazwyczaj wykonane z AJAX, a nie można tego zrobić z historią-modyfikacji HTML5 funkcji.)

KRyan

A co ze zmianą adresu URL, jak to się dzieje bez wymuszania przeładowania? Ponieważ w linku przeładowanie „zmodyfikowanej strony” (np. /second) Powoduje błędy. Nie dzieje się tak w przypadku strony z wiadomościami OP - zmieniają adres URL dokładnie, abyś mógł go udostępnić.

OJFord

@OllieFord właśnie do tego służy interfejs API historii. history.pushStatei history.replaceStatepozwala zmienić adres URL na pasku adresu bez opuszczania bieżącej strony. Jest to bardziej nowoczesna zamiana starszej sztuczki polegającej na zmianie fragmentu adresu URL ( #something), z tą dużą zaletą, że interfejs API historii pozwala na wypychanie „prawdziwych” adresów URL, które serwer może uczestniczyć w generowaniu, podczas gdy fragment musi być obsługiwany całkowicie od strony klienta.

hobbs

Ah, dobrze. Ale jak powiedziałem, demo jest zepsute, co jest mylące.

OJFord,

Z jakiegoś powodu demo historii, które znałem, zostało całkowicie zepsute, gdy pojawiło się to pytanie, więc ten link był pierwszym, jaki udało mi się znaleźć, który w ogóle zadziałał. Możesz zaproponować lepszy link.

Ixrec,

Jeden wielki klucz do zrozumienia, co się dzieje: poprzez JavaScript można ustawić adres URL na pasku adresu bez przekierowywania użytkownika. Aby zobaczyć to w akcji, wklej poniższy kod do konsoli obsługiwanej przeglądarki. Zauważ, że zmienia pasek adresu na http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

Zaletą tego podejścia jest to, że jeśli zakładki użytkownika po przewinięciu do wątku, zakładka będzie wiedziała, gdzie wysłać użytkownika. Nieskończone przewijanie wyników wyszukiwania przez DeviantArt jest dobrym przykładem tego zachowania.

Brian
źródło

Zaraz, DeviantArt zaimplementował modyfikację historii w swoich wynikach wyszukiwania, więc możesz faktycznie link do / bookmark / w inny sposób nagrać określoną stronę? To ... całkiem coś. Jak długo jednak konkretne wyniki pozostają na określonej stronie dla określonego zapytania? Jeśli utworzysz zakładkę, nie spodziewałbym się, że jutro zobaczę te same wyniki na tej konkretnej stronie ... Muszę pamiętać, aby to zbadać.

KRyan,

@ Ryan po prostu modyfikuje offsetparametry, które pomijają określoną odległość w zestawie wyników. Ponieważ domyślna kolejność sortowania wydaje się być „popularna przez cały czas”, wyniki są prawdopodobnie nieco stabilne, ale zdecydowanie nie, jeśli zmienisz kolejność sortowania na „najnowszą” i poszukasz czegoś popularnego.

hobbs