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

Question

J'écris une application AJAX, mais à mesure que l'utilisateur se déplace dans l'application, j'aimerais que l'URL dans la barre d'adresse soit mise à jour malgré le manque de rechargement de page.Fondamentalement, j'aimerais qu'ils puissent créer un signet à tout moment et ainsi revenir à l'état actuel.

Comment les gens gèrent-ils le maintien de RESTfulness dans les applications AJAX ?

Answer 1

La façon d'y parvenir est de manipuler location.hash lorsque les mises à jour AJAX entraînent un changement d'état, vous souhaitez avoir une URL discrète.Par exemple, si l'URL de votre page est :

http://exemple.com/

Si une fonction côté client exécutait ce code :

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

location.hash = 'foo';

Ensuite, l'URL affichée dans le navigateur serait mise à jour pour :

http://exemple.com/#foo

Cela permet aux utilisateurs de mettre en signet l'état « foo » de la page et d'utiliser l'historique du navigateur pour naviguer entre les états.

Avec ce mécanisme en place, vous devrez ensuite analyser la partie de hachage de l'URL côté client à l'aide de JavaScript pour créer et afficher l'état initial approprié, car les identifiants de fragment (la partie après le #) ne sont pas envoyés au serveur.

Le plugin hashchange de Ben Alman rend ce dernier un jeu d'enfant si vous utilisez jQuery.

Answer 2

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

Également github.com lorsque vous examinez la navigation dans un certain projet.

Answer 3

Il est peu probable que l'auteur veuille recharger ou rediriger son visiteur lorsqu'il utilise Ajax.Mais pourquoi ne pas utiliser le HTML5 pushState/replaceState?

Vous pourrez modifier la barre d'adresse autant que vous le souhaitez. Obtenez des URL d’apparence naturelle avec AJAX.

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

Answer 4

Cela ressemble à ce que Kevin a dit.Vous pouvez avoir l'état de votre client sous la forme d'un objet javascript, et lorsque vous souhaitez enregistrer l'état, vous sérialisez l'objet (en utilisant l'encodage JSON et base64).Vous pouvez ensuite définir le fragment du href sur cette chaîne.

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

La première méthode traitera le nouvel état comme un nouvel emplacement (le bouton de retour les amènera donc à l'emplacement précédent).Ce dernier ne le fait pas.

Answer 5

SWFAddress fonctionne dans les projets Flash et Javascript et vous permet de créer des URL pouvant être ajoutées à vos favoris (en utilisant la méthode de hachage mentionnée ci-dessus) ainsi que de vous offrir la prise en charge du bouton de retour.

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

Answer 6

La méthode window.location.hash est la méthode privilégiée pour procéder.Pour une explication de la façon de procéder,Modèles Ajax – URL uniques.

YUI a une implémentation de ce modèle en tant que module, qui inclut des solutions spécifiques à IE pour faire fonctionner le bouton de retour et réécrire l'adresse à l'aide du hachage. Gestionnaire d'historique du navigateur YUI.

D'autres frameworks ont également des implémentations similaires.Le point important est que si vous souhaitez que l'historique fonctionne parallèlement à la réécriture de l'adresse, les différents navigateurs ont besoin de différentes manières de le gérer.(Ceci est détaillé dans le premier article du lien.)

IE a besoin d'un hack basé sur l'iframe, dans lequel Firefox produira un double historique en utilisant la même méthode.

Answer 7

Si OP ou d'autres cherchent toujours un moyen de modifier l'historique du navigateur pour activer l'état, utiliser pushState et replaceState, comme suggéré par IESUS, est la « bonne » façon de le faire maintenant.Son principal avantage par rapport à location.hash semble être qu'il crée de véritables URL, pas seulement des hachages.Si l'historique du navigateur utilisant les hachages est enregistré, puis revisité avec javascript désactivé, l'application ne fonctionnera pas, car les hachages ne sont pas envoyés au serveur.Cependant, si pushState a été utilisé, la totalité de la route sera envoyée au serveur, que vous pourrez ensuite créer pour répondre de manière appropriée aux routes.J'ai vu un exemple où les mêmes modèles de moustache étaient utilisés à la fois côté serveur et côté client.Si le client avait activé Javascript, il obtiendrait des réponses rapides en évitant l'aller-retour vers le serveur, mais l'application fonctionnerait parfaitement sans Javascript.Ainsi, l’application peut se dégrader gracieusement en l’absence de javascript.

De plus, je pense qu'il existe un framework, avec un nom comme history.js.Pour les navigateurs prenant en charge HTML5, il utilise pushState, mais si le navigateur ne le prend pas en charge, il revient automatiquement à l'utilisation de hachages.

Answer 8

Vérifiez si l'utilisateur est "dans" la page. Lorsque vous cliquez sur la barre d'URL, javascript indique que vous êtes hors page.Si vous modifiez la barre d'URL et appuyez sur "ENTRÉE" avec le symbole "#" à l'intérieur, puis vous accédez à nouveau à la page, sans cliquer manuellement sur la page avec le curseur de la souris, puis une commande d'événement keyboad (document.onkeypress) de javascript sera pouvoir vérifier s'il est saisi et activer le javascript pour la redirection.Vous pouvez vérifier si l'utilisateur est DANS la page avec window.onfocus et vérifier s'il est dehors avec window.onblur.

Ouais, c'est possible.

;)