L’AJAX (Asynchronous JavaScript and XML) a de nombreux avantages comme la vitesse de traitement, un faible coût en bande passante car la page ne se recharge jamais entièrement. Mais AJAX a de nombreux inconvénients :
- On est obligé d’avoir le Javascript activé (2% des utilisateurs mondiaux désactivent le Javascript)
- Problème de référencement, du au fait que les moteurs de recherche n’interprètent pas le Javascript. (Résoudre le problème de référencement et AJAX)
- Problème pour Bookmarker les pages (Mettre en favoris).
- Pages Précédentes et Suivantes du Navigateur ne fonctionnent pas.
Chaque fois que l’url de nos navigateurs change, ils interprètent ça comme un changement de page, donc ils rajoutent dans votre historique cette page en question. Le but est de jouer là dessus, et Javascript document.location.hash nous permet de jouer avec notre url donc avec notre historique. Il suffit donc, de garder en mémoire l’ancre (hash), et de la comparer toutes les xxx millisecondes avec l’ancre de notre URL. Si elle diffère on recharge la page suivant la nouvelle ancre.
Voici un exemple tout simple qui pourra surement vous aider :
<html>
<head>
<title>Mon Titre</title>
</head>
<body>
<a href=“javascript:chargePage(’pageUne.php’,true)”>pageUne.php</a><br />
<a href=“javascript:chargePage(’pageDeux.php’,true)”>pageDeux.php</a><br />
<a href=“javascript:chargePage(’pageTrois.php’,true)”>pageTrois.php</a><br />
<div>
Page demandee : <span id=’page’></span>
</div>
<script type=“text/javascript”>
//On récupère l’ancre qui est dans l’url et on retire le 1er caractère (le #)
hash_en_cours = document.location.hash.substring(1);
//Si l’ancre récupérer est différent de Null, on ChargePage en y insérant l’ancre
if (hash_en_cours != « ») {
chargePage(hash_en_cours,false);
}
/* 1er Paramètre (page) sera insérer dans le span dont l’id est ’page’,
2em paramètre (changeHash) est un bool, si il est à true on change l’ancre de l’URL */
function chargePage(page,changeHash)
{
hash_en_cours = page;
if (changeHash)
document.location.hash=page;
document.title = hash_en_cours;
document.getElementById(« page »).innerHTML=page;
}
/*Cette fonction va vérifier si l’ancre en cours est différente de l’ancre dans l’URL
Elle sera exécuter toutes les 0.1 secondes, si c’est le cas on appelle ChargePage */
window.setInterval(function () {
if (hash_en_cours != document.location.hash.substring(1))
chargePage(document.location.hash.substring(1),false);
},100)
</script>
</body>
</html>
Référencement d’une site en AJAX | Programmer et penser Web 2.0
février 11th, 2010
[...] LATEST PROJECT: Navigation en AJAX [...]
Saxor
février 12th, 2010
Très bon topic et très intéressant.
A bientôt
Emily
juin 2nd, 2010
Très bon topic et très intéressant.
A bientôt
bastou
septembre 19th, 2010
Bonjour,
J’ai bien compris votre topic et merci.
Mais j’aurais une question. Lorsque l’on affiche le code source de la page il ne s’inscrit rien dans la balise alors que lorsque je regarde le site http://www.titreradio.com/ que vous avez développé le code source de la page appelé se trouve bien dans la balise ce qui, je pense, joue dans le référencement du site.
J’aurais aimé savoir quelles étaient les solutions afin de remédier à ce problème.
Merci
admin
octobre 5th, 2010
Pour TitreRadio, j’ai jouer avec les ancres et les redirections javascript.
Quand le visiteur n’a pas de javascript (comme les bots des moteurs de recherches) : j’affiche le site normalement. Exemple : http://www.titreradio.com/r/nrj
Ainsi ma page http://www.titreradio.com/r/nrj est référencée par Google, Bing, Yahoo & co
Quand les visiteurs arrivent depuis ses moteurs de recherche sur la page http://www.titreradio.com/r/nrj, il y a une redirection Javascript (pour ceux qu’ils ont activé javascript) vers http://www.titreradio.com/#radio:radio:nrj
C’est invisible pour les visiteurs et ça permet d’indexer toutes les pages du site.
Je pense que la lecture de cette article peut vous aider : http://www.godsavethegeek.com/ajax/referencement-dune-site-en-ajax