Ändern Adressleiste URL in AJAX App Current State to Match

stimmen
160

Ich schreibe eine AJAX-Anwendung, aber wenn der Benutzer über die App bewegt, würde ich die URL in der Adressleiste wie trotz des Mangels an Seite neu geladen zu aktualisieren. Im Grunde genommen, ich möchte für sie an irgendeiner Stelle ein Lesezeichen zu können und damit auf den aktuellen Zustand zurückzukehren.

Wie gehen die Menschen restfulness in AJAX-Anwendungen beibehalten?

Veröffentlicht am 04/08/2008 um 18:53
quelle vom benutzer
In anderen Sprachen...                            


8 antworten

stimmen
116

Die Art und Weise , dies zu tun ist zu manipulieren , location.hashwenn AJAX - Updates in einer Zustandsänderung zur Folge hat, dass Sie eine diskrete URL haben mögen. Zum Beispiel, wenn Ihre Seite URL lautet:

http://example.com/

Wenn eine Client-Seite Funktion diesen Code ausgeführt:

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

location.hash = 'foo';

Dann würde die URL angezeigt im Browser aktualisiert werden:

http://example.com/#foo

Dies ermöglicht es Benutzern, ein Lesezeichen auf den „foo“ Zustand der Seite, und die Browser-History verwenden, um zwischen Staaten zu navigieren.

Mit diesem Mechanismus vorhanden, müssen Sie dann den Hash-Teil der URL zu analysieren, auf der Client-Seite JavaScript mit dem entsprechenden Anfangszustand zu erzeugen und anzuzeigen, als Fragment-IDs (der Teil nach dem #) nicht auf dem gesendeten Server.

Ben Alman des hashchange Plugin macht das letztere ein Kinderspiel , wenn Sie jQuery verwenden.

Beantwortet am 04/08/2008 um 19:04
quelle vom benutzer

stimmen
18

Schauen Sie sich Websites wie book.cakephp.org. Diese Seite ändert die URL ohne den Hash zu verwenden und AJAX verwenden. Ich bin mir nicht sicher, wie es es genau funktioniert, aber ich habe versucht, es herauszufinden. Wenn jemand weiß, lassen Sie es mich wissen.

Auch github.com wenn sie bei einer Navigation innerhalb eines bestimmten Projekt suchen.

Beantwortet am 13/02/2011 um 20:47
quelle vom benutzer

stimmen
17

Es ist unwahrscheinlich , dass der Schriftsteller will seine Besucher neu zu laden oder zu umleiten , wenn Ajax. Aber warum nicht HTML5 ist verwenden pushState/ replaceState?

Sie werden in der Lage , die addressbar so viel zu ändern , wie Sie möchten. Erhalten Sie natürlich aussehende Urls, mit AJAX.

Schauen Sie sich den Code auf meinem neuesten Projekt: http://iesus.se/

Beantwortet am 27/04/2011 um 09:09
quelle vom benutzer

stimmen
12

Dies ist ähnlich zu dem, was Kevin sagte. Sie können Ihren Client-Zustand als ein Javascript-Objekt haben, und wenn Sie den Zustand speichern mögen, serialisiert das Objekt (mit JSON und Base64-Codierung). Anschließend können Sie das Fragment des href auf diese Zeichenfolge festgelegt.

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 wird den neuen Zustand als neuer Standort (so die Zurück-Taste wird sie an die vorherige Stelle nehmen) behandeln. Letzteres nicht der Fall.

Beantwortet am 04/08/2008 um 19:02
quelle vom benutzer

stimmen
3

Wenn OP oder andere noch nach einer Möglichkeit, Geschichte zu tun ändern Browser Zustand zu ermöglichen, mit pushstate und replaceState, wie Iesus vorgeschlagen, ist der ‚richtige‘ Weg, es jetzt zu tun. Es ist Hauptvorteil gegenüber location.hash zu sein scheint, dass es tatsächlich Urls schafft, nicht nur Hashes. Wenn Browser-History-Hashes verwendet, wird gespeichert und dann mit Javascript deaktiviert revisited, wird die App nicht funktionieren, da die Hash-Werte nicht an den Server gesendet werden. Wenn jedoch verwendet pushstate wurde, wird die gesamte Strecke an den Server gesendet werden, die Sie dann bauen können in geeigneter Weise auf die Strecken zu reagieren. Ich sah ein Beispiel, wo die gleichen Schnurrbart Vorlagen sowohl auf dem Server und der Client-Seite verwendet wurden. Wenn der Kunde hatte Javascript aktiviert, würde er bissig Antworten erhalten, indem den Roundtrip zum Server zu vermeiden, aber der App funktionieren würde völlig in Ordnung, ohne Javascript. So kann die App anmutig in Abwesenheit von Javascript degradieren.

Auch ich glaube, es gibt einige Rahmen da draußen ist, mit einem Namen wie history.js. Für Browser, die HTML5 unterstützen, verwendet es pushstate, aber wenn der Browser das nicht unterstützt, es fällt automatisch zurück Hashes zu verwenden.

Beantwortet am 23/06/2011 um 10:20
quelle vom benutzer

stimmen
3

Die window.location.hash Methode ist die bevorzugte Art und Weise , Dinge zu tun. Für eine Erklärung, wie es zu tun, Ajax Patterns - Einzigartige URLs .

YUI hat eine Implementierung dieses Musters als ein Modul, das zusammen mit Umschreiben der Adresse mit der Hash für das Erhalten der Zurück - Taste arbeitet IE spezifische Arbeit arounds umfasst. YUI Browser History Manager .

Andere Rahmenbedingungen haben auch ähnliche Implementierungen. Der wichtige Punkt ist, wenn Sie die Geschichte arbeiten zusammen mit dem Umschreiben der Adresse mögen, müssen die verschiedenen Browser unterschiedliche Möglichkeiten, es zu handhaben. (Dies ist detailliert in den ersten Link Artikel.)

IE braucht einen Iframe basierend Hack, wo Firefox Doppel Geschichte produzieren die gleiche Methode verwenden.

Beantwortet am 31/03/2009 um 06:54
quelle vom benutzer

stimmen
3

SWFAddress arbeitet in Flash & Javascript-Projekten und können Sie ein Lesezeichen URLs (unter Verwendung der Hash-Verfahren, das oben erwähnt) sowie geben Sie Back-Taste Unterstützung erstellen.

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

Beantwortet am 01/09/2008 um 14:43
quelle vom benutzer

stimmen
2

Überprüfen Sie, ob Benutzer ‚in‘ die Seite ist, wenn Sie auf die URL-Leiste klicken, javascript sagt Ihnen aus Seite sind. Wenn Sie die URL-Leiste ein und drücken Sie ändern ‚ENTER‘ mit dem Symbol ‚#‘ innerhalb es dann gehen Sie in die Seite wieder, ohne Klick auf die Seite manuell mit der Maus-Cursor, dann ein keyboad Ereignisbefehl (document.onkeypress) von Javascript wird der Lage sein, zu überprüfen, ob es die JavaScript für eine Umleitung ist eingeben und aktiv. Sie können überprüfen, ob Benutzer auf der Seite mit window.onfocus sind und prüfen, ob er mit window.onblur out ist.

Ja, es ist möglich.

;)

Beantwortet am 14/10/2010 um 00:18
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more