6, bd marchal Juin F-14050 Caen cedex 4

Spcialit Informatique 1re anne 2eme semestre Anne 2006

Rapport de mini-projet

AJAX
Ralis par :
FALHI YASSINE & BENERROUA ABDELJALIL

Suivi et encadr par : Mr Sbastien Fourey

Table des matires

I. Introduction
..3

II.

Quest ce que AJAX ?.................................................................................................

.....3

1) Dfinition...
..3

2) Les lments cls dAJAX...

3

III. Quest ce quil apporte de nouveauts ?..................................................................4 1) Web classique

4

2)Web avec AJAX

....5

3)La communication Asynchrone

..7

.9

IV.

Exemple dutilisation dAJAX : Google Suggest 1) Prsentation ...9 2) Dmarche de ralisation... .9

16

V. Application utilisant AJAX

1)Prsentation de lapplication
..16

2)Codes des fichiers...

16

VI.

Conclusion
17

VII.

Bibliographie
18

I. INTRODUCTION :
De nos jours, plusieurs termes informatiques sont la mode. Web 2.0 est le plus rpandu dans le domaine Internet. Avec Web 2.0 la Toile a pris une dimension philosophique, o le Web a eu la forme dune plate-forme dchanges plutt quun ensemble de sites isols. Le nouveau Web rside ainsi dans le partage de linformation et le statut de linternaute a chang du client passif un collaborateur. AJAX est lun des concepts fondamentaux du nouveau Web interactif.

Dans la suite de ce travail, on va dtailler les diffrents aspects de ce concept.

II. Quest ce que AJAX ?

1) Dfinition :

AJAX est un acronyme dsignant : Asynchronous JavaScript And XML. AJAX nest pas une technologie mais plutt une technique qui permet de faire des appels asynchrones au serveur web depuis le client web. Comme son nom lindique, AJAX ne fait que reprendre des technologies dj existantes. 2) Les lments- cls dAJAX : AJAX incorpore : Prsentation du contenu en utilisant XHTML et CSS ; Affichage et interaction dynamique en utilisant le modle dobjet de document (DOM); Echange et manipulation de donnes en utilisant XML; Extraction de donnes asynchrones en utilisant XMLHttpRequest (faire des requtes http pour changer du XML) ; Et JavaScript qui est loutil ncessaire pour lier tout cela.

a- JavaScript : Cest un langage de script cre pour tre utilis lintrieur dapplication. Dans un navigateur Web, il permet linteraction avec les fonctionnalits de celui-ci. Les applications AJAX sont crites en JavaScript. b- Document Object Model (DOM) : Il reprsente la structure de la page sous forme dune collection dobjets pouvant tre manipuls avec du JavaScript. Utiliser des scripts sur le DOM nous permet de modifier linterface utilisateur en redessinant des parties de la page. c- L objet XMLHttpRequest : Il permet au programmeur Web dobtenir des donnes du serveur Web en tache de fond. Le format des donnes est prdestin tre du XML, mais cela fonctionne galement avec nimporte quelles donnes textuelles. .

III. Quest ce quil apporte de nouveauts ?

1) Web classique :(voir figure 1)

Avant toute chose, il serait bon de faire un point sur le processus classique de consultation dun site ou dune application web, et chronologiquement les diffrentes tapes sont les suivantes : 1. Vous saisissez une adresse dans votre navigateur. 2. Cette requte finie par arriver sur le serveur web qui hberge la page en question. 3. Le serveur vous retourne du texte au format HTML ou XHTML et ventuellement des images, feuilles de style, fichiers JavaScript, applets java 4. Vous tes dconnect du serveur web. 5. Votre navigateur les interprte et vous affiche la page. Donc, chaque fois que vous cliquiez sur un lien, vous recommencez ce processus en entier avec une nouvelle page. Dans le cas o un formulaire se trouve sur la page, vous envoyez les donnes sur le serveur qui vous rpondra aprs traitement de ces donnes.

2) Web avec AJAX :

L utilisation dAJAX va changer cette organisation. En fait, une application AJAX limine la manire traditionnelle de linteraction sur le web start-stop-start-stop , en prsentant un intermdiaire un moteur dAJAX entre lutilisateur et le serveur Web. (Voir figure 2) Au lieu de charger une page web, au dbut de la session, le navigateur charge un moteur dAJAX crit dans le JavaScript. Ce moteur est responsable de communiquer avec le serveur au nom de lutilisateur et de rendre linterface au client. Le moteur dAJAX permet linteraction de lutilisateur avec lapplication de se produire dune faon non synchronique indpendamment de la communication avec le serveur. Ainsi lutilisateur ne regarde jamais fixement une fentre de navigateur blanche et une icne de sablier, attendant autour le serveur pour faire quelque chose. Et tout moment, il peut aller chercher des information sur le serveur pour : Ajouter des lments la page Modifier le contenu dun bout de la page Insrer des donnes dans une base. Et toujours prsent chronologiquement, voici les diffrentes tapes des transactions avec un modle bas sur AJAX : 1) Le client engendre une action qui gnre une requte JavaScript vers le moteur AJAX. 2) Le moteur AJAX gnre une requte vers le serveur. 3) Le serveur excute des traitements et retourne des donnes XML au moteur AJAX du client. 4) Le moteur AJAX transforme les donnes XML en donnes HTML et envoie ce rsultat au client. 5) Le client interprte le code HTML et affiche la page par son navigateur. Remarque : la page nest pas renvoye entirement. Seules les donnes demandes au serveur sont incluses dans la page. Les applications donc sont trs nombreuses : a. Champs qui sauto compltent (comme Google Suggest). b. Listes droulantes lies. c. Contrle formulaire. d. Popups accessibles. e.

3) La communication Asynchrone :(voir figure 3 et 4) Chaque action dutilisateur qui normalement produirait une demande de http prend la forme dun appel de JavaScript au moteur dAJAX la place. Nimporte quelle rponse une action dutilisateur qui nexige pas un aller de nouveau au serveur tel que la validation de donnes simples, ditant des donnes dans la mmoire, et mme une certaine navigation le moteur manipule seule. Si le moteur a besoin de quelque chose du serveur afin de rpondre sil soumet des donnes pour le traitement, le code additionnel de chargement dinterface, ou rechercher de nouvelles donnes le moteur fait ces demandes dune manire non synchronique, habituellement en utilisant XML, sans caler linteraction dun utilisateur avec une application. Ceci est le principe de la communication asynchrone. Ainsi, cette communication asynchrone permet de rsoudre le problme de rechargement complet dune page Web et de faciliter la navigation.

IV.

Exemple dutilisation dAJAX : Google Suggest

1) Prsentation : L'exemple le plus parlant, et peut-tre le plus abouti, est celui de Google Suggest qui vous propose au fur et mesure que vous entrez le texte de votre recherche les compltions les plus populaires. Pour ce genre de choses, il est bien entendu impensable de passer ds le chargement de la page web l'ensemble des informations aux navigateurs clients. Le volume que cela reprsenterait saturerait le serveur en un temps record! C'est l qu'intervient Ajax, qui va aller chercher l'information sur le serveur et l'intgrer au client sans que celui-ci ait subir un rechargement complet de la page (voir figure 5). Mais comment a marche ?

Figure 5 : recherche sur Ajax dans Google Suggest

2) Dmarche de ralisation : L tape primordiale est de faire communiquer le client et le serveur, o nous allons mettre en oeuvre le fameux objet xmlHttpRequest qui permet de faire communiquer le navigateur

10

web avec le serveur, sans que l'utilisateur ait besoin de recharger sa page. L'objet xmlHttpRequest permet comme son nom l'indique d'effectuer une requte HTTP vers notre serveur , et d'effectuer un traitement dans la page au moment du retour de la requte. Dans ce cas, la requte donnera les 10 premires possibilits de compltion du champ texte.

i. Cot serveur :
Tout dabord, la page cot serveur qui va renvoyer les possibilits de compltion lutilisateur est un fichier php. Voici un exemple de fichier php utiliser:
<?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([...]); 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>"); ?>

Le nombre maximum de possibilit retourne par cette page est 10. Dans Google Suggest, on envisage que les compltions les plus probables soient retournes en premier. Ces traitements sont la charge du serveur. 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 aprs (accents qui disparaissent, document XML non reconnu...).

11

ii. Cot client : a- La page HTML : Le client cre une page html simple. b- L'objet xmlHttpRequest : Le premier script mit en place en place est celui permettant de crer un objet xmlHttpRequest. Cet objet permet d'effectuer des requtes vers le serveur, sans avoir recharger entirement la page. Pour notre part, nous allons utiliser la mthode suivante permettant de crer un nouvel objet, compatible entre tous les navigateurs actuels supportant l'objet xmlHttpRequest:
// retourne un objet xmlHttpRequest. // mthode compatible entre tous les navigateurs (IE/Firefox/Opera) function getXMLHTTP(){ var xhr=null; if(window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { xhr = null; } } } else { // XMLHttpRequest non support par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); } return xhr; }

c-. Mise en place des constantes Pour fonctionner et se mettre en place, le script va avoir besoin de 3 constantes:

documentForm : le formulaire contenant notre champ texte _inputField : le champ texte lui-mme _submitButton : le bouton submit du formulaire

La fonction d'initialisation du script prendra donc comme argument une rfrence sur ces trois lments.
var _documentForm=null; // le formulaire contenant notre champ

12

texte var _inputField=null; // le champ texte lui-mme var _submitButton=null; // le bouton submit de notre formulaire function initAutoComplete(form,field,submit){ _documentForm=form; _inputField=field; _submitButton=submit; _inputField.autocomplete="off"; } <script type="text/javascript"> window.onload = function(){initAutoComplete(document.getElementById('form-test'), document.getElementById('champtexte'),document.getElementById('bouton-submit'))}; </script>

d- Vrifier les changements du champ texte Pour mettre en place le mcanisme d'auto-compltion, nous devons tre capable de dtecter les changements dans le champ texte. Cela ne peut pas se faire avec le listener onchange du champ texte, car celui-ci n'est dclench qu'au moment ou le champ perd son focus. Dtecter les changements chaque touche appuye peut se rvler dangeureux, par exemple dans le cas des copier/coller ou autre qui peuvent soit passer inaperu, soit saturer le moteur Ajax de demandes. On met alors en place une mthode qui vrifiera priodiquement les changements survenus dans le champ texte, et excutera une requte vers le serveur si ncessaire.

13

var _oldInputFieldValue=""; // valeur prcdente du champ texte var _currentInputFieldValue=""; // valeur actuelle du champ texte var _resultCache=new Object(); // mcanisme de cache des requtes // tourne en permanence pour suggrer suite un changement du champ texte function mainLoop(){ _currentInputFieldValue = _inputField.value; if(_oldInputFieldValue!=_currentInputFieldValue){ var valeur=escapeURI(_currentInputFieldValue); var suggestions=_resultCache[_currentInputFieldValue]; if(suggestions){ // la rponse tait encore dans le cache metsEnPlace(valeur,suggestions) }else{ callSuggestions(valeur) // appel distant } _inputField.focus() } _oldInputFieldValue=_currentInputFieldValue; setTimeout("mainLoop()",200); // la fonction se redclenchera dans 200 ms return true }

Cette mthode sera

Cette mthode sera appele la premire fois dans la fonction d'initialisation du script. Elle contrle chacun de ces passages l'tat du champ texte et excute une requte vers le serveur si ncessaire. _resultCache est un objet qui permet de constituer un cache des requtes, pour viter de les renvoyer systmatiquement (trs utile, par exemple en cas de backspace). La fonction metsEnPlace mettra en place dans la page nos suggestions, et la fonction callSuggestions excutera une requte, via l'objet xmlHttpRequest, vers le serveur de donnes. La mthode ci-dessus parait un peu complexe pour le rsultat obtenu, mais elle va subir des changements. En particulier _currentInputFieldValue ne sera plus initialise l'intrieur de la mthode mais dans les autres mthodes de gestion des vnements. escapeURI est une mthode toute simple, permettant d'chapper les caractres spciaux du champ texte avant d'envoyer la requte au serveur. Cette mthode se base sur des mthodes JavaScript natives des navigateurs.
// chappe les caractres spciaux function escapeURI(La){

14

if(encodeURIComponent) { return encodeURIComponent(La); } if(escape) { return escape(La) } }

e- L'appel au serveur - mthode callSuggestions : Cette mthode va contacter le serveur pour rcuprer au plus 10 suggestions pour le texte entr dans notre champ texte.
var _xmlHttp = null; //l'objet xmlHttpRequest utilis pour contacter le serveur var _adresseRecherche = "options.php" //l'adresse interroger pour trouver les suggestions function callSuggestions(valeur){ if(_xmlHttp&&_xmlHttp.readyState!=0){ _xmlHttp.abort() } _xmlHttp=getXMLHTTP(); if(_xmlHttp){ //appel l'url distante _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true); _xmlHttp.onreadystatechange=function() { if(_xmlHttp.readyState==4&&_xmlHttp.responseXML) { var liste = traiteXmlSuggestions(_xmlHttp.responseXML) cacheResults(valeur,liste) metsEnPlace(valeur,liste) } }; // envoi de la requte _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 reviendra, le listener li l'vnement readyStateChange sera dclench. Concrtement, cela signifie que quand la requte sera termine (readyState==4), la fonction traiteXmlSuggestions transformera notre document XML en une liste de suggestions (Array de string) et la mthode metsEnPlace sera dclenche, avec comme argument le texte dans le champ utilisateur et les possibilits de compltion. La mthode cacheResults permet de garder les demandes prcdentes faites au serveur.

15

// Mcanisme de caching des rponses function cacheResults(debut,suggestions){ _resultCache[debut]=suggestions }

f-. Transformation du document XML mthode traiteXmlSuggestions : 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.
// Transformation XML en tableau function traiteXmlSuggestions(xmlDoc) { var options = xmlDoc.getElementsByTagName('option'); var optionsListe = new Array(); for (var i=0; i < options.length; ++i) { optionsListe.push(options[i].firstChild.data); } return optionsListe; }

16

g-. La mise en place des suggestions - mthode metsEnPlace La dernire fonction que nous avons mettre en oeuvre dans cette phase est la fonction metsEnPlace, qui va mettre les suggestions en place. Ces suggestions sont mises en place dans une liste de suggestions (liste puce UL pour le moment), cre au moment de l'initialisation du script d'auto-compltion.
var _completeListe=null; // la liste contenant les suggestions // cration d'une liste pour les suggestions // mthode appele l'initialisation function creeAutocompletionListe(){ _completeListe=document.createElement("UL"); _completeListe.id="completeListe"; document.body.appendChild(_completeListe); } function metsEnPlace(valeur, liste) { while(_completeListe.childNodes.length>0) { _completeListe.removeChild(_completeListe.childNodes[0]); } for (var i=0; i < liste.length; ++i) { var nouveauElmt = document.createElement("LI") nouveauElmt.innerHTML = liste[i] _completeListe.appendChild(nouveauElmt) } }

La page HTML est maintenant capable de dialoguer avec le serveur (qui est ici rsum une simple page PHP), et d'intgrer dans la page le retour de ce serveur. Cette tape reprsente le coeur d'une page utilisant Ajax. Il reste maintenant prsenter la liste de suggestions et lier les vnements survenants sur-le-champ texte la liste de suggestions, pour reconstruire un comportement de type liste droulante. Il n'est plus question d'Ajax dans ces deux tapes, simplement de JavaScript habituel, avec tous les problmes de compatibilit entre navigateurs, cest pour cela on vas pas en tenir compte.

17

VI. Application :
1) Prsentation : Cette application illustre une dmonstration simple de ce qui est une page Web utilisant AJAX. Pour crer une page Web avec Ajax, le travail se compose de trois parties (au moins): Un fichier html. Un fichier js (contenant le code JavaScript). Un fichier php ou cgi (contenant les donnes serveur).

L application propose de retourner des informations (nom, prnom, age ...) en entrant un nom valide 2) Les fichiers de lapplication : i- Fichier html : Ce fichier permet dexcuter notre application en faisant appel aux fonctions dfinie dans le fichier essai.js et le serveur : le fichier essai.cgi. ii- Fichier js: On y implmente les fonctions basiques ncessaires pour lapplication iii- Fichier cgi: Cest le fichier serveur, il contient les donnes

18

VI. Conclusion :
Au terme de ce projet dtude consacr Ajax, nous possdons une trs bonne vue densemble sur le sujet grce la lecture dune quantit volumineuse darticles, de tutoriaux et de livres. Nous connaissons maintenant les points forts mais aussi les limitations de cette technologie. Ajax suscite un grand engouement, mais a aussi ses dtracteurs, comme cest souvent le cas lors de chamboulement de concept tabli. Les attentes des utilisateurs voluant avec le temps, la plateforme Web est en train de rattraper son retard. On en veut pour preuve le fait que les entreprises suivent le pas, souvent enchantes de pouvoir faire voluer leurs applications tout en utilisant des technologies standards et dj connues par leurs dveloppeurs et apprcies par les utilisateurs (employs, clients). Une anne aprs la cration de lacronyme Ajax, lengouement est tel quil existe plus de 90 frameworks en rapport avec Ajax et plus dune quinzaine de livres . Toutefois, nous pensons que dici un deux ans, une convergence va seffectuer du ct des dveloppeurs vers deux cinq outils. Parmi les outils ayant de bonnes chances de percer se trouve celui de Microsoft nomm Atlas, qui sera intgr dans le prochain Visual Studio .NET, ainsi quOpen Ajax, un framework bas sur Eclipse et support par de nombreux grands acteurs de lindustrie tels que IBM, Oracle, Novell, RedHat, Google, Mozilla et beaucoup dautres. Pour rpondre la question est-ce quun jour Ajax va se substituer totalement aux applications de bureau ? nous rpondons : non. Ajax va certainement changer le visage du Web tel que nous le connaissons aujourdhui, et peut sans doute remplacer un client lourd simple, mais il reste peu probable que cette technologie puisse vraiment arriver, dans un proche avenir, au mme niveau en terme de ractivit et qualit dinteraction que celles de leurs homologues de bureau. Il faudra pour cela que les technologies Web voluent encore, ce qui ne manquera pas darriver.

19

VII. Bibliographie :

Polycopies de cours :

1) Cours de conception des sites web de Mr LUC BRUN. 2) Cours dIntroduction aux technologies dInternet des intervenants de FranceTelecom.
Magazines : 1) 2) PC EXPERT : N164 mai 2006. .NET : N107 mai 2006.

SITES WEB:

http://xml.com http://google.com http://www.google.com/webhp?complete=1&hl=en http://siddh.developper.com/articles/ajax http://dcabsson.developpez.com/articles/javascript/ajax/ ajaxautocompletion-pas-a-pas http://cvsoftware.googlepages.com http://www.interspire.com http://www.framasoft.net http://fr.wikipedia.org http://articles.mongueurs.net/magazines/perles http://bolo.developpez.com/xml/

20

Remerciement :
On tient remercier tout ceux qui nous en aider faire ce projet, en particulier Mr. Sbastien Fourey.

Lien pour lapplication : www.ecole.ensicaen.fr/~falhi/ajax/essai.html

21