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

J’écris une application AJAX, mais au fur et à mesure que l’utilisateur se déplace dans l’application, j’aimerais que l’URL de la barre d’adresse soit mise à jour malgré le manque de rechargement de la page. En gros, j’aimerais qu’ils puissent marquer à tout moment et revenir ainsi à l’état actuel.

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

La manière de faire est de manipuler location.hash lorsque les mises à jour AJAX entraînent un changement d’état que 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 a exécuté ce code:

 // AJAX code to display the "foo" state goes here. location.hash = 'foo'; 

Ensuite, l’URL affichée dans le navigateur sera mise à jour pour:

http://example.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 parsingr la partie hachage de l’URL côté client en utilisant JavaScript pour créer et afficher l’état initial approprié, car les identificateurs 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.

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

Aussi github.com en regardant une navigation dans un certain projet.

Il est peu probable que l’auteur veuille recharger ou redirect son visiteur lorsqu’il utilise Ajax. Mais pourquoi ne pas utiliser le 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 sur mon dernier projet: http://iesus.se/

Ceci est similaire à ce que Kevin a dit. Vous pouvez avoir votre état client en tant qu’object javascript et, lorsque vous souhaitez enregistrer l’état, vous sérialisez l’object (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 façon traitera le nouvel état comme un nouvel emplacement (le bouton retour les amènera donc à l’emplacement précédent). Ce dernier ne le fait pas.

SWFAddress fonctionne dans les projets Flash et Javascript et vous permet de créer des URL marquables (à l’aide de la méthode de hachage mentionnée ci-dessus) et de vous aider à utiliser le bouton retour.

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

La méthode window.location.hash est la manière préférée de faire les choses. Pour une explication sur la façon de procéder, Ajax Patterns – URL uniques .

YUI a une implémentation de ce modèle en tant que module, qui inclut des solutions spécifiques à IE pour que le bouton retour fonctionne avec la réécriture de 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 voulez que l’historique fonctionne avec 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 iframe, où Firefox produira un double historique en utilisant la même méthode.

Si OP ou d’autres sont toujours à la recherche d’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 sur location.hash semble être qu’il crée des URLs réelles, 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. Toutefois, si pushState a été utilisé, l’intégralité de l’itinéraire sera envoyée au serveur, que vous pourrez ensuite créer pour répondre de manière appropriée aux itinéraires. J’ai vu un exemple où les mêmes modèles de moustache étaient utilisés à la fois sur le serveur et sur le client. Si javascript était activé sur le client, il obtiendrait des réponses rapides en évitant l’aller-retour au serveur, mais l’application fonctionnerait parfaitement bien sans le javascript. Ainsi, l’application peut se dégrader avec élégance en l’absence de javascript.

En outre, je crois qu’il existe un cadre, 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 utilise automatiquement des hachages.

Vérifiez si l’utilisateur est dans la page, lorsque vous cliquez sur la barre d’URL, JavaScript indique que vous êtes hors de la page. Si vous changez la barre d’URL et appuyez sur ‘ENTER’ avec le symbole ‘#’, vous revenez dans la page, sans cliquer sur la page manuellement avec le curseur de la souris, puis une commande d’événement keyboad (document.onkeypress) de javascript être capable de vérifier si elle est entrée et active 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 sorti avec window.onblur.

Oui, c’est possible.

😉