Atelier : 1

Introduction AJAX
Objectifs spcifiques
A la fin de cette partie, ltudiant doit tre capable de : -

Dcouvrir le principe de fonctionnement dAjax Manipuler et tester quelques sites utilisant AJAX Prparer lenvironnement de travail pour bien dvelopper une application Ajax

 Plan du chapitre
Introduction AJAX ............................................................................................................................................... 1 1. 2. Quest-ce quAjax ? ....................................................................................................................................... 2 Principe de fonctionnement ............................................................................................................................ 2 2.1. 2.2. 3. 4. Fonctionnement dune application Web classique ................................................................................ 2 Fonctionnement dune application Ajax ................................................................................................ 3

Prsentation de divers sites utilisant AJAX .................................................................................................... 4 Prparation de lenvironnement de travail...................................................................................................... 5 4.1. 4.2. 4.3. 4.4. 4.5. Le navigateur Firefox ............................................................................................................................ 5 Configuration dun site dynamique dans Dreamweaver ........................................................................ 5 Test des pages JavaScript et PHP .......................................................................................................... 9 Prsentation de Firebug ....................................................................................................................... 10 Prsentation de IE Tab ......................................................................................................................... 11

Volume horaire
3 heures

Atelier I : Introduction AJAX

1. Quest-ce quAjax ?

e terme Ajax est apparu pour la premire fois dans un article de Jesse James Garret, sur le site de sa socit Adaptive Path, le 18 fvrier 2005.

Il sagit donc dun terme relativement rcent, qui est en ralit lacronyme de Asynchronous JavaScript + XML.
Figure 1: Jesse James Garret

Ajax nest pas une technologie spcifique et innovante mais une conjonction de plusieurs technologies anciennes. Ainsi, les applications Ajax utilisent en gnral tout ou partie des technologies suivantes : x x x x x Les feuilles de styles CSS qui permettent dappliquer une mise forme au contenu dune page XHTML. Le DOM qui reprsente la hirarchie des lments dune page XHTML. Lobjet XMLHttpRequest de JavaScript qui permet dassurer des transferts asynchrones (ou quelquefois synchrones) entre le client et le serveur. Les formats de donnes XML ou JSON utiliss pour les transferts entre le serveur et le client. Le langage de script client JavaScript qui permet linteraction de ces diffrentes technologies.

Lintrt pour Ajax dutiliser ces diffrentes technologies est quelles sont dj intgres dans la plupart des navigateurs actuels.

2. Principe de fonctionnement
2.1. Fonctionnement dune application Web classique
Dans une application Web classique, lorsque lutilisateur clique sur un lien ou valide un formulaire, le navigateur envoie une requte au serveur HTTP, qui lui retourne en rponse une nouvelle page, qui remplace purement et simplement la page courante. Ces applications Web traditionnelles t trs bas des requtes dites synchrones .

Figure 2: Communication synchrone avec le serveur.

Atelier I : Introduction AJAX

Les inconvenants de ce type de fonctionnement : x x x x consomme inutilement une partie de la bande passante et de ressources ct serveur. une grande partie du code (X)HTML tant commune aux diffrentes pages de l'application. Les interfaces utilisateur trs lentes. Manque dinteraction (web 2.0).

2.2. Fonctionnement dune application Ajax

Dans le cas dune application Ajax, un moteur une fois charg dans le navigateur restera en attente de lvnement pour lequel il a t programm. Pour cela, un gestionnaire dvnement JavaScript est configur pour appeler le moteur ds lapparition de lvnement concern. Lors de lappel du moteur, un objet XMLHttp-Request est instanci puis configur, une requte asynchrone est ensuite envoye au serveur. la rception de celle-ci, le serveur dmarrera son traitement et retournera la rponse HTTP correspondante. Cette dernire sera prise en charge par la fonction de rappel du moteur Ajax qui exploitera les donnes pour les afficher un endroit prcis de lcran.

Figure 3: Communication asynchrone avec le serveur.

Les avantages dAjax x x x x x x x x conomie de la bande passante Empche le rechargement de la page chaque requte vite le blocage de lapplication pendant le traitement de la requte Augmente la ractivit de lapplication Amliore lergonomie de linterface

Les inconvnients dAjax Pas de mmorisation des actions dans lhistorique Problme dindexation des contenus Dpendance de lactivation de JavaScript sur le navigateur
3

Atelier I : Introduction AJAX

3. Prsentation de divers sites utilisant AJAX

Actuellement de nombreux sites de renom utilisent dj des applications Ajax pour amliorer leur interface en augmentant linteractivit avec les internautes et en apportant de nouvelles fonctionnalits, plus proches des applications dordinateur de bureau que des sites Web traditionnels. Nous vous proposons ci-dessous de faire un rapide tour dhorizon de ces sites prcurseurs du Web 2.0 Aperu Site Description Google suggest a t le premier site exploiter le modle Ajax. Lorsque linternaute renseigne le champ de recherche avec un mot-cl, une requte est envoye au serveur chaque nouveau caractre saisi afin dafficher une liste de suggestions susceptibles de correspondre votre recherche.

Google suggest

Google Map

Google Maps est un service gratuit de cartographie en ligne. Le rechargement en temps rel des parties de la carte atteintes par l'interaction de l'utilisateur et sans avoir recharger entirement la page.

NetVibes

NetVibes est un des premiers sites avoir utilis de manire riche et interactive les diverses technologies qui gravitent autour d'AJAX. Vous pouvez crer des onglets, manipulez les fentres, interagissez avec, changez le titre la vole, ajoutez des widgets...

iGoogle

iGoogle est galement une interface personnalisable remplie de widget comme NetVibes.

Atelier I : Introduction AJAX

4. Prparation de lenvironnement de travail

4.1. Le navigateur Firefox
Nous utiliserons Firefox pour tester nos applications. En effet, Firefox a de nombreux avantages par rapport aux autres navigateurs : moins vulnrable et plus conforme aux standards, il dispose aussi de nombreuses extensions qui en font aujourdhui loutil indispensable au dveloppement Web. Parmi toutes ses extensions, deux dentre elles nous intressent particulirement : x x La premire est lextension firebug , elle permet de transformer votre navigateur en outil de dbogage. La seconde extension se nomme IE Tab , elle permet dactiver un mulateur du navigateur Internet Explorer tout en continuant dutiliser Firefox.

4.2. Configuration dun site dynamique dans Dreamweaver

tape 1 : Cration dun alias Lancez EasyPHP, puis cliquez droit sur l'icne d'EasyPHP cot de l'horloge dans la barre des tches puis Administration.

Sur la page Administration dEsyPHP, ajouter un alias en cliquant sur le bouton Ajouter, puis remplissez les champs : Nom pour lalias : site Chemin du rpertoire cr : z:\www Puis cliquez sur OK

Si tous se passe bien, vous avez un nouvel alias : site

Atelier I : Introduction AJAX

tape 2 : Cration dun site Depuis le menu, slectionnez Site puis Grer les sites. Dans le panneau Grer les sites, cliquez ensuite sur le bouton Nouveau.

Figure 4: Grer les sites.

La fentre Dfinition dun site saffiche lcran. Vous devez utiliser le mode Avanc (cliquez sur longlet Avanc) pour configurer votre site.

Figure 5: Dfinition du site : Infos locales.

Dans la catgorie Infos locales de la fentre Dfinition du site remplissez les champs : Nom du site : site Dossier racine : z:\www

Atelier I : Introduction AJAX

Figure 6: Configuration de la catgorie Infos locales.

Slectionner la catgorie Infos distantes dans le cadre de gauche de la fentre Dfinition du site remplissez les champs : Accs : Local Rseau. Rpertoire distant : z:\www.

Figure 7: Configuration de la catgorie Infos distantes.

Atelier I : Introduction AJAX

tape 3: Configuration du serveur dvaluation Pour configurer la catgorie Serveur dvaluation commencez par choisir le modle de serveur en slectionnant le couple PHP/MySQL dans la liste droulante. En dessous de ce premier champ, il faut choisir lAccs en mode Local/Rseau. Dans le troisime champ, vous navez rien changer car le dossier du serveur dvaluation est le mme que celui de la racine locale: z:\www\. Par contre, lURL sous laquelle sera disponible le site sur le serveur dvaluation est http://127.0.0.1:8888/site/

Figure 8: Alias de site.

Figure 9: Configuration du serveur d'valuation.

Atelier I : Introduction AJAX Vous avez maintenant termin la configuration de votre site et il ne vous reste plus qu cliquer sur le bouton OK en bas de la fentre pour valider votre site.

Figure 10: Grer les sites.

4.3. Test des pages JavaScript et PHP

Commenons par crer le fichier JavaScript externe. Pour cela cliquez dans le menu sur Fichier puis slectionnez Nouveau (ou utilisez le raccourci clavier Ctrl + N). Dans la fentre Nouveau document, slectionnez Page vierge dans la premire colonne et Javascript dans la seconde puis validez en cliquant sur le bouton Crer. Une fois le fichier cr, vous pouvez saisir votre programme JavaScript directement dans le fichier sans avoir ajouter de balise spcifique.

Pour ce premier exemple, nous nous contenterons dune simple fonction Afficher() excutant une fentre dalerte dans la page. Enregistrez ensuite ce fichier sous le nom test_js.js. Code source de la page test_js.js // JavaScript Document function afficher(){ alert("bonjour, JavaScript fonctionne") } Crez ensuite une page PHP qui devra afficher une page phpinfo. Cette page utilisera la fonction phpinfo() pour afficher lcran toutes les informations utiles sur la version et la configuration du PHP install sur votre serveur. Enregistrez ensuite ce fichier sous le nom test_php.php.

Atelier I : Introduction AJAX Code source de la page test_php.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="test_js.js"> </script> <title>Document sans titre</title> </head> <body onload="afficher()"> <?php echo "PHP fonctionne aussi, c'est formidable!"; phpinfo(); ?> </body> </html>

4.4. Prsentation de Firebug

Une fois Firebug install, une icne vient se placer droite dans la barre de statut en bas de l'cran.

Cette icne peut prendre 3 apparences : x x x cette icne indique que Firebug est dsactiv pour la page actuellement ouverte ; cette icne indique que Firebug n'a trouv aucune erreur dans la page ouverte ; cette icne (associe un nombre sa droite) indique le nombre d'erreurs que Firebug a rencontres sur la page ouverte.

10

Atelier I : Introduction AJAX Visualiser les erreurs La premire fonctionnalit remarquable de Firebug est l'affichage "amlior" des erreurs JavaScript. Firebug affiche les ventuelles erreurs dans la barre de statut de firefox en lieu et place de l'icne Firebug. En cas d'erreurs, ces dernires sont dtailles dans la console Firebug, comme illustr ci-dessous :

Le signalement d'une erreur est constitu du message d'erreur, de la localisation de cette erreur dans le code et enfin du nom de fichier JavaScript responsable de cette erreur. Ce nom de fichier est cliquable et amne la visualisation du fichier concern dans Firebug.

4.5. Prsentation de IE Tab

IE Tab est un module complmentaire qui vous permet d'utiliser le moteur de rendu du Microsoft Internet Explorer (IE), install sur votre systme d'exploitation, au sein du navigateur Mozilla Firefox.

Faites un clic droit sur l'icne symbolisant le moteur en cours d'utilisation. Cette icne se situe en bas droite de la fentre de votre navigateur. Lorsque le moteur de Firefox est utilis, c'est le logo de ce dernier qui apparat. Lorsque le moteur d'Internet Explorer est utilis, c'est l'icne d'Internet Explorer qui sera affiche.

11