Mettre à jour l'URL sur un appel AJAX?

Question

Maintenant le plus gros problème que j'ai avec l'utilisation d'AJAX est le fait que si j'utilise AJAX sur une page, allez à une autre page, puis utilisez le bouton retour du navigateur pour revenir à tout ce qui a été modifié avec AJAX.

J'ai pensé à utiliser le plugin jQuery Addresss pour résoudre ce problème, mais je n'aime pas comment il modifie seulement l'URL avec "# whatever.html" au lieu de le changer complètement.

Idéalement, je souhaite que l'URL passe de "www.example.com/p:2/" à "www.example.com/p:3/" lorsque j'effectue l'appel AJAX correspondant .

Est-ce possible?

Answer 1

Non, ce n'est pas possible. Mise à jour: il est désormais possible via l'API HTML5 History - voir razbakov's answer.

J'espère que vous vous rendez compte que vous essayez de résoudre un problème extrêmement difficile.

Disons que votre URL ressemble

http://example.com/mypage/ 

Si vous modifiez l'emplacement de la fenêtre par programmation à

http://example/mypage/1/ 

Browser prendra le relais et essayer de naviguer à cette page, il va votre fantaisie code ajax !

Alors, quelle est l'alternative? Vous utilisez un fragment d'URL.

Disons que vous avez une URL comme celui-ci,

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

Browser première charge http://example.com/anotherpage/ et essayer de trouver un point d'ancrage « section » du nom et faites défiler jusqu'à cet endroit. Ce comportement est exploité par le plugin 'Addresses'. Ceci est similaire à la façon dont les liens "Scroll To Top" fonctionnent.

Donc, si vous êtes sur la page

http://example.com/mypage/ 

et de modifier l'URL

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

Browser ne se charge pas nouvelle page mais plutôt essayer de trouver une ancre nommée « 1 » et faites défiler jusqu'à ce que ancre.

Même si vous avez réussi à ajouter des fragments à l'URL, cela ne signifie pas que le travail est terminé. Si l'utilisateur appuie sur le bouton de retour, DOM sera réinitialisé et vous devrez analyser ces fragments et recréer le DOM. C'est définitivement non-trivial.

Answer 2

C'est possible avec HTML5. Vous pouvez tester comme exemple le site GitHub ou Vkontakte.

La meilleure réponse est ici: Change the URL in the browser without loading the new page using JavaScript

Il dit que vous pouvez utiliser la fonction history.pushState à ces fins. Mais cette solution ne fonctionnera que dans les navigateurs compatibles HTML5. Sinon, vous devez utiliser la méthode de hachage.

Answer 3

Ce problème peut être résolu à l'aide de history.js.https://github.com/browserstate/history.js

Answer 4

pjax gère cela gracieusement dans un navigateur moderne. Après l'appel AJAX, nous pouvons mettre à jour l'URL du client en utilisant history.pushState.

Answer 5

Veuillez trouver la syntaxe et l'exemple ci-dessous

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

Exemple:

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