Comment gérer une navigation en Ajax ?

accueil > veille > blog >

mai 08 2

La théorie mise en pratique avec jQuery

La problématique

Pourquoi une navigation en Ajax ?

Une navigation en Ajax a les avantages suivants par rapport à une navigation HTML standard :

pas de rechargement complet de la page, seul le contenu demandé est chargé, ce qui permet de gagner au niveau du temps de traitement de la page et de la bande passante utilisée.
possibilité d’avoir des effets de transition entre chaque chargement de page
permet d’éviter l’utilisation de frames

Au final, ces avantages permettent d’avoir une navigation plus rapide, plus performante et plus agréable visuellement. Cependant, d’autres problématiques apparaissent de fait :

Le site ne pourra plus fonctionner sans Javascript ce qui est au détriment de l’accessibilité (Accessibilité du Web). De plus, le référencement du site ne fonctionnera pas vu que les robots d’indexations des moteurs de recherches ne se servent pas du Javascript pour naviguer de lien en lien.
Le contenu courant de la page n’est plus lié à son URL
le bookmark d’une page du site ne correspond plus au contenu.
l’historique de navigation ne fonctionne plus.

De plus, une notion de décoration (ou d’habillage) de page apparaît. En effet, la première page appelée chargera tout le site (avec décoration), cette page contiendra tout le Dom HTML, balises <head/> pour le chargement des CSS et du JS, balise <body> pour le chargement d’un menu de navigation et enfin du contenu de la page.

Les chargements des pages suivantes seront sans décoration, c.-à-d. qu’ils ne chargeront que le contenu du site. Il faut donc trouver un système permettant de distinguer ces 2 types de chargement.

La théorie

Les 3 problèmes identifiés sont :

la navigation doit être possible en mode dégradé, c’est-à-dire sans Javascript
le contenu des pages doit être lié à l’url courante
la gestion de l’habillage des pages

Permettre une navigation dégradée

Les liens de la navigation seront générés avec des liens standards <a/> dont les attributs href mèneront vers les contenus, ie <a href=’/ma_categorie/contenu.html’/>. Ceci permettra aux robots d’indexation de naviguer de lien en lien dans le site permettant le référencement de celui-ci.

De plus, les liens <a/> participant à la navigation Ajax devront comporter un élément distinctif par rapport à des liens externes. Dans notre exemple, nous ajouterons l’attribut rel='history'.

Lier le contenu à l’URL

L’utilisation d’ancres permet de modifier la valeur d’une URL sans provoquer un rechargement de page. L’utilisation habituelle des ancres permet de faire des liens internes à une page (ie. très utilisé dans un wiki).

Une url sera de la forme : http://serveur.fr/#/categorie/contenu.html.

Pour lier notre contenu à l’URL, il est nécessaire :

de surcharger l’événement clic qui aura pour effet de mettre à jour l’ancre dans l’URL du navigateur
de détecter un changement de la valeur de l’ancre et faire la requête Ajax retournant le contenu de la page demandée

Dans le cas où un utilisateur rentre directement une URL complète sans ancre (ie. provenant d’un moteur de recherche), il faut prévoir une redirection vers la racine du site et en ajoutant dans l’ancre le contenu demandé (ie. http://serveur.fr/#/categorie/contenu.html). Cette redirection devra se faire en JS et non côté serveur sinon le référencement et l’accessibilité seront perdus. Ceci permet d’éviter d’avoir des URL de ce genre : http://serveur.fr/categorie/contenu2.html#/categorie/contenu.html.

Ce qui donne :

clic sur un lien ou sur le bouton retour/suivant du navigateur
si le lien ne contient pas d’ancre, redirection vers la racine et ajout de l’ancre correspondant au contenu demandé
modification de l’ancre
détection du changement de valeur de l’ancre
appel Ajax permettant de charger le contenu (sans décoration)
traitement JS insérant le contenu

Décorer ses contenus

L’appel Ajax qui chargera le contenu devra utiliser un mot clé dans la requête Ajax permettant de distinguer sans décoration. Par exemple : http://serveur.fr/ajax/categorie/contenu.html.

Pour résumer ces 3 points, voici 2 exemples de chargement de la page http://serveur.fr/categorie/contenu.html avec et sans Javascript.

Avec Javascript :

Appel à http://serveur.fr/categorie/contenu.html depuis le navigateur
redirection de l’url vers http://serveur.fr/#/categorie/contenu.html
chargement avec décoration de la page http://serveur.fr/ (ne contient pas le mot clé de décoration, ici, ajax)
appel de l’ancre #/categorie/contenu.html (détecté par le script)
chargement en Ajax sans décoration de la page http://serveur.fr/ajax/categorie/contenu.html

Sans Javascript :

Appel à http://serveur.fr/categorie/contenu.html depuis le navigateur
chargement avec décoration de la page http://serveur.fr/categorie/contenu.html

La mise en œuvre avec jQuery

jQuery

Coté Javascript, jQuery a été choisi (cf. Fiche jQuery) pour sa multitude de plugin et son évolutivité.

Javascript non intrusif
facilité d’écriture

jQuery history

gestion des ancres
détection du changement d’URL
gestion de l’historique

L’intégration du plugin history se fait en 3 étapes :

Définir une fonction pageload(), le paramètre est la valeur de l’ancre
function pageload(hash) { if(hash) { // mon appel Ajax } }

Initialiser le plugin history
$(document).ready(function(){ $.historyInit(pageload); });

Surcharger les clics des liens à chaque appel Ajax
$(document).ajaxComplete(function(){ // sélection de tous les liens a ayant l'attribut rel égal à history (valeur arbitraire) $("a[@rel='history']").click(function(){ //suppression du mot cle history, pour que les liens ne soient surchargés qu'une seule fois this.rel = this.rel.replace(/history/, ''); // mise à jour de l'ancre var hash = this.href; // suppression du caractère # hash = hash.replace(/^.*#/, ''); // chargement dans l'historique et appel de pageload $.historyLoad(hash); // trés important : désactivation du clic du lien a return false; }); });

Gestion de l’habillage

Concernant la gestion de l’habillage (qui s’exécute coté serveur), plusieurs choix de bibliothèques sont disponibles suivant le langage utilisé. On pourra, par exemple, utiliser Struts Tiles pour Java.

Problèmes rencontrés

IE6 et flash

Si vous utlisez cette navigation à travers un flash (qui appelera votre JS), il est possible de rencontrer ce problème sous Internet Explorer : http://noregret.org/tutor/navigatio.... Au bout de quelques clic, IE devient blanc.

La solution est de modifier l’appel JS depuis le flash en n’utilisant pas getUrl mais FsCommand.

IE6 et le symbole ’ ?’

IE6 ne supporte pas d’avoir le symbole ’ ?’ dans l’ancre. Il faudra prévoir de le remplacer par un autre caractère (ie. ’_’) dans ce cas, ce qui donne :

sans ancre : http://serveur.fr/categorie/contenu.html?param=true
avec ancre : http://serveur.fr/#/categorie/contenu.html_param=true

Exemple

Dior Parfum et Beauté

Conclusion

Avec les techniques Ajax et les plugins JS comme jQuery, la navigation Ajax se fait d’une manière transparente et performante tout en laissant la possibilité d’une navigation standard sans Javascript.

Auteur : Guillaume Saint-Raymond

Tags : Flash, Javascript, jQuery

Commentaires : Laisser un commentaire

13 commentaires

13 mai 2008
YoTsumi

Si vous voulez voir un autre exemple, je me permets de vous passer l’adresse d’un blog que j’ai conçu et respectant ces principes ( de manière un peu plus artisanale/’bourine’ cependant ! )

Le blog
15 mai 2008
Remarquès
Le site Dior dit "hors" à Firefox, qui plante brutalement.
21 mai 2008
Godefroy (Skreo)
Article très intéressant, merci Je vais améliorer la navigation Ajax d’EklaBlog.com en utilisant les ancres. Le seul problème dans la navigation actuelle est que l’url de la page ne change pas, ce qui est très gênant pour certains utilisateurs.
18 juin 2008
Joe
Fonctionne très bien... sauf sous IE7 qui n’inclut pas les ancres dans l’historique !
13 juillet 2008
truf

Salut, Je rencontre cette problématique et lis donc votre article avec interêt. Je ne comprend pas ce passage : "Dans le cas où un utilisateur rentre directement une URL complète sans ancre (ie. provenant d’un moteur de recherche), il faut prévoir une redirection vers la racine du site et en ajoutant dans l’ancre le contenu demandé (ie. http://serveur.fr/#/categorie/contenu.html)." Cette redirection devra se faire en JS et non côté serveur sinon le référencement et l’accessibilité seront perdus. Ceci permet d’éviter d’avoir des URL de ce genre : http://serveur.fr/categorie/contenu2.html#/categorie/contenu.html.

Ce n’est pas justement l’inverse ? Une redirection en .js ne serait pas interprété, alors qu’une url rewriting etc. le serait.

(cf. http://www.webrankinfo.com/referencement/liens/redirections.php ).
16 juillet 2008
Guillaume Saint-Raymond

Bonjour,

La redirection se fait coté client afin de pouvoir respecter la navigation dégradée (sans Javascript).

En effet, dans le cas où Javascript n’est pas interprété, il ne faut pas que l’URL soit redirigée avec l’URL contenu présent dans l’ancre (ie. http://serveur.fr/#/categorie/contenu.html) car, dans ce cas, la navigation afficherait tout le temps la page d’index du serveur (http://serveur.fr/) quel que soit le contenu (l’ancre n’étant pas interprété).
25 juillet 2008
Emile_le_roux
Bonjour, Quelqu’un connaitrait-il un moyen d’appliquer cette méthode sur IE ? En effet, il n’intègre pas l’hash dans l’historique mais j’ai vu des sites qui y arrive ! (sans comprendre le code source bien évidemment...) Merci !
12 octobre 2008
yassine samadi

Merci pour ce document,

j’ai essayé de faire la même chose que l’exemple jQuery history (j’ai fait copier coller du code de la page et ce lui des deux fichier js) et ça marche pas et je sais pas pour quoi, est ce qu’il faut changer quelques choses : http://www.crea-soft.net/jquery_history.html/ merci de vérifier !

cette technique va m’aider énormément pour dépasser les problèmes rencontrer avec AJAX essentiellement pour le site motorzone.ma

Merci
12 octobre 2008
yassine samadi

je viens de comprendre grâce à un ami qu’il faut mettre dans le même répertoire des fichiers html (1.html, 2.html...).

c’est très bien, mais ma méthode de travail consiste à appeler une fonction js : sendMultiData (’param1’,’param2’,’param3’)

avec :
param1:la liste des paramètres de la fonction php
param2:id de la zone ou je vais placer les résultats
param3:la fonction PHP à exécuter
et la liste de tout mes fonctions se trouve dans un fichier ’function.php’. ça semble bizard mais c’est très pratique, j’ai développé des portails comme ça. ce que que je compte faire avec cette technique c’est de tracer un tableau Js dont je vais affecter pour chaque lien ancre une liste des paramètre de ma fonction sendMultiData. comme ça je profite de cette technique et de ce que j’ai développer en Ajax. mais vu que j’ai pas compris très bien ce code, je sais pas qu’est ce qu’il faut remplacer par mon tableau. quelqu’un peut m’aider !?

19 février 2009

pige
Bonjour, Depuis peu, j’ai une ancre qui s’inscrit dans une url lors de la navigation. J’aimerai savoir comment supprimer cette ancre (#) Merci pour votre aide.