Sébastien Warin

Creative Technologist
& Chief Technology Officer

Feb.26

26 février 2006

AJAX

Dans le cadre de mon projet Dotnet, je me suis mis a utiliser AJAX ^^ C’est pourquoi, je vais brievement vous exposer ce qu’est AJAX avec un petit exemple d’utilisation car je sais que tout le monde préfere la pratique que la théorie !!

AJAX késako ??
Non non je ne fais pas le ménage à l’eau de javel ^^ AJAX c’est tout simplement l’avenir du Web (concept Web 2.0) ! AJAX pour Asynchronous JavaScript And XML (en francais : « XML et Javascript asynchrones ») est une méthode de développement des applications Web !
En effet tous les échanges client<>serveur se font en arrière plan dans des fichiers XML pilotés avec des scripts JS !

Sans AJAX : actuellement, quand vous êtes sur une page A d’un site et que vous demandez la page B, votre navigateur web (IE, Firefox, ..) renvoie une requête HTTP demandant la page B, le serveur vous reponds en vous envoyant tout le code HTML (+ JS, images, CSS, …) de cette page !

Deux inconvenients :

on renvoie une requete HTTP, c’est long, le navigateur devient tout blanc, faut le temps qu’il charge la nouvelle page !!!
et surtout, c’est bête de tout recharger car en général sur un site, la difference entre 2 pages n’est que le contenu; les menus, l’habillage graphique (design) reste identique !!

Avec AJAX : maintenant grâce a AJAX on resoud ces deux problemes :

Avec navigateur charge tout le code HTML de la page A (+ images, css, et scripts JS nottament pour gérer l’AJAX)
Quand vous demandez la page B, votre navigateur ne bouge pas, c’est un script JS qui derrière va venir telecharger un fichier XML contenant juste le contenu de la novelle page !

Deux avantages :

Impression d’instantané, le contenu arrive sans voir le chargement !
Impression d’instantané renforcé par le fait que seul le fichier XML contenant le contenu de la nouvelle page transite par le reseau, ce qui reduit enormement les echanges client<>serveur (le design n’est chargé qu’une seule fois pour la 1er page !)

En une phrase, AJAX va donc révolutionner les applications Web 🙂

Pour plus d’info sur AJAX :http://fr.wikipedia.org/wiki/AJAX
Des exemples AJAX: http://fr.wikipedia.org/wiki/AJAX#Liens_externes

Bon passons à la pratique

Pour cet exemple, on nous allons créer une page qui liste les éléves de ma classe 🙂 Pour cela, nous créons un fichier XML contenant les données :

<?xml version="1.0" ?>
  <supinfo>
  	<student id="48759" sex="M" age="19">Sébastien Warin</student>
  	<student id="45813" sex="M" age="18">Kévin Drouvin</student>
  	<student id="47934" sex="M" age="18">Benoit Scourion</student>
  	<student id="47715" sex="M" age="19">Amaury Balmer</student>
  </supinfo>

<?xml version="1.0" ?>

<student id="48759" sex="M" age="19">Sébastien Warin</student>

<student id="45813" sex="M" age="18">Kévin Drouvin</student>

<student id="47934" sex="M" age="18">Benoit Scourion</student>

<student id="47715" sex="M" age="19">Amaury Balmer</student>

</supinfo>

Vous remarquerez que les ID, Sexe et Age sont contenu dans les attributs de la balise studient alors que les noms sont dans la balise ! (ps: désolé pour les autres éléves, je n’ai pas tout mis, ca veux pas dire que je ne vous aimes pas :-)) L’on nommera ce fichier : eleves.xml

Créons maintenant la page HTML de base doctypé en XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  	<title>Test AJAX by Sebeuh</title>
  	<SCRIPT LANGUAGE="JavaScript">
  		function update()
  		{
  			// Script AJAX
  		}
  	</SCRIPT>
  </head>
  <body>
  	<h1>Test AJAX</h1>
  	<div id="contenu"></div>
  	<input type="button" name="update" value="Mise a jour AJAX" onclick="javascript:update();" />
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Test AJAX by Sebeuh</title>

function update()

{

// Script AJAX

}

</SCRIPT>

</head>

<body>

</body>

</html>

Cette page contient une fonction Javascript : update() qui contiendra tout le code JS pour l’ AJAX, une balise DIV nommé contenu où sera affiché la liste des éléves ainsi qu’un bouton nommé update qui appelera notre fonction update().

Il nous reste plus qu’a ecrire le code de notre fonction update() ! Commencons par definir quelques variables que nous initialiserons :

var objXMLHTTP = null;
var objXML = null;
var browser = null;
if(window.XMLHttpRequest) // Pour Firefox
{
 	objXMLHTTP = new XMLHttpRequest();
 	objXML = document.implementation.createDocument('','doc',null);
 	browser = "FF";
}
else if(window.ActiveXObject) // Pour IE
{
 	objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
 	objXML = new ActiveXObject('Microsoft.XMLDOM');
 	browser = "IE";
}
else
 	alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

var objXMLHTTP = null;

var objXML = null;

var browser = null;

if(window.XMLHttpRequest) // Pour Firefox

{

objXMLHTTP = new XMLHttpRequest();

objXML = document.implementation.createDocument('','doc',null);

browser = "FF";

}

else if(window.ActiveXObject) // Pour IE

{

objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");

objXML = new ActiveXObject('Microsoft.XMLDOM');

browser = "IE";

}

else

alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

La variable browser nous permet de savoir si l’on utilise IE ou Firefox (and co comme Opera, etc…) ! En fonction du navigateur, l’on utilise soit l’ActiveX Microsoft XMLHTTP et XMLDOM pour IE ou XMLHttpRequest et createDocument pour les amis de Firefox !

Nous allons maintenant télécharger le XML grace a notre objet objXMLHTTP et stocker dans notre objet objXML grace au code :

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);
objXMLHTTP.send(null);
objXML = objXMLHTTP.responseXML;

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);

objXMLHTTP.send(null);

objXML = objXMLHTTP.responseXML;

Il nous reste plus qu’a exploiter le contenu du XML pour l’afficher ! Pour cela nous allons définir une variable out qui contiendra le code HTML a afficher dans notre balise DIV contenu ainsi qu’une variable nbEleves pour contenir le nombre d’eleves afin d’en faire une boucle.

var out = "";
var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

1 2	var out = ""; var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

Nous allons maintenant faire une boucle pour le nombre d’eleves de notre fichier XML et remplir notre variable out par le code :

for(var a = 0 ; a < nbEleves ; a++) {
 	var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");
 	var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");
 	var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");
 	if(browser == "IE")
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).text;
 	else
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;
 	out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";
}

for(var a = 0 ; a < nbEleves ; a++) {

var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");

var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");

var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");

if(browser == "IE")

var name = objXML.documentElement.getElementsByTagName("student").item(a).text;

else

var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;

out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";

}

Vous remarquerez que pour récuperer le contenu d’une balise (et non ses attributs) soit ici le nom de l’eleve, cela differt selon le navigateur que l’on utilise. Sous IE nous utilisons la proprieté text alors que sous Firefox & Co c’est la proprieté textContent.

Il nous reste plus qu’a afficher notre variable out dans notre DIV :

var today = new Date();
var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();
if (document.getElementById)
 	document.getElementById("contenu").innerHTML =  "Mise a jour : " + heure + "<br/>" + out;

var today = new Date();

var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();

if (document.getElementById)

document.getElementById("contenu").innerHTML = "Mise a jour : " + heure + "<br/>" + out;

J’ai rajouté l’heure, cela est biensur facultatif !!

Vous pouvez vous amusez à modifier le contenu dans notre fichier XML (eleves.xml) et cliquez sur le bouton « Mise a jour AJAX » de notre page pour voir que celle ci se met a jour sans pour autant faire un allé-retour sur le serveur 🙂

Cet exemple est certe très simple mais ouvre les pleins de voie, a vous de faire marcher votre imagination… Moi je dis, vive AJAX 😀

(Page complete : https://sebastien.warin.fr/…/ajax.txt)

Perso,Dev

AJAX,Javascript,Web 2.0

S-Watch : pilotez votre domotique et objets...

Apr.26 Sebastien

Piloter sa maison ? C’est facile !

Aug.03 Sebastien

Comments(9)

AmO
le 26 février 2006 à 15:40
L’ AJAX, c’est bien…
Mais ça a aussi des défauts… regarde la montée en charge de ton proc lors du lancement du js ^^
Merci pour ton article ^^
BeNuts
le 26 février 2006 à 15:46
Effectivement, c’est vraiment excellent 😉 Moi j’ai deux, trois petites remarques qui ne concernent pas la technicité du post …
1 – Quand Seb developpe en AJAX … Il devient complétement fou … "WHEN A MANNNNN LOVES A WOMAAAAAN" en plein cours d’Algo … Ca passe plutôt bauf :p
2 – Bizarrement, les exemples que tu as pris pour le nom des élèves reprend exactement le classement provisoire de la classe … en gros je passe encore pour un crétin … |-)
GROS BISOUS MA SEBOUILLE … VIVE LA PLAGNE ! (et la tise :p)
Sebeuh
le 26 février 2006 à 15:56
Amo : ouep, en effet le JS consomme, mais pour ma part il n’est monté qu’a 27% pdt une seconde ce qui reste très raisonnable ! Et puis recharger une page sous IE ou FF ca doit consommer aussi ! Certe l’AJAX a ses defauts mis je ne pense pas que les performances fassent partie des defauts d’AJAX !!
Benuts : Vu que je ne connaissez pas ID CB de tout le monde, j’ai en effet repris le fichiers des notes des éléves ! Mais bon toi au moins tu fais partie des 4 meilleurs ce qui te donne la chance d’etre dans mon fichier XML lol !!!
Ouai je sais, la prog me rend surement/certaiment fou, alors merci a vous de me supporter tous les jours 🙂
Et comme tu dis Ben : VIVEMENT LE SKIIIIIIIII 😀
kinji
le 2 mars 2006 à 23:35
L’AJAX c’est super si c’est bien utilisé et à petites doses. Sinon c’est une catastrophe pour l’utilisateur et le serveur niveau montée en charge.
De plus, les gens ont tendances à en foutre partout parce que c’est "hype" en ce moment sur le Web mais il faut voir que dans certain cas, l’ergonomie est.. à chier :p
Malgré tout cela il faut avouer que du bel AJAX, ça fait vraiment plaisir à voir :). Le Web 2.0 en marche !
Aline
le 16 mars 2006 à 15:28
Génial l’Ajax !!!!!!!!!!!!!!!
Bon désolé mais je crois que je vais l’utiliser pour mon projet .net aussi !!!
Concernant le classement PROVISOIRE n’oublie pas que je suis juste derrière (et p-e bientôt devant ^^ ) !!!
GDU
le 14 juillet 2006 à 15:18
l’exemple ne marche pas sous N7 ni opera 8
une idée ?
GDU
le 14 juillet 2006 à 17:45
finalement j’ai installé N8.1 et opéra 9 et ca marche.
Toujours à la traine ces 2 là…..
A+
BobO
le 16 juillet 2006 à 07:25
Hello.
Merci beacoup pour ce tutorial plus qu’interessant !!
Longue vie à AJAX, et puis : WHENN A JSSSSS LOVE XMMLLLL !!!
Bon moi aussi je commence à devenir fou…
😉
Boris
stephane
le 20 novembre 2006 à 18:33
je ne suis pas un developpeur de merde!!!