Modifier l'URL de la barre d'adresse dans l'application AJAX pour faire correspondre l'état actuel

Question

Je vous écris une application AJAX, mais que l’utilisateur passe à travers le app, je voudrais que l’URL dans la barre d’adresse à jour malgré le manque de pages sont rechargées. Fondamentalement, je voudrais qu’ils soient en mesure de marquer à tout moment et ainsi revenir à l’état actuel.

Comment les gens traitent maintenir reposées dans les applications AJAX ?

Answer 1

La façon de le faire consiste à manipuler location.hash lors de l'AJAX mises à jour suite à un changement d'état que vous aimeriez avoir un discret URL. Par exemple, si votre url de la page est:

http://example.com/

Si un client fonction côté exécuté ce code:

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

location.hash = 'foo';

Ensuite, l'URL affichée dans le navigateur mis à jour à:

http://example.com/#foo

Cela permet aux utilisateurs de créer un signet de la "foo" l'état de la page, et l'utilisation de l'historique du navigateur pour naviguer entre les états.

Avec ce mécanisme mis en place, vous aurez alors besoin d'analyser le hachage partie de l'URL sur le côté client à l'aide de JavaScript pour créer et afficher la appropriée de l'état initial, comme des identificateurs de fragment (la partie après le #) ne sont pas envoyées au serveur.

Ben Alman du hashchange plugin fait de ce dernier un jeu d'enfant si vous êtes à l'aide de jQuery.

Answer 2

Regardez sur des sites comme book.cakephp.org. Ce site change l’URL sans utiliser le hachage et l’utilisation AJAX. Je ne sais pas comment il le fait exactement, mais j’ai essayé de le comprendre. Si quelqu'un sait, faites le moi savoir.

Github.com aussi lorsque vous regardez un naviguer au sein d’un certain projet.

Answer 3

Il est peu probable que l’auteur veut recharger ou rediriger son visiteur lors de l’utilisation d’Ajax. Mais pourquoi ne pas utiliser de HTML5 / ?

Vous serez en mesure de modifier la barre d’adresses, autant que vous le souhaitez. Obtenir des urls à la recherche naturelles, avec ajax : http://www.w3.org/TR/html5/history.html#the-history-interface

Découvrez le code sur mon dernier projet : http://iesus.se/

Answer 4

Ceci est similaire à ce qu’a dit Kevin. Vous pouvez avoir votre état de client comme un objet de javascript, et lorsque vous souhaitez enregistrer l’État, vous sérialisez l’objet (en utilisant JSON et codage base64). Vous pouvez ensuite définir le fragment de l’attribut href pour cette chaîne.

La première façon traitera le nouvel État comme un nouvel emplacement (donc le bouton back conduira à l’emplacement précédent). Ce dernier ne fonctionne pas.