Links wie Twitter, Hash-Bang # machen! URL

Question

Mögliche Duplizieren:
What’s the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

Ich habe mich gefragt, wie Twitter seine Verbindungen funktioniert.

Wenn Sie in den Quellcode schauen, verwenden Sie die Links wie/#!/I/connect oder/#!/I/discover, aber ihnen ist keine JavaScript-Funktion wie load ('connect') oder etwas, und das erfordert kein erneutes Laden der Seite. Es ändert nur den Seiteninhalt.

Ich sah this Seite, aber dann müssten alle diese Dateien existieren, und Sie könnten nicht einfach direkt zu einem von ihnen gehen. Ich stelle mir vor, dass auf Twitter jede dieser Dateien nicht existiert, und dass es in einer anderen Methode behandelt wird. Bitte korrigiere mich, wenn ich falsch liege.

Gibt es eine Möglichkeit, diesen Effekt zu replizieren? Wenn ja, gibt es ein Tutorial, wie man das macht?

Answer 1

„Hasch-Bang“ Navigation, wie es manchmal, ...

genannt

http://whatever.com/path/to/#!/some-ajax-state 

... ist eine temporäre Lösung für ein vorübergehendes Problem, das schnell ein Nicht-Thema dank modernen immer Browserstandards. Aller Voraussicht nach wird Twitter es auslaufen lassen, wie Facebook es bereits tut.

Es ist die Kombination mehrerer Konzepte ...

In der Vergangenheit diente ein Link zwei Zwecken: Es hat ein neues Dokument geladen und/oder gescrollt zu einem eingebetteten Anker nach unten, wie mit dem angegebenen Hash (#).

http://whatever.com/script.php#fourth-paragraph 

Alles, was in einer URL nach dem Hash wurde nicht vom Server angefordert, aber der Seite im Browser gesucht. Das alles funktioniert immer noch gut.

Mit der Übernahme von AJAX konnte neuer Inhalt in die aktuelle (bereits geladene) Seite geladen werden. Bei diesem dynamischen Laden traten mehrere Probleme auf: 1) Es gab keine eindeutige URL zum Binden oder Verknüpfen mit diesem neuen Inhalt, 2) die Suche würde es niemals sehen.

Einige kluge Leute lösten das erste Problem, indem sie den Hash als eine Art "Zustand" -Referenz verwendeten, um in Verbindungen & Bookmarks eingeschlossen zu werden. Nachdem das Dokument geladen wurde, liest der Browser den Hash und führt die AJAX-Anforderungen aus, wobei die Seite mit ihren dynamischen AJAX-Änderungen angezeigt wird.

http://whatever.com/script.php#some-ajax-state 

Dies löste das AJAX Problem, aber die Suchmaschine Problem existiert noch. Suchmaschinen laden keine Seiten und führen Javascript wie einen Browser aus.

Google zur Rettung. Google schlug ein Schema vor, bei dem jede URL mit einem Hash-Knall (#!) Anstelle eines Hashs (#) dem Such-Bot vorschlug, dass es eine alternative URL für die Indexierung gab, die unter anderem eine Variable "_escaped_fragment_" enthielt Dinge. Lesen Sie hier, es ...

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

heute mit der Verabschiedung des Javascript pushstate in den meisten gängigen Browsern, all dies ist obsolet. Wenn der Inhalt dynamisch geladen oder geändert wird, kann die aktuelle Seiten-URL mit pushstate geändert werden, ohne dass die Seite geladen wird. Wenn gewünscht, bietet dies eine echte Arbeits-URL für Lesezeichen & Geschichte. Links können dann gemacht werden, wie sie immer waren, ohne Hashes & Hash-Pony.

Ab heute, wenn Sie Facebook in einem älteren Browser laden, sehen Sie die Hash-Pony, aber ein aktueller Browser wird die Verwendung von Pushstate demonstrieren.

Answer 2

Sie möchten vielleicht mehr auf Unique URLs überprüfen.

Es lädt die Seite über AJAX und analysiert den "Hash" (die Werte, die hinter dem "#" stehen), um zu bestimmen, welche Seite geladen wird. Auch diese Methode wird aufgrund der Art verwendet, dass AJAX-Anfragen nicht zum Browserverlauf zählen, also der "Zurück-Button bricht". Der Browser speichert jedoch die Hash-Änderungen in der Historie.

Mit Hashes und der Tatsache, dass Sie Hashes verwenden können, um Seiten zu bestimmen, können Sie sagen, dass Sie AJAX angeforderte Seiten "in der Historie" behalten können. Hinzu kommt, dass Hash-URLs nur URLs sind, und sie können auch mit dem Hash-Wert als Lesezeichen versehen werden, sodass Sie auch AJAX-angeforderte Seiten als Lesezeichen speichern können.