ComputerScience

Un problème récurent lorsque l'on développe une application « Web 2.0 » est l'utilisation du bouton back par l'utilisateur.

Dans la plupart des cas, les appels AJAX ne sont pas historisés amenant a une page qui ne correspond plus à la dernière action de l'utilisateur.

Ramener l'utilisateur à la visu après son dernier appel Ajax ne résoudrait pas tous les problèmes, mais amènerait déjà une amélioration.

Au moins deux approches pour corriger ce problème existent.

– Utiliser un framework gérant un historique au niveau du serveur et ramener une information cohérente. Cette approche bien que la plus fiable entraine une complexité au niveau du développement, des temps de chargements allongés, une surcharge en trafic réseau qui ne saurait en faire une alternative raisonnable dans la plupart des développements “Agile”.

– Utiliser un framework simulant un changement de page apres une activité AJAX permettant de “forcer” le navigateur a ajouter un evenement affectant l'historique. Le coup d'intégration de cette solution est variable en fonction de la méthode utilisée mais reste inférieure a une solution serveur.

La deuxième approche est dans la plupart des cas retenue, elle peut elle même se décliner en plusieurs sous approche :

– Intégration simple : intégration au niveau des liens et bouton d'un handler gardant l'état précédent.

– Intégration spécifique : Au retour des appels Ajax appeler une méthode permettant d'historiser le changement.

Même si l'intégration spécifique est un peu plus couteuse, personnellement je préfère utiliser cette dernière.

Liens :

http://code.google.com/p/reallysimplehistory/

http://www.balupton.com/projects/jquery-history

http://www.balupton.com/#/projects/jquery-ajaxy

Mais techniquement quel est le principe de cette seconde approche ?

C'est on ne peu plus simple, elle utilise une des fonctions existant depuis la nuit des temps en HTML, les liens inter-ancre :

goto

le navigateur historise un evenement lors de cette navigation. Il ne reste plus qu'a ramener en javascript le contenu correspondant au #madeuxiemeancre

AJAX – Introducing AJAX Navigations