Article écrit le par k-ny ( Blog ).

Dans ce tutorial je vais vous expliquer comment fabriquer la navigation d'un site sans reloader la page entière.

A l'aide de l'objet xmlhttprequest, qui est la base d'AJAX, nous allons faire appel a des fichier externes pour mettre à jour le contenu de notre page sans rechargement. Exactement comme le ferais un système de cadres/iframe.

Je vais en plus vous expliquer comment mettre un message d'attente (loading) pendant le changement de contenu.
Et je vais aussi aborder le cas d'un appel depuis un menu en flash.

Installez-vous confortablement, prenez-vous un café, et on commence !

Cette objet est la base mème de l'AJAX.

C'est bien beau tout ça, mais qu'est-ce que c'est l'ajax ?

Pour les comiques, il ne s'agit pas d'un produit nettoyant

AJAX signifie Asynchronous JavaScript And XML
Javascript Asychrone signifie que l'on a la possibilité de traiter des données indépendamment du contexte dans lequel elles se trouvent.
XML, et bien celà signifie simplement que la source de données que traitera xmlhttprequest doit se presenter sous la forme XML.
Mais en réalité, xmlhttprequest permet egalement de traiter des données sous forme d'un simple texte. C'est d'ailleurs cette fome de traitement que l'on va utiliser dans ce tuto, donc en réalité on ne va pas réellement faire de l'AJAX mais plutot de l'AJAT (Asynchronous JavaScript And Text)

Si vous avez déjà touché un petit peu au javascript, cette evenement vous est très certainement familié.
Il peut ètre appliqué à n'importe quel element des notre page. Generalement on l'associe à un lien ou à un bouton.
Il peut egalement ètre “simulé” depuis flash depuis un geturl.
C'est donc cette evenement qui fera la liaison entre notre page et notre fonction javascript.

Ps: dans une fonction javascript la bonne syntaxe est onClick mais en xhtml1.0 strict en utilisera onclick car il n'accepte pas les majuscules

Il vous faut absolument garder en tète que certaines personnes naviguent avec javascript desactivé. Il faut que vous preniez en compte cette minorité en leur fournissant une alternative, comme un site light avec tout le contenu du site par exemple.

Pour celà on utilisera les balises noscript pour proposer un lien alternatif qui s'afficheront si javascript n'est pas activé.

Le but de ce tutoriel est d'obtenir une page réactive, bien ficellée et qui ne laisse pas l'utilisateur dans le noir lors de la mise à jour du contenu.

Au final nous aurons une page avec un menu composé de liens. Chacun de ces liens appelera un fichier externe different pour mettre à jour le contenu.
Les fichiers externes peuvent ètre sous differentes formes, HTML, TXT, PHP, etc …

• Gain de bande passante : On réduit fortement le trafic car on ne charge que ce qui change.
• Meilleure utilisabilité : Pas de clignotement au chargement, rapidité et fluidité des chargements.
• Possibilité d'inclure des swf sans qu'ils ne soient “coupés” lors du changement de page (pratique pour inclure du son)

• Les boutons suivant et précédent sont inopérants
• Pas de marque page ou favoris
• Le référencement difficile
• Obligation pour vos visiteurs d'avoir javascript activé

Pour les 2 derniers points, il vous faut absolument une alternative qui permettra de pouvoir acceder au contenu mème sans javascript.

/*************************************************
	Fonction de definition de l'object xhr
**************************************************/
function new_xhr(){
	var xhr_object = null;
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   xhr_object = false;
	}
	return xhr_object;
}
/*****************************************************
	Fonction qui va recharger le contenu
******************************************************/
function load_page(select) {
	var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
	xhr2.onreadystatechange = function(){
		if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini
			if(xhr2.status  != 200){//Message si il se preoduit une erreur
				document.getElementById("content").innerHTML ="Error code " + xhr2.status;
			} else {//On met le contenu du fichier externe dans la div "content"
				document.getElementById("content").innerHTML = xhr2.responseText;
			}
		} else {//Message affiché pendant le chargement
			document.getElementById("content").innerHTML = "Chargement en cours ...<br /><img src='loading.gif' alt=''/>";
		}
	}
	xhr2.open("GET", select.split('?')[1]+".html", true);//Appel du fichier externe
	xhr2.send(null);
}

Voilà, j'ai decris un maximum de choses dans le code source.
Dans cette fonction, je suis partie du principe que l'on va mettre à jour le contenu d'une div avec une id=“content”. Vous verrez ça plus en details dans la partie suivante.
J'ai inclu une image dans le message de chargement, vous trouverez cette image dans le zip fourni à la fin de ce tutoriel.

Bon maintenant mettez le contenu de ce code dans votre bloc-notes, et enregistrez le dans un fichier nommé ”ajax.js”

Bon la je vous met un exemple vraiment très simple, sans css.

Premierement il faut que l'on intègre notre fichier ajax.js dans notre page. Mettez le fichier ajax.js dans le mème dossier que votre page, et mettez le code suivant entre les balises <head></head>:

<script type="text/javascript" src="ajax.js"></script>

Ensuite entre les balises <body></body>:

	<noscript>
		<div id="erreur">Veuillez activer javascript, ou visiter <a href="contenu/index.php">la version light</a>.</div>
	</noscript>
	<div id="menu">
		<a href="?contenu/page1" onclick="load_page(this.href);return false;">Page 1</a> |
		<a href="?contenu/page2" onclick="load_page(this.href);return false;">Page 2</a> |
		<a href="?contenu/page3" onclick="load_page(this.href);return false;">Page 3</a>
	</div>
	<div id="content">
		Bienvenue sur mon site ...
	</div>

Regardez la syntaxe de nos liens, dans le href on place une reference à la page que l'on désire appeler. href=”?contenu/page1” signifie que l'on appelera le fichier page1.html (situé dans le dossiercontenu) pour l'inclure dans la div ”content”.

Le return false, c'est pour eviter de recharger la page.
Le onclick fait appel a notre fonction javascript.
La balise noscript affichera un message de redirection si javascript est deactivé

Ps: à partir de flash, il vous faudrait faire un geturl de ce type:

mon_bouton.onRelease = function(){
     getURL ("javascript:load_page('?contenu/page2')", "_top");
}

(Exemple .fla fourni dans le zip en fin de tutoriel)

Pour l'exemple de ce tuto, il vous faudra creer 3 fichiers html, nommés page1.html/page2.html/page3.html.
Ensuite placez les dans un dossier nommé ”contenu”.
Attention, ces fichiers ne doivent en aucuns cas contenir les balises head html ou body car ces balises existent déjà dans notre page receptrice.

Comme je vous l'ai expliqué plus haut, il faut imperativement que vous mettiez une solution altenative en cas de javascript desactivé.
Je vais vous montrer un exemple d'une page alternative qui vas inclure tout nos fichiers externes via php.

Crée un fichier index.php que vous placerez dans le mème dossier que vos fichiers externes (dans le dossier contenu).
Dans ce fichier, entre les balises <body></body>:

	<div id="content">
		<div id="page1">
			<?php include 'page1.html';?>
		</div>
		<div id="page2">
			<?php include 'page2.html';?>
		</div>
		<div id="page3">
			<?php include 'page3.html';?>
		</div>
	</div>

Et voilà, avec la balise noscript que l'on a mis dans notre page principale et cette page php, nous permettons aux utilisateurs de pouvoir acceder au contenu.
De plus, celà s'avère utile egalement pour avoir un minimum de référencement

• Exemple de navigation par liens
• Exemple de navigation par boutons
• Exemple de navigation par menu flash
• Exemple contenu alternatif

PS: Pour les exemples j'ai mis un retardateur pour que vouz ayez le temps de voir la sequence de chargement, il est clair que pour de petits fichiers le loading sera casi invisible

• navigation_ajax.zip

Contenu du zip:

• Les 3 exemples de navigations lien-bouton-flash
• Le .fla de l'exemple du menu flash
• Le fichier alternatif .php
• Les 3 pages externes
• Le .gif de loading + d'autres loading