it-swarm.com.de

URL aktualisieren am AJAX Anruf?

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

Ich habe darüber nachgedacht, das jQuery Addresss Plugin zu verwenden, um dieses Problem zu lösen, aber es gefällt mir nicht, dass die URL nur mit "# whatever.html" geändert wird, 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 die entsprechenden AJAX Anruf.

Ist das überhaupt möglich?

20
dougoftheabaci

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

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 Position des Fensters programmgesteuert in ändern 

http://example/mypage/1/

Der Browser übernimmt und versucht, zu dieser Seite zu navigieren, dort geht Ihr schicker Ajax-Code!

Also, was ist die Alternative? Sie verwenden ein URL-Fragment. 

Nehmen wir an, Sie haben eine URL wie diese.

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

Der Browser lädt zuerst http://example.com/anotherpage/ und versucht, einen Anker namens 'section' zu finden und zu diesem Ort zu scrollen. Dieses Verhalten wird vom Plug-In "Adressen" ausgenutzt. Dies ist vergleichbar mit der Funktionsweise dieser "Nach oben scrollen" -Links.

Also wenn du auf der Seite bist

http://example.com/mypage/

und ändern Sie die URL in

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

Der Browser lädt keine neue Seite, sondern versucht, den Anker '1' zu finden und zu diesem Anker zu scrollen. 

Auch wenn Sie der URL Fragmente hinzugefügt haben, bedeutet dies nicht, dass die Arbeit erledigt ist. Wenn der Benutzer die Zurück-Taste drückt, wird DOM zurückgesetzt, und Sie müssen diese Fragmente analysieren und das DOM neu erstellen. Es ist definitiv nicht trivial.

19
SolutionYogi

Mit HTML5 ist das möglich. Sie können beispielsweise die GitHub- oder Vkontakte-Site testen.

Die beste Antwort ist hier: Ändern Sie die URL im Browser, ohne die neue Seite mit 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. Ansonsten müssen Sie die Hash-Methode verwenden.

19

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

5
v4r

pjax behandelt dies in modernen Browsern elegant.

2
duckegg

Nach dem Aufruf von AJAX können Sie die Client-URL mithilfe von history.pushState aktualisieren. Hier finden Sie die folgende Syntax und ein Beispiel

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

Beispiel:

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