comment gérer une navigation en ajax ?
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
Coté Javascript, jQuery a été choisi (cf. Fiche jQuery) pour sa multitude de plugin et son évolutivité.
- Javascript non intrusif
- facilité d’écriture
- 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
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.
- 1 commentaire
-
-
13 mai 2008YoTsumi
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 ! )
-
