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 !
Au programme
- Preface
- Principe de fonctionnement
- Notre fonction javascript
- Contenu de notre page
- Nos fichiers externes
- Contenu Alternatif
- Exemples
- Download
Preface
L'objet xmlhttprequest
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 Asynchrone 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) ^^
L'evenement onClick
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.
Utilisation de javascript
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é.
Principe de fonctionnement
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 ...
Avantages
- 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)
Inconveniants
- 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.
Notre fonction 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”
Contenu de notre page
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 dossier contenu) 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)
Nos fichiers externes
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.
Contenu Alternatif
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 
Exemples
- 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 
Download
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
![[T]](images/icon/tag_orange.png "ajax"){kind=icon}
![[netvibes]](images/digglike/netvibes.gif)
![[technorati]](images/digglike/technorati.png)
![[blogmarks]](images/digglike/blogmarks.gif)
![[delicious]](images/digglike/delicious.gif)
![[digg]](images/digglike/digg.gif)
![[furl]](images/digglike/furl.gif)
![[google]](images/digglike/google.png)
![[newsburst]](images/digglike/newsburst.gif)
![[bloglines]](images/digglike/bloglines.gif)
![[yahoo]](images/digglike/yahoo.gif)
![[newsgator]](images/digglike/newsgator.gif)
![[aol]](images/digglike/aol.gif)
![[windows]](images/digglike/windows.gif)
![[msn]](images/digglike/msn.gif)
![[feedfeeds]](images/digglike/addfeedfeeds.gif)
![[pageflakes]](images/digglike/pageflakes.gif)
![[kinja]](images/digglike/addkinja.gif)
![[blogarithm]](images/digglike/blogarithm.gif)
![[rojo]](images/digglike/rojo.gif)
![[feedshow]](images/digglike/feedshow.gif)
Commentaires
Interessant, je cherchais une source permettant enfin de faire celà :D
Dès que j'ai le temps je me penche plus en profondeur sur ce code et donne mon opinion.
Exellent tuto simple, et claire. Bravo !
Bonjour,
j'ai testé ton tuto car il correspond parfaitement à ce que je voulais faire et je le trouvais très bien expliqué..
Mais j'ai un souci
J'ai une navigation en flash avec 6 boutons.
Sur chacun, j'ai donc utiliser la méthode getURL.
Lorsque je teste sur IE, tout se passe bien, mais quand je fai l'essai dans firefox, a chaque clic sur les boutons, le div conteneur se déplace et monte sur la page...!!
Sauriez-vous pourquoi et d'ou peut venir le problème? J'espère avoir été assez clair.
Merci pour les réponses^^
Bonjour,
Ce tuto est très bien fait, ça c'est une certitude cependant je me demandais si il était possible, par cette méthode (ajax) d'inclure un fichier pdf dans un div, comme je suis obligé de le faire mais dans une iframe en ce moment... et je déteste les iframes, ça craint quand même un poil.
Par avance merci pour votre réponse.
Merci ^^
@delf013
Alors là ça peut dependre de plein de choses. Et t'as testé diect avec un lien plutot que du flash ?
@Bee-Bop
Pour du pdf j'ai un doute, enfin il doit quand ètre possible de le faire mais en passant d'abord ton pdf dans une moulinette php, regarde plutot donc du coté de php, a comment pouvoir redre un pdf exploitable plus facilement
De retour pour un nouveau post^^
Donc premièrement, j'ai résolu le problème que j'avais sous Firefox. C'était un problème de nomination de fichier.
Sinon j'ai un autre souci. Je ne suis pas sûre qu'il y ai vraiment un rapport avec ce tutoriel mais je ne sais vraiment pas comment m'en sortir, ni ou poster pour avoir solution.
Donc tant pis je me lance ^^
J'ai donc une page contenant un swf avec 6 boutons, chacun appelant un fichier sans rechargement de page (merci pour ce script^^)
Mais (et c'est là que ça se corse), mes pages appelées contiennent elles-même plusieurs petites images. Chacunes de ses images ont un evenement OnMouseOver et onClick pour afficher une autre image dans une div centrale.
J'utilise une fonction JS dont voici le code:
function change(nom,src) {
// nom est le nom de l'image
// src est l'adresse du fichier d'image
document.images[nom].src=src;
}
Sur les petites image:
<div class="affichage-pt-img"><a href="#" onClick="change('imgCentrale','illustrations/nath.jpg');" onMouseOver="change('nath','illustrations/icones/nath_over.png');" onMouseOut="change('nath','illustrations/icones/nath.png');";><img src="illustrations/icones/nath.png" name=nath border=0/></a></div>
Et sur l'image centrale:
<div class="affichage-centrale"><img src="illustrations/lune.jpg" name="imgCentrale" id="imgCentrale"/></div>
Voila mon problème:
J'ai testé sous Firefox et tout marche nikel, je peux naviguer sur mes boutons flash, et ensuite clicker sur mes petites images, et revenir sur ma navigation, tout s'affiche bien, pas de problème.
Mais sous IE>> PROBLEME grrrrrrrrrrrrrrr
L'affichage de mes pages se fait, et la navigation sur mes boutons flash fonctionne. Lorsque je veux cliquer sur mes petites images, la fonction js se lance bien, et j'ai bien mon rollover et mon onclick, sauf que dès que je reviens sur ma navigation flash, le chargement des page avec le script ajax ne se fait plus. Je reste bloquer sur la page qui a été affiché, comme si le script ajax n'était plus pris en compte...
Js et moi ont est pas super copain et je suis carrément "nulle" dans ce langage! J' y comprend rien.
Donc est-ce un problème de conflit quelconque entre les deux scripts? et pourquoi cela fonctionne t-il parfaitement sous Firefox et pas sous IE?
Je suis désolée pour la longueur du message mais je suis vraiment bloquer là. Un grand merci d'avance si vous pouviez m'aider à resoudre ce problème.
Bonjour, sa fonctionne très bien, mais lorsque l'on veut mettre un lien du genre index.php?mode=1
que faut t'il mettre en lien ?index....
Merci
Avec cette méthode, il est possible d'envoyer des informations via formulaire ?
Excellent tuto !
Cependant, cela ne fonctionne pas en local... Y a t-il une solution pour remédier a ce problème ?
Par avance merci pour votre réponse.
Bonjour Jean,
pour que ça fonctionne en local, il faut supprimer la condition javascript suivantes:
if(xhr2.status != 200){...
Car status attend un retour serveur, donc en suprimant cette condition (aisin que le message d'erreur qui va avec) ça devrait rouler !
Merci beaucoup pour ta réponse !
Mais j'ai beau tester, ça ne fonctionne pas...
Peut être n'ais je pas tout saisi ?
Te serait il possible de préciser un peu + ce que je doit enlever ou mieu, coller le code modifié ?
Par avance merci beaucoup. Ce code est vraiment génial...
A+
Je n'ai pas testé, mais a priori, tu remplaces:
if(xhr2.status != 200){//Message si il se produit 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;
}
par ...
document.getElementById("content").innerHTML = xhr2.responseText;
Ok, merci pour ta réponse mais... et oui il y a toujours (ou plutot trop souvent) un mais
ça ne fonctionne pas, j'ai donc remplacé le if(xhr2.status != 200){... par if(xhr2.status != 0){... et la ça fonctionne en local mais pas en ligne. Le principal étant que je puisse tester mon "délire" en local puis une fois en ligne j'ai juste à modifier une valeur. C'est donc impeccable ! 
Encore merci pour ton script "de la mort qui tue" 
A+
dans les pages contenu (page1, page 2 , page 3) est il possible d y placer des focntion ajax aussi? ja i essaye mais apparement cela ne fonctionne pas
@Jean
A++
Etrange mais, bon, puisque ça fonctionne, on ne va pas se plaindre
@ olive
Alors tout dépend du type de fonction ajax que tu y met, et comment tu t'y prend.
Pour des fonctions qui s'exécute onload, el est évidant que ça ne marchera pas tel quel, il te faudra rappeler ta fonction juste après :
document.getElementById("content").innerHTML = xhr2.responseText;
Pour des fonctions par action, là ça devrait tourner !
L'idée est bonne, mais je n'aime pas le innerHTML, puisque du coup on ne respecte plus le DOM de la page (google est votre ami :p), un petit tuto sur JSON pour la suite ? :D
Effectivement le innerHtml, c'est pas le top niveau standard, mais les choses étant ce qu'elle sont, c'est un bon moyen de ne pas se retrouver avec 500 ligne de code juste pour charger un simple texte html !
Json, pas pour tout de suite, j'suis encore très attaché à xml moi
très bon tuto.
..
Toutefois j'essaie de tester juste le chargement de la page avec les liens.. ça ne marche pas.. ça donne code error 0..
est ce que qlq peut m'aider? c urgent
merci d'avance
@Camelia
Si tu fais tes test en local c'est normal, il faut dans ce cas "ponter" la condition "if(xhr2.status != 200)", tu changes le != par == par exemple, mais quand tu le remet en ligne, pense a rechanger la condition !
Bonjour,
Comment faire pour que cela fonctionne avec des pseudos frames??
Merci
Bonjour!
Tout d'abord, merci pour ce tuto/source. Cependant, j'ai un problème. Je tente de charger deux contenu différents dans deux divs différents et je ne peux bien sûr pas seulement dupliquer la fonction. Pour aider à comprendre, c'est que je veux charger dans un div le contenu en français et dans l'autre le contenu en anglais. L'une des deux est cachée (j'utilise les "Tabbed Panels" du framwork (Adobe) Spry). Je sais qu'il n'y a pas de conflit, car cela fonctionne si j'utilise la fonction que vous avez fourni, sans modifications.
Une idée?
P.S: Mes divs sont nommés "contentfr" et "contenteng".
Merci beaucoup!
Bonjour,
je voudrais savoir si c'est possible de remplacer les liens hypertexte par des menus list...Et quelle serait alors la syntaxe?
Merci d'avance
Bonjour,
C'est exactement le système que je cherchais. Je suis en train d'essayer de le mettre en place sur mon site qui contient déja pas mal de page et qui est structuré autour d'un index avec appel des différentes partie grâce à des includes. Je voudrais me servir de ce système pour le menu qui est en flash allimenté grâce à un xml mais je rencontre un souci "Erreur 300" et chargement d'aucune page???
Autre question qu'en est t'il du référencement? Certain disent qu'il devient impossible! Peut-on placer le head dans un fichier à part et l'intégrer avec un include à la page principale puis l'alimenter grace à des variables suivant la page loadre???
Que de questions mais ce site me tient à coeur et j'aimerais vraiment que ce système fonctionne!!!
En tout cas, super toutes les atuces sur le blog!!!
greg
franchement, comme on dit chez nous, BIG UP!
ton tuto m'a ôté une épine du pied, mais une épine vraiment mastock!!!
merci beaucoup, BRAVISSIMO!!!!!!
BIG UP 971 represent
Bonjour,
super le tuto!
Je ne suis pas un pro de l'ajax alors je me demandais comment il fallait faire pour utiliser un formulaire sur son site en combinaison avec ce tuto.
J'ai essayé d'inclure un formulaire en php mais cela n'a pas l'air de fontionner.
Quelqu'un pourrait m'aider pour cela?
Merci d'avance!
Enfin un tutoriel clair sur Ajax et son utilisation ! Et avec les sources s'il vous plait !
Merci énormement
Salut, pas mal du tout ce tuto.
Petit problème, tu dit que l'on peut chargé n'importe quel fichier externe (htlm, php, txt), mais comment faire pour chargé du php? J'ai vraiment tout essayer je n'y arrive pas :/
Salut,
Haha, php est un langage coté serveur, tu va pouvoir apeller ton fichier php qui te retournera du texte et uniquement du texte !
Après peut-etre que tu souhaite afficher du code php sur ta page, mais là...
D'abord un grand merci pour ce tuto.
C'est rare d'en trouver des si bien expliqué et qui marche bien...
Par contre je suis dans le même cas que "FoxLeader", je cherche à utiliser ce systeme avec 2 div différentes. Comment doubler les fonctions pour que ça marche avec une div "contenu1" et un autre "contenu2".
Merci pour les eventuelles réponses ou pistes à venir.
Coucou,
Merci pour cet excellent tuto^^
Par contre j'ai un petit soucis, je suis en local, ça fonctionne parfaitement avec Firefox, mais avec IE rien à faire, j'ai pourtant la version 7. J'ai l'impression qu'il ne prend pas du tout l'ajax en compte puisqu'à chaque fois que je clique sur un lien, il me recharge tout la page, cependant le content reste vide...
Merci de ton aide
Exellent tuto rien a redire
Cependant j'ai un petit probleme
Voila a chaque chargement de contenu je voudrai modifier la couleur arriere du div.
Pour cela, g un script js avec un feuille css pour creer un degrade de couleur.
Le probleme est le suivant le chargelent du contenu n'appel pas le script de dégradé.
Quel q'un aurait une idée ??
J'ai réussi charger les pages en ajax merci beaucoup, question : je dois réaliser un site de 50 pages avec des sous menu ... est ce possible ? comment dois je faire ?
Par avance merci
Pas de réponse, personne veut m'aider ?
Grand Merci pour ce tuto
Merci pour le tuto, il est vraiment bien fait !
Cependant, j'ai un petit souci.....
Mon menu Flash est codé en AS3 et je ne trouve pas du tout la synthaxe ou la manière de gérer l'Ajax avec AS3!
En AS2, tu utilises getURL, et ça marche nickel.
En AS3, il faut utiliser navigateToURL, et tout un blabla un peu avant mais ça ne marche pas ..
Quelqu'un aurait-il la solution à mon problème svp?
bonjour!
Merci pour ce tuto ca faisait longtemps que je cherchait ce genre de navigation....
J'avoue avoir cependant plusieurs soucis...
le premier: je ne comprend pas comment ce fait le lien entre la page index.html et l'inde.php qui se trouve dans le dossier contenu..?
le deuxieme: ja'imerais utiliser cette technique avec une menu flash de ma conception... mais cela ne marche pas j'ai l'habitude de publier mes menu flash en html... la page html contient le menu flash... mais si je fait un icnlude de cette page ca ne marche pas je suis obligé d'utiliser la fonction javascipt que tu a réaliser mais cela ne marche pas
Merci de me rep au plus vite
c tout bon mon menu fonctionne j'ai parler trop vite!!!
bonjour....
g un problème avec le script sous ie 7 et 8... le script ne marche pas!!!!!
il marche ne local mais pas sur le servreur...
voici le site en question : test.free-host.fr/
SVP c'est urgent... pourriez vous me repondre AU PLUS VITE? merci
Moi ça marche impec ici : zlap.fr/Greg
oui c vrai mon cher greg... le tiens marche sous ie....j'avoue que je n'arrive pas a comprendre on a utlliser le meme script et la mem methode... donc ca doit etre mon code... c bizzare car en localca marche...
Salut !,
excellent tuto !
Très pratique pour pouvoir insérer du son !
J'ai juste un problème :
J'avais une galerie d'images gérée avec Zoombox, qui a été créé par Grafikart. Il y a donc le lien vers les scripts js dans le head. Mais de depuis que j'ai mis la navigation Ajax, l'effet de zoom de marche plus… je suis simplement redirigé sur le lien de l'image…
Si quelqu'un pouvait m'aidé, ça me serais bien utile !
En tout cas encore merci pour ce tuto !
Ciao !
zhugo
ca y est j'âi trouver le soucis... c'etait acause de certaian fichiers sur le serveur...
le pobleme est reglé:nektar.free-host.fr/
j'ai le même problème avec la lightbox. Le java des pages chargées est désactivé quand on utilise la navigation en ajax. Est ce qu'il y a une solution au problème?
Effectivement, ça fonctionne nickel
Par contre impossible de faire fonctionner du flash, du javascript ou jquery dans les page chargée... (ex: galerie de jpg animé par un script ou un effet du style lightbox ne fonctionne plus)
ça rend la navigation plus fluide et plus ergonomique mais si en retour on se retrouve avec du contenu style "web 1.0" que l'on ne peut pas rendre dynamique c'est moyen...
Je viens juste de découvrir ce site et j'ai juste parcouru quelques tutos mais ça me parait etre vraiment du très bon.
Beaucoup de questions auquels un webmaster se pose à un moment ou a un autre sont expliquées ici, et la section tuto sur flash est très fournie, d'autant plus sur des sujets qu'on ne trouve pas facilement sur le net !
ça m'aurai épargné des heures de recherches de trouver ce site plus tot !
Continuez comme ça !
Ajouter un commentaire