Ändern Sie die URL der Adressleiste in der AJAX-App so, dass sie dem aktuellen Status entspricht

Ich schreibe eine AJAX-App, aber während sich der Benutzer durch die App bewegt, möchte ich, dass die URL in der Adressleiste aktualisiert wird, obwohl keine Seiten neu geladen werden. Grundsätzlich möchte ich, dass sie jederzeit Lesezeichen setzen und damit zum aktuellen Zustand zurückkehren können.

Wie gehen Menschen mit der Aufrechterhaltung von RESTfulness in AJAX-Apps um?

Die Möglichkeit hierfür besteht darin, zu manipulieren, location.hashwenn AJAX-Aktualisierungen zu einer Statusänderung führen, für die Sie eine diskrete URL wünschen. Zum Beispiel, wenn die URL Ihrer Seite lautet:

http://example.com/

Wenn eine clientseitige Funktion diesen Code ausgeführt hat:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Dann wird die im Browser angezeigte URL aktualisiert auf:

http://example.com/#foo

Auf diese Weise können Benutzer den Status "foo" der Seite mit einem Lesezeichen versehen und mithilfe des Browserverlaufs zwischen den Status navigieren.

Wenn dieser Mechanismus vorhanden ist, müssen Sie den Hash-Teil der URL auf der Clientseite mithilfe von JavaScript analysieren, um den entsprechenden Anfangszustand zu erstellen und anzuzeigen, da Fragmentkennungen (der Teil nach dem #) nicht an die gesendet werden Server.

Das Hashchange-Plugin von Ben Alman macht letzteres zum Kinderspiel, wenn Sie jQuery verwenden.

Schauen Sie sich Websites wie book.cakephp.org an. Diese Site ändert die URL ohne Verwendung des Hashs und verwendet AJAX. Ich bin mir nicht sicher, wie es genau funktioniert, aber ich habe versucht, es herauszufinden. Wenn jemand weiß, lass es mich wissen.

Auch github.com beim Betrachten einer Navigation innerhalb eines bestimmten Projekts.

Es ist unwahrscheinlich, dass der Autor seinen Besucher bei Verwendung von Ajax neu laden oder umleiten möchte. Aber warum nicht HTML5s pushState/ verwenden replaceState?

Sie können die Adressleiste beliebig ändern. Holen Sie sich mit AJAX natürlich aussehende URLs.

Schauen Sie sich den Code meines neuesten Projekts an: http://iesus.se/

Dies ähnelt dem, was Kevin gesagt hat. Sie können Ihren Client-Status als Javascript-Objekt festlegen. Wenn Sie den Status speichern möchten, serialisieren Sie das Objekt (mithilfe der JSON- und Base64-Codierung). Sie können dann das Fragment der href auf diese Zeichenfolge setzen.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

Der erste Weg behandelt den neuen Status als neuen Ort (so dass die Zurück-Schaltfläche sie zum vorherigen Ort bringt). Letzteres nicht.

SWFAddress funktioniert in Flash- und Javascript-Projekten und ermöglicht das Erstellen von Lesezeichen-URLs (unter Verwendung der oben genannten Hash-Methode) sowie die Unterstützung von Back-Buttons.

http://www.asual.com/swfaddress/

Die window.location.hash-Methode ist die bevorzugte Methode. Eine Erklärung dazu finden Sie unter Ajax-Muster - Eindeutige URLs .

YUI hat eine Implementierung dieses Musters als Modul, das IE-spezifische Problemumgehungen enthält, damit die Schaltfläche "Zurück" funktioniert und die Adresse mithilfe des Hashs neu geschrieben wird. YUI Browser History Manager .

Andere Frameworks haben ähnliche Implementierungen. Der wichtige Punkt ist, wenn Sie möchten, dass der Verlauf zusammen mit dem Umschreiben der Adresse funktioniert, benötigen die verschiedenen Browser unterschiedliche Methoden, um damit umzugehen. (Dies wird im ersten Link-Artikel beschrieben.)

IE benötigt einen iframe-basierten Hack, bei dem Firefox mit derselben Methode einen doppelten Verlauf erstellt.

Wenn OP oder andere noch nach einer Möglichkeit suchen, den Browserverlauf zu ändern, um den Status zu aktivieren, ist die Verwendung von pushState und replaceState, wie von IESUS vorgeschlagen, die 'richtige' Methode, dies jetzt zu tun. Der Hauptvorteil gegenüber location.hash scheint darin zu liegen, dass tatsächliche URLs erstellt werden, nicht nur Hashes. Wenn der Browserverlauf mit Hashes gespeichert und dann mit deaktiviertem Javascript erneut aufgerufen wird, funktioniert die App nicht, da die Hashes nicht an den Server gesendet werden. Wenn jedoch pushState verwendet wurde, wird die gesamte Route an den Server gesendet, den Sie erstellen können, um angemessen auf die Routen zu reagieren. Ich habe ein Beispiel gesehen, in dem sowohl auf der Server- als auch auf der Clientseite dieselben Schnurrbartvorlagen verwendet wurden. Wenn der Client Javascript aktiviert hätte, würde er schnelle Antworten erhalten, indem er den Roundtrip zum Server vermeidet. Aber die App würde ohne das Javascript einwandfrei funktionieren. Somit kann sich die App ohne Javascript elegant verschlechtern.

Ich glaube auch, dass es da draußen einen Rahmen gibt, mit einem Namen wie history.js. Für Browser, die HTML5 unterstützen, wird pushState verwendet. Wenn der Browser dies jedoch nicht unterstützt, werden automatisch Hashes verwendet.

Überprüfen Sie, ob sich der Benutzer auf der Seite befindet. Wenn Sie auf die URL-Leiste klicken, zeigt Javascript an, dass Sie nicht auf der Seite sind. Wenn Sie die URL-Leiste ändern und die EINGABETASTE mit dem Symbol '#' drücken, gelangen Sie erneut auf die Seite, ohne manuell mit dem Mauszeiger auf die Seite zu klicken. Anschließend wird ein Befehl für ein Tastaturereignis (document.onkeypress) aus Javascript ausgeführt Sie können überprüfen, ob es eingegeben wurde, und das Javascript für die Umleitung aktivieren. Sie können überprüfen, ob sich der Benutzer auf der Seite mit window.onfocus befindet, und überprüfen, ob er mit window.onblur nicht erreichbar ist.

Ja, das ist möglich.

;)