URL bei AJAX-Aufruf aktualisieren?

Im Moment ist das größte Problem, das ich bei der Verwendung von AJAX habe, die Tatsache, dass, wenn ich AJAX auf einer Seite verwende, zu einer anderen Seite gehe und dann die Zurück-Schaltfläche des Browsers verwende, um zurückzugehen, was mit AJAX geändert wurde, ist weg.

Ich habe darüber nachgedacht, die zu verwenden jQuery-Adressen Plugin, um dieses Problem zu lösen, aber ich mag es nicht, wie es die URL nur mit “#whatever.html” ergänzt, anstatt sie vollständig zu ändern.

Idealerweise möchte ich, dass die URL von “www.example.com/p:2/” zu “www.example.com/p:3/” wechselt, wenn ich den entsprechenden AJAX-Aufruf tätige.

Ist das überhaupt möglich?

Mit HTML5 ist das möglich. Sie können als Beispiel eine GitHub- oder Vkontakte-Site testen.

Die beste Antwort ist hier: Ändern Sie die URL im Browser, ohne die neue Seite per JavaScript zu laden

Es heißt, dass Sie die Funktion history.pushState für diese Zwecke verwenden können. Diese Lösung funktioniert jedoch nur in HTML5-kompatiblen Browsern. Andernfalls müssen Sie die Hash-Methode verwenden.

Nein, das ist nicht möglich. Update: Es ist jetzt über die HTML5 History API möglich – siehe Razbakovs Antwort.

Ich hoffe, Sie erkennen, dass Sie versuchen, ein äußerst schwieriges Problem anzugehen.

Nehmen wir an, Ihre URL sieht so aus

http://example.com/mypage/

Wenn Sie die Fensterposition programmgesteuert in ändern

http://example/mypage/1/

Der Browser übernimmt und versucht, zu dieser Seite zu navigieren, da kommt Ihr ausgefallener Ajax-Code!

Was ist also die Alternative? Sie verwenden ein URL-Fragment.

Angenommen, Sie haben eine URL wie diese,

http://example.com/anotherpage/#section

Der Browser wird zuerst geladen http://example.com/anotherpage/ und versuchen Sie, einen Anker namens “Abschnitt” zu finden, und scrollen Sie zu dieser Stelle. Dieses Verhalten wird vom Plug-in „Addresses“ ausgenutzt. Dies ähnelt der Funktionsweise dieser “Scroll To Top”-Links.

Also, wenn Sie auf der Seite sind

http://example.com/mypage/

und ändern Sie die URL in

http://example.com/mypage/#1

Der Browser lädt keine neue Seite, sondern versucht stattdessen, den Anker mit dem Namen „1“ zu finden und zu diesem Anker zu scrollen.

Selbst wenn Sie es geschafft haben, der URL Fragmente hinzuzufügen, heißt das noch lange nicht, dass die Arbeit erledigt ist. Wenn der Benutzer die Zurück-Schaltfläche drückt, wird DOM zurückgesetzt und Sie müssen diese Fragmente analysieren und das DOM neu erstellen. Es ist definitiv nicht trivial.

Dieses Problem kann mit history.js gelöst werden. https://github.com/browserstate/history.js

pjax handhabt dies in modernen Browsern elegant.

Nach dem AJAX-Aufruf können wir die Client-URL mit history.pushState aktualisieren. Bitte finden Sie die folgende Syntax und das Beispiel

Syntax: history.pushState (obj, obj.Title, obj.Url);

Beispiel:

var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);