6, bd marchal Juin F-14050 Caen cedex 4

Spcialit Informatique 1re anne

Rapport de mini-projet

Dveloppement Web avec AJAX

EL KHATTAB Younes LY Franois

Suivi : FOUREY Sbastien. 2e semestre 2005-2006

Table des matires

Introduction............................................................................................................................3 1 La technologie AJAX.......................................................................................................3 1.1 Historique..................................................................................................................3 1.2 Les avantages de la technologie Ajax.........................................................................3 1.3 Principe de fonctionnement .......................................................................................4 2 Exemples de sites utilisants AJAX ...................................................................................6 1.1 Google Suggest..........................................................................................................6 1.2 Google Calendar........................................................................................................6 1.3 Google Maps .............................................................................................................7 3 Exemple d'application...8 3.1 Objet XMLHttpRequest.............................................................................................8 3.2 fonction d'initialisation ..............................................................................................8 3.3 Dtection de changement...........................................................................................9 3.4 Apell au serveur.......................................................................................................10 3.5 Traitement du document Xml ..................................................................................10 3.6 Cration automatique d'une liste de suggestions lisible sur la page Web...................11 3.7 Ct serveur ............................................................................................................11 Conclusion12 Rfrences bibliographiques .................................................................................................13

Introduction
AJAX Asyncron Javascript And Xml est une nouvelle technique pour crer les pages Web dynamiques. Cest une nouvelle faon de traiter les donnes dans les pages web. Cette mthode rend possible la mise jour des parties d'une page sans la charger en entier. Ce qui permet de gagner du temps lors de chargement et avoir des rponses quasiinstantanment.

1 La technologie AJAX
1.1 Historique
Le terme Ajax a t invent en 2005 par Google. Juste aprs cette invention, beaucoup dapplications qui utilisent cette technique ont t cres. Aujourdhui, en moins dune anne, Ajax est devenue le grand centre dintrt des dveloppeurs Web. Le 01 fvrier 2006. IMB a lanc linitiative Open Ajax qui regroupe aujourdhui BEA, Borland, Google, Yahoo!, Eclipse, Novell, Mozilla, Oracle, Zend Lobjectif est de garder la compatibilit de lensemble des programmes cre par les dveloppeurs avec les divers navigateurs et serveurs.

1.2 Les avantages de la technologie Ajax.

Ajax permet de modifier localement le contenue de la page Web, donc il rend linterface beaucoup plus ractive. Par exemple, une rservation de billet davion ou train en ligne seffectue en plusieurs tapes. Dans le cas classique, la machine envoie la page remplie et attend la page suivante. Mais dans le cas dAjax, le champ rempli devient masqu et le client peut remplir les champs suivants en mme temps que lenvoie des champs dj remplis. Do la ractivit de linterface et la rapidit dexcution. En plus de ces avantages cits prcdemment, Ajax permet aussi doptimiser la bande passante du serveur. En effet, dans une page Web classique. Pour aller dune tape une autre pendant la navigation, on doit charger une autre page Web (figure 1). Par contre, avec la technologie Ajax, on charge seulement la diffrence entre ces 2 pages (figure 2). Ce qui permet de rduire les donnes changes entre le serveur et le client jusqu 80%.

figure 1 :Echange de donnes dans une page Web classique

figure 2 :Echange de donnes dans une page Web Ajax

1.3 Principe de fonctionnement.

Ajax nest pas une technologie en elle-mme. Cest une technique qui utilise les diffrentes technologies de Web dj existantes- combines. Llment cl dAjax est lobjet XMLHttpRequest. Il fournit un mcanisme pour le client -via le Javascript- pour envoyer l'information au serveur et recevoir une rponse sous forme dXml sans avoir besoin de charger une autre page. Linformation rcupre peut tre traite dans le fond fin de mettre

jour dynamiquement la page Web, tout ceci sans signaler lutilisateur quune nouvelle requte a t envoy. Dans le schma suivant, on voit que pour modifier un seul champ dans le cas classique (figure 3). Les donnes changes entre le serveur et la machine client contiennent tous les champs de ce formulaire. Par contre dans le cas dune page Web qui utilise Ajax (figure 4), grce lobjet XMLHttpRequest, lchange de donnes sest limit au champ modifi sous format Xml.

figure 3 :Echange classique des donnes

figure 4 :Echange de donnes laide de JS & XML

2 Exemples de sites utilisant AJAX.

2.1 Google Suggest.
Cette application dveloppe par Google permet aux utilisateurs deffectuer une recherche rapide et efficace.

figure 5 : Google Suggest Ds que nous tapons la premire lettre de la recherche, Google nous propose une liste de mots recherchs frquemment sans recharger une autre page Web. Or pour charger sur le navigateur toute la liste des mots existant dans la base de donnes Google, il faut trs longtemps. Ajax apporte la solution, le navigateur cherche seulement les donnes ncessaires, dans notre cas (figure 5), les donnes transmises sont seulement les trois mots ensica, ensicaen, ensica toulouse ce qui donne une rponse quasi-instantane. Nous allons donner beaucoup de dtail dans notre petite application (page 8).

2.2 Google Calendar.

Google Calendar est une autre application Google base sur Ajax, cette application Web permet aux utilisateurs dutiliser leur calendrier Web avec une grande simplicit. Pour modifier un rendez vous, il suffit de glisser ce dernier avec la souris vers une nouvelle case (figure 6). Le rendez vous prends une nouvelle valeur sans aucun changement de page.

figure 6 : Google Calendar Derrire ce glissement se cache la technique Ajax qui met jour la base de donnes de faon permanente et transparente. La page devient beaucoup plus dynamique et ragit de manire instantane avec lutilisateur.

2.3 Google Maps.

figure 7 : Google Maps Lorsque nous utilisons Google Maps (figure 7), nous avons limpression que le dbit de connexion est trs lev cause de la rapidit de la rponse lors dun scroll. Cette rapidit est due au fait que la technique Ajax continue charger les images voisines pendant la navigation. Donc lors dun scroll, les images voisines sont dj charges, ce qui donne une rponse instantane.

3 Exemple dapplication.
Pour illustrer la technologie Ajax, nous considrons un champ de formulaire dans lequel on saisit les premires lettres dun mot et lordinateur affiche au fur et mesure de la saisie au plus un certain nombre de mots commenant par le mme prfixe, ici, nous choisissons au plus 10 mots comme propose Google Suggest (Page 6). Attention, nous pouvons le raliser uniquement en javascript sans Ajax. Sauf quen javascript, le client doit charger tous les mots ce qui pourrait surcharger la bande passante et ralentir la rponse. Alors quavec Ajax, le client effectue des requtes vers le serveur qui lui envoie seulement les donnes demandes.

3.1 Objet XMLHttpRequest

Ajax est une mthode de dveloppement qui se rsume quasiment en une seule instruction : XMLHttpRequest. Notre premier script permet de crer un objet XMLHttpRequest compatible avec les navigateurs actuels tels que Internet Explorer et Firefox afin de rcuprer des donnes sous forme de fichier Xml gnr par le serveur de lcole partir du fichier login.php.
function objetXMLHTTP(){ var objetxhr=null; if(window.XMLHttpRequest) // Firefox objetxhr = new XMLHttpRequest(); else if(window.ActiveXObject){ // Internet Explorer try { objetxhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { objetxhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { objetxhr = null; } } } else { // XMLHttpRequest non support par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); } return objetxhr; }

3.2 Fonction dinitialisation

Pour fonctionner et se mettre en place, notre script a besoin de 3 constantes et une fonction qui les initialise:

_formulaire _champTexte

: le formulaire contenant notre champ texte : le champ texte lui-mme

_bouton

: le bouton submit de notre formulaire

function init(form,champ,submit){ _formulaire=form; // initialisation des balises _champTexte=champ; _bouton=submit; _champTexte.autocomplete="off"; // Creation d'une liste vide creeL(); _champTexteActuel=_champTexte.value; _champTexteAncien=_champTexteActuel; // Premier dclenchement de la fonction dans 200 millisecondes setTimeout("detectChangement()",200) }

Cette fonction est lie l'vnement window.onload de notre page html. Elle sera complte au fur et mesure par des besoins supplmentaires d'initialisation que nous rencontrerons tout au long de cet article.

3.3 Dtection des changements

Pour dtecter les changements dans le champ texte, nous avons une fonction qui vrifie priodiquement les changements survenus dans le champ texte et excute une requte vers le serveur si ncessaire. Cette fonction est appele la premire fois dans la fonction d'initialisation de notre script. Ici, nous choisissons une priode de 200ms.

var _champTexteAncien=""; // valeur prcdente du champ texte var _champTexteActuel=""; // valeur actuelle du champ texte var _cache=new Object(); // mcanisme de cache des requetes var _vide=new Array(); // tourne en permanence pour suggerer suite un changement du champ texte function detectChangement(){ _champTexteActuel = _champTexte.value; if(_champTexteAncien!=_champTexteActuel){ if(_champTexteActuel==""){ metsEnPage("",_vide) } else{ call(_champTexteActuel) } _champTexte.focus() //donne le focus champTexte } _champTexteAncien=_champTexteActuel;

setTimeout("detectChangement()",200); // la fonction se redclenchera dans 200 ms return true }

_resultCache est un objet qui nous permettra de constituer un cache des requtes, pour viter de les renvoyer systmatiquement (trs utile, par exemple en cas de backspace). La fonction metsEnPage mettra en place dans la page nos suggestions, et la fonction call excutera une requte, via l'objet xmlHttpRequest, vers le serveur de donnes.

3.4 Appel au serveur

Cette mthode va contacter notre serveur pour rcuprer au plus 10 suggestions pour le texte entr dans notre champ texte.
function call(valeur){ if(_xmlHttp&&(_xmlHttp.readyState!=0)){//readyState=0->requete non initialise _xmlHttp.abort() //abandonne la requete } _xmlHttp=objetXMLHTTP(); if(_xmlHttp){ //appel l'url distante //ouverture de la connexion avec le serveur _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true); _xmlHttp.onreadystatechange=function() { if(_xmlHttp.readyState==4&&_xmlHttp.responseXML) {// 4:connect var liste = traiteXml(_xmlHttp.responseXML) //responseXML reponse retourne parle serveur au format XML metsEnPage(valeur,liste) } }; // envoi de la requete _xmlHttp.send(null); } }

Cette fonction utilise l'objet xmlHttpRequest en mode asynchrone (le premier A de Ajax), comme le montre le troisime paramtre de la mthode open() qui vaut true. Lorsque la rponse du serveur revient, cela signifie que la requte sera termine (readyState==4), la fonction traiteXml transformera notre document XML en une liste de suggestions (Array de string) et la mthode metsEnPage sera dclenche, avec comme argument le texte dans le champ utilisateur et les possibilits de compltion. La mthode cache permet de garder les demandes prcdentes faites au serveur.

3.5 Traitement du document Xml.

Cette mthode va grer la transformation de la rponse du serveur au format XML en une liste de suggestions, sous forme de tableau de chanes de caractres.

10

function traiteXml(xmlDoc) { var options = xmlDoc.getElementsByTagName('option'); //tableau contenant la balise 'option' et son contenu var optionsL = new Array(); for (var i=0; i < options.length; ++i) { optionsL.push(options[i].firstChild.data); } return optionsL;//tableau contenant tous les mots entre la balise 'option' du fichier XML }

3.6 Cration automatique dune liste de suggestions lisibles sur la page web.
La dernire fonction que nous avons mettre en oeuvre est la fonction metsEnPage, qui va mettre les suggestions en place. Ces suggestions sont mises en place dans une liste de suggestions (liste puce UL), cre au moment de l'initialisation de notre script.
function creeL(){ _completeL=document.createElement("UL"); _completeL.id="completeDiv"; document.body.appendChild(_completeL); }

3.7 Ct serveur
Notre page HTML est maintenant capable de dialoguer avec notre serveur qui est ici rsum une simple page PHP, et d'intgrer dans la page le retour de ce serveur.
<?php header('Content-Type: text/xml;charset=utf-8'); echo(utf8_encode("<?xml version='1.0' encoding='UTF-8' ?><options>")); if (isset($_GET['debut'])) { $debut = utf8_decode($_GET['debut']); } else { $debut = ""; } $debut = strtolower($debut); $liste = array(login); function generateOptions($debut,$liste) { $MAX_RETURN = 10; $i = 0; foreach ($liste as $element) { if ($i<$MAX_RETURN && substr($element, 0, strlen($debut))==$debut) { echo(utf8_encode("<option>".$element."</option>")); $i++; } } } generateOptions($debut,$liste); echo("</options>"); ?>

11

La liste de mots utilise (dans la variable $liste, qui n'a pas t recopie ici) est la liste des noms dutilisateur de lENSICAEN. Le nombre maximum de possibilit retourn par cette page est 10. Le seul point particulier de cette page php est de bien noter que, de faon gnrale, il convient d'envoyer la rponse XML en UTF-8 bien propre, pour viter d'ventuels problmes d'encodage par la suite (accents qui disparaissent, document XML non reconnu...).

Conclusion
Cette technologie Ajax qui utilise en principe xmlHttpRequest va nous permettre de raliser des interfaces plus dynamiques, intuitives et plus rapide puisque seules les donnes modifier sont traites, nul besoin de recharger toutes la page Web puis de contrler en temps rel les formulaires en interrogeant le serveur. Mais il ne faut pas perdre de vue qu'environ 10% des internautes ont le javascript activ et seuls les navigateurs rcents supportant le xmlHttpRequest peuvent interprter correctement une page contenant de l'Ajax. En ce qui concerne l'utilisation synchrone ou asynchrone, si vous utilisez en synchrone, vous risquez de vous retrouver avec une page bloque qui attendra la rponse du serveur. Aujourd'hui, tout le monde veut faire du Ajax mais il faut en faire que si cela peut apporter un plus votre page Web.

12

Rfrences bibliographiques

http://fr.wikipedia.org/wiki/AJAX http://www.framasoft.net/article3991.html http://developer.mozilla.org/fr/docs/AJAX http://labs.google.com/suggestfaq.html http://maps.google.com/ http://www.dicodunet.com/actualites/referencement/74473-google-calendar-api.htm

13