jQuery-Ajax avec PHP
374 pages

Vous pourrez modifier la taille du texte de cet ouvrage

jQuery-Ajax avec PHP

-

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus
374 pages

Vous pourrez modifier la taille du texte de cet ouvrage

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

Description


jQuery-Ajax côté client et PHP-MySQL côté serveur
jQuery est un ensemble de bibliothèques JavaScript open source qui permettent de mettre en oeuvre des fonctionnalités avancées côté client (navigateur) de manière simple et rapide. Grâce à leur


jQuery-Ajax côté client et PHP-MySQL côté serveur



jQuery est un ensemble de bibliothèques JavaScript open source qui permettent de mettre en oeuvre des fonctionnalités avancées côté client (navigateur) de manière simple et rapide. Grâce à leur syntaxe compacte, il est possible de concevoir très facilement des interfaces utilisateur riches et ergonomiques. jQuery-Ajax est l'une de ces bibliothèques, dédiée à la réalisation d'applications Ajax. En l'espace de quelques années, elle est devenue incontournable dans le paysage du Web pour réaliser des applications dynamiques et interactives encore plus performantes. La mise en oeuvre de ces applications web de nouvelle génération nécessite souvent de déployer une base de données sur le serveur. Cet ouvrage prend l'exemple d'une base de données MySQL associée à des scripts PHP pour sélectionner, préparer et transmettre les informations requises par l'application Ajax.



Un ouvrage pédagogique et pratique



Grâce à ces 44 ateliers pratiques de difficulté croissante, cet ouvrage guide le lecteur pas à pas dans la construction d'un moteur Ajax, en partant d'une version minimaliste de quelques lignes de JavaScript jusqu'à des programmes performants et fi ables exploitant la technologie jQuery-Ajax. Il permet également de découvrir les différents formats disponibles (texte, HTML, XML, JSON ou RSS) pour échanger des flux de données avec le serveur. Il explique en outre comment une application Ajax, côté client, peut gérer des informations stockées dans une base de données MySQL via un script PHP. Enfin, la dernière partie est consacrée aux différentes technologies associées à Ajax (XHTML, CSS, XML, JavaScript, DOM, PHP et MySQL), en exposant pour chacune d'elles les connaissances nécessaires à la compréhension du livre.



À qui s'adresse cet ouvrage ?




  • À ceux qui souhaitent intégrer aisément et rapidement des applications web performantes dans leurs projets


  • À tous ceux qui désirent apprendre à concevoir des applications jQuery-Ajax couplées à PHP/MySQL



Sur le site www.editions-eyrolles.com




  • Téléchargez le code source des exemples et des 44 ateliers de l'ouvrage


  • Dialoguez avec l'auteur




  • Introduction à Ajax


    • Chronologie du Web


    • Ajax, un acteur du Web 2.0


    • Comment fonctionne Ajax ?


    • HTTP et l'objet XMLHttpRequest




  • Environnement de développement


    • Firefox, navigateur et débogueur à la fois


    • WampServer 2, une infrastructure serveur complète


    • Dreamweaver, un éditeur polyvalent




  • Ateliers de création d'applications Ajax-PHP


    • Applications Ajax-PHP synchrones


    • Applications Ajax-PHP sans paramètres


    • Applications Ajax-PHP avec paramètres GET


    • Applications Ajax-PHP avec paramètres POST


    • Applications Ajax-PHP avec réponses HTML, XML, JSON et RSS


    • Applications Ajax-PHP-MySQL


    • Bibliothèque jQuery


    • Plug-ins jQuery




  • Ressources sur les technologies associées


    • XHTML


    • CSS


    • XML


    • JavaScript


    • Gestion du DOM avec JavaScript


    • PHP


    • MySQL




  • Annexes


    • Configuration d'une infrastructure serveur locale pour Mac


    • Test et débogage (PHP et JavaScript)



Sujets

Informations

Publié par
Date de parution 17 juillet 2013
Nombre de lectures 550
EAN13 9782212236422
Poids de l'ouvrage 4 Mo

Informations légales : prix de location à la page 0,0210€. Cette information est donnée uniquement à titre indicatif conformément à la législation en vigueur.

Exrait

R sum
jQuery-Ajax c t client et PHP-MySQL c t serveur
jQuery est un ensemble de biblioth ques JavaScript open source qui permettent de mettre en uvre des fonctionnalit s avanc es c t client (navigateur) de mani re simple et rapide. Gr ce leur syntaxe compacte, il est possible de concevoir tr s facilement des interfaces utilisateur riches et ergonomiques. jQuery-Ajax est l une de ces biblioth ques, d di e la r alisation d applications Ajax. En l espace de quelques ann es, elle est devenue incontournable dans le paysage du Web pour r aliser des applications dynamiques et interactives encore plus performantes. La mise en uvre de ces applications web de nouvelle g n ration n cessite souvent de d ployer une base de donn es sur le serveur. Cet ouvrage prend l exemple d une base de donn es MySQL associ e des scripts PHP pour s lectionner, pr parer et transmettre les informations requises par l application Ajax.
Un ouvrage p dagogique et pratique
Gr ce ces 44 ateliers pratiques de difficult croissante, cet ouvrage guide le lecteur pas pas dans la construction d un moteur Ajax, en partant d une version minimaliste de quelques lignes de JavaScript jusqu des programmes performants et fiables exploitant la technologie jQuery-Ajax. Il permet galement de d couvrir les diff rents formats disponibles (texte, HTML, XML, JSON ou RSS) pour changer des flux de donn es avec le serveur. Il explique en outre comment une application Ajax, c t client, peut g rer des informations stock es dans une base de donn es MySQL via un script PHP. Enfin, la derni re partie est consacr e aux diff rentes technologies associ es Ajax (XHTML, CSS, XML, JavaScript, DOM, PHP et MySQL), en exposant pour chacune d elles les connaissances n cessaires la compr hension du livre.

Au sommaire
Partie I. Introduction Ajax Chronologie du Web Ajax, un acteur du Web 2.0 Comment fonctionne Ajax ? HTTP et l objet XMLHttpRequest Partie II. Environnement de d veloppement Firefox, navigateur et d bogueur la fois Wamp5, une infrastructure serveur compl te Dreamweaver, un diteur polyvalent Partie III. Ateliers de cr ation d applications Ajax-PHP Applications Ajax-PHP synchrones Applications Ajax-PHP sans param tres Applications Ajax-PHP avec param tres GET Applications Ajax-PHP avec param tres POST Applications Ajax-PHP avec r ponses HTML, XML, JSON et RSS Applications Ajax-PHP-MySQL Biblioth que jQuery Plug-ins jQuery Partie IV. Ressources sur les technologies associ es XHTML CSS XML JavaScript Gestion du DOM avec JavaScript PHP MySQL Annexes Configuration d une infrastructure serveur locale pour Mac Test et d bogage (PHP et JavaScript).
qui s adresse cet ouvrage ?
- ceux qui souhaitent int grer ais ment et rapidement des applications web performantes dans leurs projets
- tous ceux qui d sirent apprendre concevoir des applications jQuery-Ajax coupl es PHP/MySQL
Biographie auteur

J.-M. Defrance
Dipl m d un DEA de didactique de l informatique, Jean-MarieDefrance enseigne le multim dia Gobelins, l cole de l image. Il est par ailleurs directeur technique de l Agence W, soci t sp cialis e dans le d veloppement de sites dynamiques.
www.editions-eyrolles.com
jQuery-Ajax
avec PHP
44 ateliers pour ma triser jQuery

Jean - Marie Defrance
DITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
En application de la loi du 11 mars 1957, il est interdit de reproduire int gralement ou partiellement le pr sent ouvrage, sur quelque support que ce soit, sans l autorisation de l diteur ou du Centre Fran ais d exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris. Groupe Eyrolles, 2008, 2010, 2011, 2013, ISBN : 978-2-212-13720-0
Du m me auteur
J.-M. D EFRANCE . - Samsung Galaxy S III.
N 13544, 2012, 310 pages.
J.-M. D EFRANCE . - la d couverte de son iPhone.
N 12795, 2011, 206 pages.
J.-M. D EFRANCE . - PHP/MySQL avec Dreamweaver CS4.
N 12551, 2009, 536 pages.
Autres ouvrages sur le d veloppement web
. S ARRION . - jQuery 1.7 et jQuery UI (2 e dition).
N 13504, 2012, 568 pages.
. S ARRION . - M mento jQuery.
N 13488, 2012, 14 pages.
. S ARRION . - jQuery mobile.
N 13388, 2012, 602 pages.
R. R IMEL . - HTML 5 (2 e dition). Une r f rence pour le d veloppeur web .
N 13638, 2013, 752 pages.
C. P ORTENEUVE . - Bien d velopper pour le Web 2.0 (2 e dition).
N 12391, 2008, 674 pages.
O. A NDRIEU . - R ussir son r f rencement web ( dition 2013) .
N 13664, 2013, 552 pages.
R. G OETTER . - M mento CSS3 (2 e dition).
N 13665, 2013, 14 pages.
R. G OETTER . - CSS avanc es (2 e dition). Vers HTML 5 et CSS 3 .
N 13405, 2013, 386 pages.
R. G OETTER . - M mento XHTML (2 e dition).
N 12541, 2009, 14 pages.
Remerciements

Je remercie Thorsten Kruske et Alain Bertaut pour leur aide dans la r daction de cet ouvrage ainsi que Matthieu Amiot et Claire Defrance pour leur collaboration dans la r alisation des illustrations.
Table des mati res
P ARTIE I - I NTRODUCTION A JAX
CHAPITRE 1
Chronologie du Web
1990 : d but du Web statique
1995 : le Web orient client
2000 : le Web orient serveur
2005 : le compromis client-serveur tant attendu !
Les tendances du Web 2.0
CHAPITRE 2
Ajax, un acteur du Web 2.0
Les fondements du Web 2.0
Application Internet riche (RIA)
Ajax, l application Internet riche l g re
Ajax, dans la droite ligne du Web 2.0
La gen se d Ajax
quoi sert Ajax ?
Actualisation d information en t che de fond
Compl tion automatique
Contr le en temps r el des donn es d un formulaire
Navigation dynamique
Lecture d un flux RSS
Sauvegarde de documents ditables
Personnalisation d interface Web

Widget
Chargement progressif d information
Moteur de recherche sans rechargement de la page
Qui utilise Ajax ?
Google
Gmail
Google Maps
Yahoo! News
Amazon
Google Calendar
Netvibes
Google Talk
Wikip dia
CHAPITRE 3
Comment fonctionne Ajax ?
Ajax, un amalgame de technologies
Des ingr dients d j op rationnels
JavaScript, le ciment des fondations d Ajax
Comparatif avec les applications Web traditionnelles
Fonctionnement d une application Web statique
Fonctionnement d une application Web dynamique
Fonctionnement d une application Ajax
Chronogrammes des changes client-serveur
Chronogramme d une application Web dynamique traditionnelle
Chronogramme d une application Ajax en mode asynchrone
Les avantages d Ajax
conomie de la bande passante
Emp che le rechargement de la page chaque requ te
vite le blocage de l application pendant le traitement de la requ te
Augmente la r activit de l application
Am liore l ergonomie de l interface
Les inconv nients d Ajax
Pas de m morisation des actions dans l historique

Probl me d indexation des contenus
D pendance de l activation de JavaScript sur le navigateur
Les cadres cach s, une solution alternative Ajax
La technique du cadre cach
Avantages des cadres cach s
Inconv nients des cadres cach s
CHAPITRE 4
HTTP et l objet XMLHttpRequest
Rappels sur le protocole HTTP
Les requ tes HTTP
La r ponse HTTP
Caract ristiques de l objet XMLHttpRequest
D j op rationnel depuis 1998
Une instanciation en cours d homologation
Propri t s et m thodes de l objet XMLHttpRequest
Cr ation de moteurs Ajax de base
Envoi d une requ te synchrone sans param tre
Envoi d une requ te asynchrone sans param tre
Ajout d un traitement des erreurs HTTP du serveur
Envoi d une requ te asynchrone avec un param tre GET
Envoi d une requ te asynchrone avec un param tre POST
R cup ration du r sultat de la requ te avec responseText ou responseXML
Utilisation de innerHTML pour afficher le r sultat de la requ te
Utilisation d un gestionnaire d v nements pour d clencher l envoi de la requ te
P ARTIE II - E NVIRONNEMENT DE D VELOPPEMENT
CHAPITRE 5
Firefox, navigateur et d bogueur la fois
Le navigateur Firefox
Installation de Firefox
Utilisation de Firefox

Extensions Firebug et IE Tab
Installation des extensions
CHAPITRE 6
WampServer, une infrastructure serveur compl te
Choix de l infrastructure serveur
Mise en uvre d une infrastructure serveur
Proc dure d installation de la suite WampServer
Arr t et d marrage de WampServer
D couverte du manager de WampServer
Test du serveur local
Gestion des extensions PHP
Extensions install es par d faut
Installation d une extension
Gestionnaire phpMyAdmin
CHAPITRE 7
Dreamweaver, un diteur polyvalent
Pourquoi utiliser Dreamweaver ?
Pr sentation de l interface de Dreamweaver
D finition d un site
Informations locales
Informations distantes
Serveur d valuation
diteur HTML
La barre d outils Insertion
Le panneau Propri t s
S lecteur de balise
Indicateur de code HTML
diteur PHP
Options de l diteur de code
Indicateur de code PHP
La barre d outils Insertion, option PHP

Test d une page PHP
Les r f rences PHP de poche
diteur JavaScript
Insertion d un script JavaScript dans une page HTML
Test d une page JavaScript
Lier un fichier JavaScript externe dans une page HTML
Les fragments de code JavaScript
Les r f rences JavaScript de poche
P ARTIE III - A TELIERS DE CR ATION D APPLICATIONS A JAX -PHP
CHAPITRE 8
Applications Ajax-PHP synchrones
Atelier 8-1 : requ te synchrone sur un fichier texte sans feuille de styles
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 8-2 : requ te synchrone sur un fichier texte avec une feuille de styles
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 8-3 : requ te HTTP traditionnelle avec un traitement PHP et une feuille de styles
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 8-4 : requ te synchrone sur un fichier PHP avec une feuille de styles
Composition du syst me

Fonctionnement du syst me
Conception du syst me
Test du syst me
CHAPITRE 9
Applications Ajax-PHP sans param tre
Atelier 9-1 : requ te asynchrone sur un fichier PHP avec une feuille de styles
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 9-2 : requ te asynchrone avec contr le de la propri t readyState
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 9-3 : requ te asynchrone avec contr le de la propri t status
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 9-4 : requ te asynchrone avec indicateur de traitement et contr le du bouton
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 9-5 : requ te asynchrone avec une fonction universelle de cr ation d objet XHR
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me

Atelier 9-6 : requ te asynchrone avec anticache
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 9-7 : requ te asynchrone avec les fonctions DOM
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 9-8 : requ te asynchrone avec fichiers JS externes
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
CHAPITRE 10
Applications Ajax-PHP avec param tres GET
Atelier 10-1 : requ te asynchrone avec un champ texte
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 10-2 : requ te asynchrone avec test du navigateur
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 10-3 : requ te asynchrone avec gestion de l encodage
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me

Atelier 10-4 : requ te asynchrone avec contr le de la saisie
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 10-5 : double requ te asynchrone avec actualisation automatique
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
CHAPITRE 11
Applications Ajax-PHP avec param tres POST
Atelier 11-1 : requ te asynchrone POST avec un champ texte
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 11-2 : requ te asynchrone POST avec param tres en XML
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 11-3 : requ te asynchrone POST avec param tres issus d un arbre DOM XML
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 11-4 : requ te asynchrone POST avec param tres issus d un arbre DOM XML multinavigateur et compatible PHP 4
Composition du syst me
Fonctionnement du syst me

Conception du syst me
Test du syst me
Atelier 11-5 : requ te asynchrone POST avec param tres JSON
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
CHAPITRE 12
Applications Ajax-PHP avec r ponses HTML, XML, JSON et RSS
Atelier 12-1 : requ te avec r ponse en HTML
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 12-2 : requ te avec r ponse en XML
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 12-3 : requ te avec r ponse en JSON sans biblioth ques externes
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 12-4 : requ te avec r ponse en JSON avec biblioth ques externes
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 12-5 : requ te avec r ponse en XML et conversion JSON
Composition du syst me
Fonctionnement du syst me

Conception du syst me
Test du syst me
Atelier 12-6 : requ te avec r ponse RSS
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
CHAPITRE 13
Applications Ajax-PHP-MySQL
Atelier 13-1 : v rification instantan e de la saisie dans une base de donn es
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 13-2 : insertion dans la base de donn es issues d un formulaire
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 13-3 : r cup ration d une liste de donn es dans la base de donn es
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 13-4 : double menu d roulant dynamique
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 13-5 : mise jour de donn es dans la base de donn es
Composition du syst me
Fonctionnement du syst me

Conception du syst me
Test du syst me
CHAPITRE 14
Biblioth que jQuery
Introduction jQuery
La classe jQuery
Les s lecteurs
Les m thodes
Tester le chargement du DOM
Instructions de manipulation du DOM avec ou sans jQuery
Configuration de gestionnaires d v nements avec ou sans jQuery
Cr ation d effets graphiques avec jQuery
Cr ation de moteurs Ajax avec jQuery
Atelier 14-1 : requ te asynchrone POST et r ponse au format Texte avec jQuery
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 14-2 : requ te asynchrone POST et r ponse au format JSON avec jQuery
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 14-3 : requ te asynchrone POST et r ponse au format XML avec jQuery
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 14-4 : v rification instantan e de la saisie dans une base de donn es avec jQuery
Composition du syst me
Fonctionnement du syst me

Conception du syst me
Test du syst me
Atelier 14-5 : double menu d roulant dynamique avec jQuery
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
CHAPITRE 15
Plug-ins jQuery
Mise en uvre d un plug-in jQuery
Localisation des plug-ins jQuery
Comment installer un plug-in jQuery ?
Atelier 15-1 : plug-in UI Tabs : menu onglets
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 15-2 : plug-in jQuery.Suggest : autosuggestion
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 15-3 : plug-in jQuery.calendar : widget calendrier
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 15-4 : plug-in WYMeditor : diteur xHTML
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 15-5 : plug-in jQuery lightBox : galerie d images
Composition du syst me

Fonctionnement du syst me
Conception du syst me
Test du syst me
Atelier 15-6 : plug-in jQuery Fileuploader : t l chargement de fichiers
Composition du syst me
Fonctionnement du syst me
Conception du syst me
Test du syst me
P ARTIE IV - R ESSOURCES SUR LES TECHNOLOGIES ASSOCI ES
CHAPITRE 16
XHTML
Les bases du XHTML
Les contraintes du XHTML
Composition d un l ment HTML
Structure d un document XHTML
La d claration XML
Le DOCTYPE
L l ment racine du document
La balise meta Content-Type
La balise de titre
Une page XHTML compl te
CHAPITRE 17
CSS
Syntaxe des CSS
Le s lecteur de style
La d claration d un style
Les propri t s et les valeurs d un style
Application d un style
Diff rentes mani res de sp cifier un style
L effet cascade d un style
L effet d h ritage d un style

CHAPITRE 18
XML
D finition du XML
Avantages du XML
Utilisations du XML
Pour le stockage de donn es
Pour le transfert de donn es
Structure d un document XML
L en-t te
L l ment
L attribut
Les valeurs
Les commentaires
R gles d criture d un document XML bien form
DTD et document XML valide
CHAPITRE 19
JavaScript
La syntaxe de JavaScript
Emplacements des codes JavaScript
Les commentaires
La hi rarchie JavaScript
Les gestionnaires d v nements
Les variables
Les tableaux (Array)
Les objets
Instructions et point-virgule
Les op rateurs
Les fonctions
D claration d une fonction
Appel d une fonction
Variables locales ou globales
Structures de programme
Structures de boucle
Structures d exception try-catch

CHAPITRE 20
Gestion du DOM avec JavaScript
Les sp cifications du DOM
L arbre DOM
L arbre DOM, une repr sentation du document en m moire
Terminologie d un arbre DOM
Organisation d un n ud l ment XHTML
Conna tre les informations d un n ud
nodeType : type du n ud
nodeName : nom du n ud
nodeValue : valeur du n ud
id : valeur de l identifiant d un n ud
className : valeur de la classe d un n ud
offsetXxxx : dimensions et coordonn es d un l ment
Acc der un n ud de l arbre
getElementById(id) : r cup re un l ment par son identifiant
getElementsByTagName(tagName) : r cup re la liste d l ments d une m me balise
getElementsByName(name) : r cup re la liste d l ments portant le m me nom
getAttribute(attributeName) : r cup re la valeur d un attribut
length : indique le nombre d l ment d une liste de n uds
Se d placer dans les n uds de l arbre
childNodes : r cup re la liste des n uds enfants
parentNode : retourne le n ud parent
nextSibling : retourne le n ud fr re suivant
previousSibling : retourne le n ud fr re pr c dent
firstChild : retourne le premier n ud enfant
lastChild : retourne le dernier n ud enfant
hasChildNodes : retourne true s il y a des n uds enfants
Modifier les n uds de l arbre
createElement(nomBalise) : cr ation d un l ment
createTextNode(contenu) : cr ation d un n ud texte
setAttribute(nom,valeur) : cr ation ou modification d un attribut
appendChild(noeud) : insertion d un n ud apr s le dernier enfant
insertBefore(nouveauNoeud,noeud) : insertion d un n ud avant un autre n ud

replaceChild(nouveauNoeud,noeud) : remplacement d un n ud par un autre n ud
removeChild(noeud) : suppression d un n ud
cloneChild(option) : clonage d un n ud
style : modifier le style d un n ud l ment
innerHTML : lecture ou criture du contenu d un l ment
G rer les v nements avec DOM Events
Les v nements et leur gestionnaire
L objet event et ses propri t s
R cup ration de event dans la fonction de traitement
CHAPITRE 21
PHP
La syntaxe de PHP
Extension de fichier PHP
Balises de code PHP
Les commentaires
Les variables
Les constantes
Expressions et instructions
Les op rateurs
Biblioth ques de fonctions int gr es PHP
Fonctions PHP g n rales
Fonctions PHP d di es aux tableaux
Fonctions PHP d di es aux dates
Fonctions PHP d di es aux cha nes de caract res
Fonctions PHP d di es aux fichiers
Fonctions PHP d di es MySQL
Fonctions utilisateur
Gestion des fonctions utilisateur
Structures de programme
Structures de choix
Structures de boucle
Instructions de contr le
Redirection interpage
Gestion XML avec SimpleXML

CHAPITRE 22
MySQL
M thodes d ex cution d une commande SQL
Conditions de test des exemples de commande SQL
Commande SELECT
Commande SELECT simple
Commande SELECT avec des alias
Commande SELECT avec des fonctions MySQL
Commande SELECT avec la clause DISTINCT
Commande SELECT avec la clause WHERE
Commande SELECT avec la clause ORDER BY
Commande SELECT avec la clause LIMIT
Commande SELECT avec jointure
Commande INSERT
Commande INSERT partir de valeurs : m thode 1
Commande INSERT partir de valeurs : m thode 2
Commande INSERT partir d une requ te
Commande DELETE
Commande UPDATE
Commande REPLACE
Configuration des droits d un utilisateur
Sauvegarde et restauration d une base de donn es
Sauvegarde
Restauration
A NNEXES
Annexe A
Configuration d une infrastructure serveur locale pour Mac
Mamp, une infrastructure serveur pour mac
Installation de Mamp
Utilisation de Mamp

Annexe B
Test et d bogage (PHP et JavaScript)
Conseils pour bien programmer
Utilisez l indentation
Commentez votre code
Bien nommer les variables et les fichiers
L erreur du point-virgule
Utilisez les fonctions
Utilisez les fragments de code
Construisez brique par brique
Techniques de d bogage PHP
Analyse d un message d erreur PHP
Utilisez l quilibrage des accolades
D tectez les erreurs de logique
La fonction phpinfo()
Les pi ges
Les fonctions de d bogage
Suppression des messages d erreur
Testez vos requ tes SQL dans phpMyAdmin
Techniques de d bogage JavaScript
La fonction alert()
L l ment title
La console de Firebug
L inspecteur DOM de Firebug
L inspecteur HTML de Firebug
Les erreurs de syntaxe avec Firebug
La fen tre Script de Firebug
Observer les requ tes XMLHttpRequest
Index
Partie I
Introduction Ajax
Dans cette premi re partie, nous vous proposons de d couvrir ce que repr sente Ajax et la place que cette technologie prend au sein du Web 2.0. Pour bien appr hender le fonctionnement d un nouveau concept il est souvent int ressant de conna tre son historique, aussi nous commencerons par un rapide r capitulatif des tapes cl s de l volution du Web pour montrer en quoi le Web 2.0 est devenu incontournable dans l Internet d aujourd hui et de demain. Savoir ce qu on peut r aliser avec Ajax et conna tre les grands acteurs d Internet qui l utilisent vous convaincra de l int r t que vous pourrez tirer de cette technologie dans vos futures applications Web. Enfin, comprendre comment fonctionne Ajax, d tailler ses avantages et ses inconv nients, et pr senter l objet XMLHttpRequest qui constitue le c ur de cette technologie, nous a sembl un passage oblig avant que vous ne r alisiez vos premi res applications Ajax-PHP.
1
Chronologie du Web

Depuis le d but d Internet, le Web a volu par paliers et plusieurs phases se sont succ d es avant d obtenir les applications en ligne que l on utilise aujourd hui. Curieusement, les p riodes charni res de ces volutions sont espac es d environ 5 ans et si l on anticipe l volution venir, il y a de fortes chances que 2010 soit l ann e qui marquera la maturit du Web 2.0.
1990 : d but du Web statique

Au d but du Web, les pages HTML se limitaient l affichage de simples textes et quelques illustrations (dont l affichage tait d ailleurs souvent bloqu pour am liorer la fluidit de la navigation sur les r seaux faible d bit de l poque). Au fil des ann es, avec l av nement d Internet tel qu on le conna t, les exigences des utilisateurs ont volu . En effet, la seule interactivit possible sur les pages HTML tait l affichage une nouvelle page lors d un clic sur un lien hypertexte. Il tait donc impossible d obtenir le moindre effet visuel (comme un simple roll-over sur une image par exemple) sans avoir recours une technologie compl mentaire. De plus, l envoi d une requ te au serveur Web, suite un clic sur un lien hypertexte par exemple, engendrait un cycle de traitement long et fastidieux qui freinait consid rablement la r activit des applications sur des r seaux et des serveurs souvent sous-dimensionn s pour le trafic sans cesse croissant de l poque.

Les sites statiques
Les sites statiques sont constitu s d un ensemble de pages HTML reli es entre elles par des liens hypertextes qui permettent de naviguer de l une l autre. Le protocole utilis pour transf rer des informations Web sur Internet s appelle HTTP. Une requ te HTTP ( http://www.eyrolles.com/page.htm par exemple) est envoy e vers le serveur afin d acc der la page d sir e et de la visualiser dans le navigateur du poste client (voir tape 1 de la figure 1-1 ).
Lorsque le serveur Web re oit cette requ te, il recherche la page demand e parmi toutes les pages HTML pr sentes sur le site concern et la renvoie ensuite au client (voir tape 2 de la figure 1-1 ).

Les sites statiques ( suite)
Le code HTML re u par le poste client est alors interpr t et affich par le navigateur (voir tape 3 de la figure 1-1 ). C est ce qu on appelle l architecture client-serveur (je demande, on me sert) : le client est le navigateur Internet (Internet Explorer, Firefox...) et le serveur est le serveur Web sur lequel sont stock es les informations du site Internet.
Ce type de site est tr s simple r aliser et la plupart des premiers sites ont t con us sur ce mod le. Cependant, ce concept est limit car il manque cruellement d interactivit .

Figure 1-1
L architecture client-serveur d un site statique : le poste client envoie au serveur une requ te HTTP ; le serveur Web recherche puis fournit au poste client la page demand e, qui est ensuite interpr t e par le navigateur .

HTTP
HTTP ( HyperText Transfer Protocol ) est le protocole utilis principalement par toutes les applications Web : celui-ci permet l change de donn es entre un serveur Web et un navigateur install sur un poste client. Ainsi, le navigateur peut envoyer au serveur Web une requ te formalis e sous la forme de l adresse de la page cibl e (URL) et recevoir en r ponse la page HTML correspondante qui remplacera compl tement la page actuellement affich e dans le navigateur. Comme la plupart des protocoles applicatifs d Internet (FTP, SMTP, POP3 ) HTTP s appuie sur un autre protocole de transport, le TCP/IP ( Transmission Control Protocol/Internet Protocol ) qui assure l acheminement des donn es par paquets (l ensemble des donn es est scind en petits paquets pendant la phase du transfert) d un point un autre.

(x)HTML
HTML ( HyperText Markup Language ) est le langage de description d une page Web. Ce langage s appuie sur un ensemble de balises standards interpr t es par le navigateur afin de d finir le contenu et la mise en forme de la page.
Le XHTML ( eXtensible HyperText Markup Language ) quant lui, est une volution du pr c dent langage conforme aux contraintes du XML et impose le respect de certaines r gles pour qu une page soit bien form e (noms des balises en minuscule, attributs des balises obligatoirement encadr s par des guillemets, fermeture obligatoire de toutes les balises ).

1995 : le Web orient client

Pour rem dier au manque d interactivit et aux probl mes d engorgement des r seaux et de saturation des serveurs Web, les d veloppeurs ont commenc mettre en uvre diverses technologies c t client afin de d lester le serveur (r duisant ainsi le trafic sur le r seau) de t ches pouvant tre trait es directement par le navigateur. Ainsi chaque diteur de navigateur Web a rapidement commenc impl menter dans son logiciel des interpr teurs pour son propre langage. Aussi, Netscape avec JavaScript et Microsoft avec JScript permirent de pouvoir enfin ex cuter des scripts c t client ; mais le non-respect des standards du W3C de certains diteurs compliquait le travail des d veloppeurs qui devaient tenir compte des diff rences d interpr tation de leur code d un navigateur l autre.
Ces nouvelles technologies client ont soulev aussi un autre probl me : celui de la s curit des utilisateurs. Ainsi les diteurs des navigateurs durent rapidement ajouter dans les options de leurs logiciels la possibilit de d sactiver l ex cution des diff rentes technologies client pour r pondre la crainte des utilisateurs. Le fait m me que certains navigateurs ne puissent plus ex cuter les scripts client a constitu un frein important leur usage car les d veloppeurs devaient alors pr voir des alternatives en mode d grad pour permettre tous les utilisateurs d utiliser leur application.
Par la suite, d autres soci t s ont d velopp des programmes propri taires (applets Java, ActiveX, Flash ) pouvant tre int gr s dans une page Web et ex cut s dans le navigateur gr ce un plug-in (extension du navigateur). Le Web disposait alors d une pl thore de technologies client mais le manque de standardisation et l h t rog n it des navigateurs en rendaient leur usage tr s difficile.
2000 : le Web orient serveur

partir des ann es 2000, l volution croissante des complications rencontr es avec les technologies client a entra n une migration progressive des applications c t serveur. Motiv s par les probl mes de compatibilit et de s curit li s aux applications c t client, bon nombre de d veloppeurs ont adapt et install leur programme c t serveur pour mieux satisfaire les internautes (ce qui explique en partie l extraordinaire d veloppement de langages serveurs comme le PHP). En quelques ann es la majorit des sites ont subi des refontes structurelles pour s adapter une infrastructure Web exploitant principalement des applications c t serveur et cela malgr une organisation du serveur Web plus complexe li e l usage de ces technologies serveur.
Cependant, l utilisation intensive des technologies serveur n est pas non plus sans inconv nient. En effet, un usage exclusif d applications serveur (alors que certaines gagneraient tre ex cut es c t client) entra ne l change, entre le client et le serveur, d un grand nombre de requ tes qui ont vite fait d engorger le r seau et de ralentir fortement la r activit de l application. De m me, chaque requ te, le serveur envoie la page HTML compl te avec tout son lot d informations redondantes, ce qui ralentit fortement l change d informations entra nant des temps d attente importants pour l utilisateur.

Les sites interactifs c t client
La solution la plus simple pour cr er de l interactivit consiste int grer quelques lignes de code JavaScript dans une page HTML. Lorsqu une requ te HTTP appelle la page HTML (voir tape 1 de la figure 1-2 ), le serveur Web la retourne au poste client afin qu elle puisse tre interpr t e comme une page HTML classique (voir tapes 2 et 3 de la figure 1-2 ). Le script inclus dans la page est ensuite trait par le navigateur (donc c t client) d s que survient l v nement pour lequel il a t programm (voir tape 4 de la figure 1-2 ).
Les scripts c t client sont simples mettre en uvre car ils ne n cessitent pas une infrastructure serveur sp cifique. De plus, ils sont tr s r actifs car le script s ex cute directement sur le poste client.

Figure 1-2
Utilisation d un script c t client avec JavaScript : il existe une d pendance relative au navigateur mais l interactivit est rapide .
En revanche, les programmes JavaScript souffrent de probl mes de compatibilit avec la configuration du client sur lequel ils s ex cutent et peuvent se comporter diff remment selon le type d ordinateur et la version du navigateur. Par exemple, un script en JavaScript peut parfaitement fonctionner sur Firefox mais poser des probl mes avec Internet Explorer ou cr er des erreurs sous IE 5 alors qu il fonctionne sous IE 6 ou IE 7. De m me, les r sultats peuvent varier selon qu on utilise un PC ou un Mac. Tout cela impose au concepteur multim dia d effectuer des tests importants s il d sire que sa page interactive fonctionne sur toutes les plates-formes et dans toutes les configurations.
D autres probl mes li s la s curit des donn es constituent aussi un frein l usage des technologies client. En effet, le code source des programmes tant int gr dans la page renvoy e par le serveur au client, il devient facile pour un d veloppeur mal intentionn d alt rer le fonctionnement des scripts en consultant simplement le code source de la page HTML.
Enfin, la possibilit donn e l internaute d invalider le fonctionnement de JavaScript sur son navigateur contraint le d veloppeur pr voir des solutions alternatives pour que ses applications puissent quand m me fonctionner en mode d grad .

JavaScript
On appelle souvent JavaScript, par abus de langage, l ensemble des deux technologies client les plus utilis es sur le Web : le " JavaScript d velopp par Netscape Communications ( ne pas confondre avec Java) et le " Jscript d velopp un peu plus tard par Microsoft pour concurrencer la technologie de Netscape. En r alit , ils sont tous les deux conformes (ou cens s l tre ) au ECMAScript ( European Computer Manufacturers Association ) qui est un standard europ en, mais aussi international, de ces technologies client.

Quoi qu il en soit, le fonctionnement des deux technologies est le m me. Les instructions JavaScript ou Jscript sont incluses dans le code HTML des pages envoy es par le serveur vers le poste client, puis sont trait es directement par le navigateur gr ce un interpr teur standard impl ment dans le logiciel client.

Les sites interactifs c t serveur
Lorsque l interactivit est plac e c t serveur, le serveur Web doit disposer d un pr processeur PHP afin de traiter les scripts PHP int gr s dans la page avant d envoyer celle-ci au poste client qui en a fait la demande (voir tapes 1 et 2 de la figure 1-3 ).
Si on le compare avec un script c t client, la r action d un script c t serveur un v nement est beaucoup plus lente car elle n cessite l envoi d une requ te au serveur (voir tape 1 de la figure 1-3 ), son ex cution sur le serveur ( tape 2), le retour de la r ponse par le r seau Internet ( tape 3) et le chargement d une page HTML compl te dans le navigateur ( tape 4).

Figure 1-3
Utilisation d un script c t serveur : il n y pas de d pendance vis- -vis du navigateur mais l interactivit est plus lente .
En revanche, les langages c t serveur sont ind pendants de la plate-forme du client ou de la version de son navigateur. En effet, l interpr tation du script est r alis e c t serveur et le code envoy vers l ordinateur du client est compatible avec le standard HTML et donc interpr t de la m me mani re par tous.
Parmi les inconv nients des scripts c t serveur, il faut signaler que leur utilisation n cessite la disponibilit d un serveur adapt . M me si les offres des h bergeurs qui proposent des serveurs int grant des scripts dynamiques sont d sormais tr s accessibles, il faut en tenir compte lors de votre choix.
2005 : le compromis client-serveur tant attendu !

Heureusement, les navigateurs les plus courants se sont am lior s en attachant progressivement plus d importance aux standards (m me s il reste encore des divergences entre certains d entre eux ), diminuant ainsi les probl mes de compatibilit li s l usage de technologies c t client. De m me, la valeur ajout e r sultant des applications client sans cesse plus puissantes a compens rapidement les craintes des utilisateurs leur gard. Le fait que bien des sites populaires exploitent d sormais le JavaScript a entra n progressivement une disparition des utilisateurs qui d sactivaient les technologies client dans leur navigateur.

Les sites dynamiques
L ex cution du script c t serveur permet de cr er une page " la vol e lors de son ex cution par le pr processeur PHP int gr au serveur. La page ainsi cr e contient les m mes informations qu une simple page HTML. Elle peut donc tre interpr t e sans probl me par le navigateur c t client (voir figure 1-4 ).

Figure 1-4
Utilisation d un script c t serveur avec acc s une base de donn es lors de la cr ation d une page dynamique .
Lors de la cr ation de cette page, les scripts (PHP par exemple) int gr s au fichier dynamique sont ex cut s et, si n cessaire, tablissent une connexion un serveur de donn es. Avec ce processus, la page dynamique devient un mod le de pr sentation des informations. Ce mod le pouvant tre personnalis par des contenus diff rents selon la requ te du client.
Il n est donc plus n cessaire, par exemple, de cr er une page sp cifique pour pr senter chaque produit d un catalogue : une seule page dynamique peut tre utilis e. Il suffit de lui indiquer l identifiant du produit demand gr ce une variable qui lui est transmise en m me temps que son appel ; la page renvoy e au client contient alors toutes les informations et photos relatives au produit concern . L arborescence du site est simplifi e puisque cette page dynamique remplace les nombreuses pages statiques correspondant chaque produit.

MySQL
MySQL ( My Structured Query Language ) est un serveur de base de donn es relationnelles SQL souvent coupl avec le langage de script serveur PHP.

PHP
PHP (initialement Personal Home Page puis Hypertext Preprocessor ) est un langage de script libre utilis principalement comme langage de programmation Web c t serveur.

Ces volutions ont eu une incidence b n fique sur les ventilations des applications et ont permis un retour un juste quilibre des t ches entre le client et le serveur. D sormais, l usage du JavaScript, du DOM et des CSS est entr dans la normalit et ces technologies sont d ailleurs fortement recommand es pour assurer l accessibilit du site aux personnes handicap es.
Maintenant, les applications peuvent tre quitablement r parties entre le client et le serveur favorisant ainsi une meilleure r activit des syst mes m me si certaines t ches comme la conservation des donn es (la liaison avec les bases de donn es est toujours r alis e c t serveur) ou la gestion de l authentification restent encore le privil ge des technologies serveur.

DOM
Le DOM ( Document Object Model ) est une technologie qui permet la mod lisation des l ments d une page XHTML sous forme d une hi rarchie normalis e ind pendante de tout type de langage. Coupl la technologie JavaScript, il est ainsi possible de modifier la structure d une page Web la vol e. Le DOM fait partie des technologies exploit es par Ajax pour interagir sur le contenu ou la forme d une page XHTML.

CSS
Le CSS ( Cascading Style Sheets ) permet de d crire pr cis ment la mise en forme d une page HTML, XHTML ou XML. Il est ainsi possible de s parer clairement le contenu d une page Web (mat rialis par les balises XHTML) et sa forme (d crite par la feuille de style CSS).
Les tendances du Web 2.0

Puisque la situation semble s tre stabilis e depuis l quilibre des t ches entre client et serveur, nous pourrions nous demander en quoi Ajax pourrait am liorer encore l usage des applications Web sur Internet. Si la ventilation des scripts client-serveur s est r v l e fructueuse pour une meilleure r activit des applications, le probl me de l inertie des requ tes HTTP n en reste pas moins pr sent. De plus, l envoi d une requ te bloque les actions de l internaute jusqu la r ponse du serveur et le fait que la r ponse du serveur soit constitu e du code complet de la page et que la page en cours soit obligatoirement rafra chie sont des inconv nients dont on aimerait bien se passer.
La technologie Ajax peut alors apporter une solution cette probl matique. En effet, partant du constat que l ex cution des programmes c t client est devenue maintenant plus fiable sur la majorit des navigateurs et que l objet XMLHttpRequest est d sormais impl ment sur la plupart d entre eux, il devient possible de mettre en uvre des applications Ajax g rant l envoi de la requ te au serveur d une mani re asynchrone. Le mode asynchrone est possible gr ce une utilisation pertinente de l objet XMLHttpRequest qui permet d envoyer une requ te serveur en t che de fond sans pour autant bloquer l activit de l application client pendant l attente de la r ponse du serveur. la r ception de la r ponse du serveur, la donn e (et non toute la page HTML comme c tait le cas auparavant) s ins rera automatiquement dans la page Web en cours sans que s op re un rafra chissement complet de la page (voir figure 1-5 ).

Figure 1-5
Utilisation d un moteur AJAX charg c t client afin d interagir d une mani re asynchrone avec un programme serveur en PHP .

Avec ce type de processus, les applications Web deviennent plus souples utiliser, car elles ne bloquent plus l utilisateur pendant le temps d attente du serveur. De m me, elles permettent une meilleure r activit de l application car seule la donn e demand e sera retourn e au client. Enfin, le fait qu il n y ait plus de chargement d une nouvelle page chaque requ te, am liore consid rablement le confort de l internaute. Tous ces atouts permettent de proposer aux internautes des applications riches tr s r actives qui ont contribu au succ s du Web 2.0.

Ajax
Ajax ( Asynchronous JavaScript and XML ) d signe une combinaison de technologies (XHTML, DOM, CSS, XML, JavaScript et plus particuli rement son objet XMLHttpRequest ) permettant de mettre en uvre sur le Web des applications interactives et riches comparables aux logiciels disponibles jusqu alors sur les ordinateurs de bureau.

XMLHttpRequest
XMLHttpRequest est une classe JavaScript disposant de propri t s et de m thodes permettant de r cup rer des donn es sur le serveur d une mani re asynchrone.
2
Ajax, un acteur du Web 2.0
Les fondements du Web 2.0

Avant de parler plus particuli rement d Ajax, rappelons quelques notions de base sur les sites Web 2.0, ou plut t les sites de " type Web 2.0 , car l appellation Web 2.0 correspond plus un concept qu la structure mat rielle ou logicielle sp cifique d un site.
Application Internet riche (RIA)

Les sites Web 2.0 se caract risent par leurs fonctionnalit s, leur ergonomie et leur r activit qui s apparentent davantage des applications d ordinateurs de bureau qu aux applications traditionnelles du Web.
Quand on souhaite mettre en uvre un site de type Web 2.0 avec les avantages que nous avons num r s pr c demment, il faut faire appel des applications Internet riches (RIA). Contrairement aux applications Web traditionnelles pour lesquelles le traitement des donn es est principalement r alis c t serveur (le client ne faisant qu en assurer la pr sentation), les applications Internet riches d portent les traitements sur le client (navigateur) afin de mettre la disposition de l utilisateur des fonctionnalit s avanc es et tr s r actives.

RIA
Les RIA ( Rich Internet Application ) sont des applications Web qui permettent de disposer en ligne des m mes services que sur une application habituellement install e sur un ordinateur de bureau.
Le webmail est bon exemple de RIA simple car il permet de consulter ses messages lectroniques depuis un navigateur, alors que cela n cessitait auparavant l utilisation d un gestionnaire de messagerie pr alablement install sur son ordinateur (Outlook par exemple).

Ajax, l application Internet riche l g re

Pour r aliser ces applications d un genre nouveau, diff rentes technologies peuvent tre mises en uvre. Parmi ces technologies, il en existe une qui se distingue particuli rement et qui fait beaucoup parler d elle : Ajax, mais d autres solutions permettent aussi de cr er des clients riches Internet tel que Flash coupl avec Flex ou encore les applications Java d ploy es sur Internet l aide de Java Web Start.
Cependant, Ajax est souvent pr f r par les d veloppeurs car, contrairement aux autres RIA, il a l norme avantage de ne pas n cessiter la pr sence d un plug-in puisqu il exploite des technologies int gr es par d faut dans tous les navigateurs r cents (CSS, DOM, JavaScript et son objet XMLHttpRequest, XML).
noter que, parmi les RIA, certaines comme les applications Java sont consid r es comme des clients lourds du fait de l infrastructure logicielle n cessaire au fonctionnement de l application ajouter au navigateur. D autres, comme Flash, n cessitent un plug-in moins volumineux et qui, de surcro t, est souvent pr -install dans la majorit des navigateurs. En comparaison, Ajax ne n cessite aucun plug-in pour fonctionner, nous pouvons donc le consid rer comme une application riche Internet l g re.

Plug-in
Le plug-in est un programme devant tre install pr alablement sur le navigateur pour qu une application puisse fonctionner.
Ajax, dans la droite ligne du Web 2.0

Ajax se place dans la droite ligne du Web 2.0 car il permet aux internautes de disposer d interfaces riches semblables celles des logiciels de bureau.
En effet, les applications Ajax permettent de disposer de fonctionnalit s avanc es mais aussi d am liorer l interactivit et l ergonomie des interfaces Web. Concr tement, l internaute peut d clencher des traitements modifiant la vol e la structure de la page ou g n rant des effets graphiques avanc s (r duction progressive de la taille d une image sur un survol de la souris, disparition ou apparition fluide et progressive d une image, d placement instantan d un l ment de la page par un simple glisser-d placer de la souris ). Les applications Ajax permettent aussi de faire abstraction des probl mes d h t rog n it du navigateur utilis (gr ce l utilisation de biblioth ques externes) afin d assurer le m me rendu graphique sur toutes les plates-formes mais, surtout, les m mes fonctionnalit s avanc es qui font la richesse de ces nouveaux types d interface.
Les applications Ajax se caract risent principalement par un nouveau mode d change de donn es entre le navigateur et le serveur Web. Contrairement aux sites traditionnels pour lesquels l envoi d une requ te vers le serveur impose au navigateur d attendre sa r ponse, le privant du m me coup de tout type d activit pendant ce d lai (transfert synchrone), les applications Ajax permettent d mettre une requ te et d en r ceptionner la r ponse d une mani re diff r e (transfert asynchrone) sans interrompre l activit de l utilisateur. En plus de cet avantage - qui est loin d tre n gligeable - la r ponse du serveur ne contient que les donn es sollicit es par la requ te et non toute la page HTML comme c est le cas lors d une r ponse classique. D s son arriv e sur le poste client, un processus est d clench qui introduit discr tement les nouvelles donn es dans la page active, vitant ainsi le rechargement de la page l origine des " trous blancs (temps d attente) d sagr ables que l on conna t. Avec ce type de transfert, le trafic s en trouve r duit et la r activit de l application renforc e.
La gen se d Ajax

En d cembre 2004, Google lance en version b ta un nouveau service en ligne : " Google Suggest (voir figure 2-1 ). Ce moteur de recherche intelligent sugg re une liste de dix mots en rapport avec les premi res lettres saisies dans le champ de recherche. chaque ajout d une lettre, les suggestions du menu d roulant sont actualis es dynamiquement. Ces derni res indiquent en plus le nombre de r sultats correspondant chaque suggestion, guidant ainsi l internaute dans son choix. Le concept des applications interactives de la nouvelle g n ration du Web tait n .
Depuis, cette application a t int gr e dans le formulaire de recherche standard de Google, apportant ainsi aux internautes une nouvelle fonctionnalit avanc e sans pour autant nuire la simplicit d usage de l interface qui a fait de Google, le moteur le plus utilis au monde.

Figure 2-1
Exemple d une recherche d informations sur Ajax avec Google Suggest

Quelques mois plus tard, en f vrier 2005, le nom " Ajax fait sa premi re apparition sur Internet dans un article de Jesse James Garret de l agence Adaptative Path (voir figure 2-2 ). Son article, Ajax: A New Approach to Web Applications , expose ses exp rimentations concernant l utilisation de JavaScript pour cr er des interfaces innovantes qui se distinguent des applications actuelles par une grande interactivit et dans lesquelles le chargement d une page enti re n est plus n cessaire. Ce nouveau type d interface permet de mettre en uvre des fonctionnalit s avanc es qui s apparentent celles des ordinateurs de bureau. Il d finit alors Ajax comme tant le raccourci de Asynchronous JavaScript And Xml .

Figure 2-2
Article de Jesse James Garret en f vrier 2005 qui attribue pour la premi re fois le terme " Ajax un nouveau type d application interactive .

Par la suite, courant 2005, Google lance de nouvelles applications succ s du m me type comme Gmail, Google Map ou encore Google Calendar. Mais Google n tait pas le seul s int resser Ajax. Yahoo! notamment a retenu en 2005 cette technologie innovante lors de la refonte de son site d informations Yahoo! News. Depuis, de nombreux sites exploitent Ajax pour rendre leur interface plus interactive, faisant de cette technologie un standard difficilement contournable, qui s int gre d sormais compl tement dans le paysage de l Internet.

quoi sert Ajax ?

Pour illustrer l utilisation d Ajax, rien de mieux que quelques exemples concrets. Aussi, nous vous proposons ci-dessous une liste non exhaustive (loin de l !) de quelques emplois courants d Ajax dans le Web 2.0 d aujourd hui.
Actualisation d information en t che de fond

L avantage d une requ te asynchrone est de pouvoir r cup rer des donn es sans interrompre le travail de l internaute. Il est alors tr s simple de mettre en place des syst mes d actualisation d une information sp cifique d une page HTML, d clench s d une mani re chronique ou par un gestionnaire d v nements JavaScript. On peut alors imaginer, par exemple, qu une zone de page Web affichant les derniers r sultats d un match de tennis ou des lections en cours puisse actualiser ses informations intervalles r guliers sans aucun rechargement de la page et sans que l internaute n ait besoin de solliciter la mise jour des r sultats (voir l atelier 10-5 qui illustre une application de ce type par un exemple pratique). Pendant ce temps celui-ci peut utiliser les autres fonctionnalit s de la page Web sans aucune perturbation, car l application asynchrone ne bloque pas l utilisation du navigateur pendant le traitement du serveur et actualise uniquement le r sultat de la zone concern e.
Compl tion automatique

Depuis le lancement de Google Suggest en 2005 (voir figure 2-1 ), de nombreux sites ont int gr des syst mes d autocompl tion dans leur formulaire pour assister les internautes dans leur choix. Le syst me de compl tion automatique permet d afficher dans une liste d roulante des suggestions pertinentes par rapport au d but de la saisie de l internaute (voir l atelier 15-2 qui illustre cette application par un exemple pratique). Le navigateur envoie pour cela au serveur le d but de la saisie de l utilisateur, le serveur r ceptionne l information, la traite en recherchant les r ponses possibles commen ant par la cha ne de caract res r ceptionn e et renvoie ses suggestions au navigateur qui les affichera par exemple dans une liste d roulante. Ces suggestions peuvent tre actualis es chaque nouveau caract re saisi, mais il est souvent plus judicieux de d clencher l actualisation de la liste selon un intervalle de temps d fini afin de ne pas trop surcharger le serveur (voir par exemple le site de Google Suggest de la figure 2-1 ).
Contr le en temps r el des donn es d un formulaire

Dans un formulaire traditionnel, le contr le des champs peut tre r alis par des fonctions JavaScript au fil de la saisie si l on d sire simplement s assurer de la pr sence ou de l ad quation du contenu (le contr le de la bonne syntaxe d un e-mail par exemple). Par contre, pour des v rifications plus pouss es n cessitant de comparer le contenu d un champ avec des informations issues d une base de donn es (comme la v rification de l existence d un pseudonyme lors de la cr ation d un compte utilisateur), on est alors contraint de r aliser ces v rifications c t serveur apr s l envoi du formulaire.

Ajax peut alors tre utilis judicieusement pour r aliser des tests lors de la saisie et donc avant la soumission du formulaire. Il suffit pour cela d envoyer une requ te au serveur d s que le contenu du champ est connu (voir l atelier 13-1 qui illustre cette application par un exemple pratique). Le serveur s occupera du traitement de ce contenu en le comparant avec les informations de la base de donn es pendant que l utilisateur continuera de renseigner les autres champs. Si le contr le s av re n gatif, le serveur renverra un message d erreur au navigateur qui l avertira et lui permettra de modifier sa saisie avant la soumission du formulaire.
Navigation dynamique

De nombreux menus de navigation ou onglets de pagination exploitent d sormais la technologie Ajax afin d viter le rechargement de la page chaque nouvelle s lection (voir l atelier 15-1 qui illustre cette application par un exemple pratique). Le r sultat est en g n ral assez agr able utiliser car cette technologie permet une transition fluide et continue d une page l autre, mais il est souvent judicieux de la coupler avec des syst mes alternatifs comme les cadres cach s afin de conserver l utilisation des boutons Suivant et Pr c dent et l historique de navigation.
Lecture d un flux RSS

Les flux RSS permettent de diffuser les mises jour des sites d information sur d autres sites ou applications tiers (page personnelle comme Netvibes, blog, gestionnaire de messagerie ). L utilisateur peut s abonner aux flux d informations de son choix et afficher ainsi des nouvelles qui s actualiseront automatiquement sur son site (voir l atelier 12-6 qui illustre cette application par un exemple pratique).
Ces flux sont contenus dans un document au format XML, structur selon des items pr d finis (titre, r sum , date ). Ajax permet de r cup rer ce type de flux et de l afficher dans un navigateur apr s l avoir converti au format HTML sans recharger la page (voir la pr sentation du site de Netvibes en guise d exemple, quelques pages plus loin).
Sauvegarde de documents ditables

L dition de documents en ligne est de plus en plus courante sur les sites communautaires. Elle permet de concevoir des documents riches (textes, images ) puis de les sauvegarder directement depuis un navigateur sans avoir recours des formulaires de t l chargement (voir l atelier 13-2 qui pr sente une application de sauvegarde d informations).
Ces syst mes caract risent tr s bien les applications de type Web 2.0 qui permettent l internaute de disposer de services avanc s proches de ceux propos s jusqu pr sent par des logiciels de bureau.
Personnalisation d interface Web

Si la personnalisation d une interface Web (disposition et s lection des blocs afficher dans sa page Web personnelle, ou encore le choix de mod les de mise en page incluant la couleur, la police et bien d autres param tres) peut tre r alis e par les technologies du DHTML (JavaScript, DOM, CSS), leur m morisation est souvent effectu e par Ajax et notamment gr ce l objet XMLHttpRequest qui se chargera d envoyer au serveur les nouveaux param tres de votre page personnalis e d s qu une modification de celle-ci sera d tect e.
Le site Netvibes illustre tr s bien l utilisation de cette fonctionnalit d Ajax (entre autres) pour permettre aux internautes d am nager librement leur page personnelle.
Widget

Les widgets sont des petites applications Web qui ont l norme avantage de ne pas n cessiter la pr sence d un navigateur pour fonctionner (voir l atelier 15-3 qui illustre la mise en uvre d un widget de calendrier). Ils peuvent donc tre plac s sur le bureau de votre ordinateur et tre d plac s comme bon vous semble ( l origine, le concept des widgets vient d Apple qui les avait d j int gr s dans le syst me d exploitation Mac OS X version 10.4).
De nombreux widgets exploitent Ajax pour r cup rer des donn es sur un serveur d informations soit d une mani re chronique, soit la demande de l utilisateur. Ainsi, si vous le d sirez, vous pouvez placer un widget sur le bureau de votre ordinateur pour afficher en permanence les pr visions m t orologiques ou les fluctuations d une valeur boursi re.
Le nouveau service Talk de Google est bas sur un widget Ajax. Il permet l utilisation d une messagerie instantan e sans n cessiter la pr sence d un navigateur. Pour l installer sur le bureau de votre PC, il suffit de t l charger un petit logiciel gratuit propos en t l chargement sur Google.
Chargement progressif d information

Le chargement de donn es volumineuses est un probl me qui freine fortement la r activit d un site. l re du haut d bit, il est maintenant difficilement concevable d attendre plusieurs secondes pour que l effet d un v nement d clench par l utilisateur puisse s afficher sur l interface du site. Cependant, certaines applications doivent interagir rapidement pour afficher de nouvelles images qu il n est pas toujours concevable de pr charger (comme les applications de cartographie par exemple). Il faut alors faire appel des m thodes pr dictives coupl es des technologies client comme Ajax pour trouver une solution ce dilemme.
L exemple de la cartographie Google Maps illustre bien cette utilisation en permettant l application de conserver une bonne r activit lors du glisser-d placer de la carte par exemple.
Moteur de recherche sans rechargement de la page

La plupart des moteurs de recherche n cessitent un rechargement complet de la liste des r sultats chaque modification des crit res de recherche. Il est cependant possible d utiliser la technologie Ajax pour pallier ce d sagr ment (voir par exemple le moteur de recherche d Amazon http://www.amazon.com ).

Qui utilise Ajax ?

De nombreux sites de renom utilisent d sormais des applications Ajax pour am liorer leur interface en augmentant l interactivit avec les internautes et en apportant de nouvelles fonctionnalit s, plus proches des applications d ordinateur de bureau que des sites Web traditionnels. La liste des sites que nous vous proposons ci-dessous est donc loin d tre exhaustive mais elle permet d illustrer la gen se de cette technologie travers l volution des sites de r f rences qui ont t les pr curseurs du Web 2.0.
Google

Le moteur de recherche Google a t le premier site exploiter le mod le Ajax pour am liorer l interface de son outil de recherche que tout le monde conna t. Lorsque l internaute renseigne le champ de recherche avec un mot-cl , une requ te est envoy e au serveur chaque nouveau caract re saisi afin d afficher une liste de suggestions susceptibles de correspondre votre recherche.
Google utilise l objet XMLHttpRequest et le format JSON (et non le XML) pour g rer les changes de donn es avec le serveur.
http://www.google.com
Gmail

Gmail est un webmail gratuit mis la disposition de tous les internautes par Google. l instar de son outil de recherche, Google doit la r ussite de son webmail la simplicit et la grande r activit de son interface.
Gmail utilise l objet XMLHttpRequest conjointement avec une structure de cadres cach s afin d viter certains d fauts inh rents l utilisation exclusive de cet objet (boutons Pr c dent et Suivant inactifs). Pour la gestion du transfert des donn es, le format JSON a t choisi afin d am liorer la rapidit des changes entre le serveur et le navigateur.
http://mail.google.com
Google Maps

Google Maps est le service de cartographie propos par Google. Le site Google Maps utilise des applications Ajax pour am liorer l interactivit avec l internaute en lui offrant une interface tr s intuitive. L utilisateur peut par exemple faire glisser la carte dans toutes les directions de fa on tr s fluide gr ce au pr chargement des images ou encore utiliser la molette de sa souris pour zoomer sans avoir recharger la carte.
Ici aussi, Google opt pour l utilisation de cadres cach s. En ce qui concerne le transfert des informations retourn es par le serveur, c est le format XML qui a t retenu, celui-ci permettant d op rer tr s facilement des transformations de son contenu au moyen de fonctions XSLT. La gestion du cache du navigateur est aussi exploit e pour obtenir une bonne r activit des d placements ou des zooms de carte permettant ainsi l affichage rapide des multiples petites images qui constituent la carte.
http://maps.google.com
Yahoo! News

En 2005, Yahoo! News a aussi opt pour Ajax afin d am liorer l interactivit de son interface. L internaute pouvait alors voir le r sum et la photo d un article en passant simplement sa souris sur son titre. D s que l v nement tait d tect , une requ te XMLHttpRequest tait envoy e au serveur qui retournait rapidement les compl ments de l article au navigateur.
Cette application tant int gr e en compl ment d une structure de page traditionnelle, elle permettait de disposer de fonctionnalit s avanc es tout en conservant un mode d grad pour les internautes ne disposant pas d un navigateur compatible avec l application Ajax.
http://news.yahoo.com
Amazon

En 2005, Amazon a cr un m ta-moteur qui permet de rechercher dans plusieurs types de m dias en une seule requ te (livre, vid o, d finition, article ). Pour cela, il exploite plusieurs bases de donn es telles que Wikip dia, Answers.com et videmment celle de son site de commerce en ligne, Amazon.com. Les r sultats sont pr sent s dans des colonnes diff rentes en fonction de leur origine. Si vous d sirez modifier les crit res de recherche, les bo tes contenant les r sultats pr c dents sont alors redimensionn es automatiquement sans qu un rechargement de la page ne soit n cessaire.
Pour les reconditionnements des bo tes des r sultats, A9.com exploite des librairies DHTML. Les transferts de donn es entre le serveur et le navigateur sont eux r alis s gr ce la classe XMLHttpRequest combin e avec une structure de cadres cach s.
http://www.amazon.com
Google Calendar

En avril 2006, Google compl te ses services en mettant la disposition des internautes un syst me d agenda en ligne exploitant pleinement tous les artifices de la technologie Ajax. L utilisateur peut ajouter tr s facilement ses rendez-vous par un simple clic, il peut aussi les partager facilement avec d autres utilisateurs de Google Calendar ou des personnes de son choix. Les rendez-vous peuvent tre d plac s ou agrandis tr s rapidement l aide de la souris. L affichage peut tre configur sur un jour, une semaine ou un mois, et cela sans aucun rechargement de la page.
http://www.google.com/calendar

Netvibes

Netvibes est un portail personnalisable qui permet de cr er et am nager sa page personnelle tr s simplement. L internaute peut ainsi ajouter, supprimer, modifier ou d placer les diff rentes bo tes qui composent sa page. Il pourra notamment configurer des flux RSS provenant de diff rents fournisseurs d information pour en afficher le contenu dans la bo te de son choix.
Ce site illustre parfaitement l utilisation que l on peut faire d Ajax et du DHTML pour mettre la disposition de l internaute des fonctionnalit s riches du Web 2.0 tout en pr servant l ergonomie de la page Web.
http://www.netvibes.com
Google Talk

L application Google Talk vous permet de disposer d une messagerie instantan e et d un service de voix IP en permanence, m me si votre navigateur est ferm . L utilisation de cette application n cessite n anmoins l installation d un logiciel sur votre ordinateur.
Google Talk est un widget Ajax bas sur Jabber (syst me standard de messagerie instantan e utilisant le protocole XMPP, bas sur le XML, d velopp par Google) qui permet de discuter avec des millions d internautes.
http://www.google.com/talk
Wikip dia

Wikip dia est une encyclop die collaborative en ligne tr s connue, qui regroupe des millions d articles sur des th mes divers et vari s. Chaque internaute peut y contribuer en r digeant un article selon sa sp cialit .
Ce site exploite de nombreuses applications bas es sur la technologie Ajax, comme les onglets dynamiques (le contenu de la zone d information est modifi sans rechargement de la page) ou encore la gestion de ses ressources qui permet chaque internaute d diter en ligne des documents riches (textes, images ) sans employer de formulaire de t l chargement.
http://fr.wikipedia.org
3
Comment fonctionne Ajax ?
Ajax, un amalgame de technologies
Des ingr dients d j op rationnels

Contrairement ce que l on pourrait croire, Ajax n est pas une technologie sp cifique et innovante mais une conjonction de plusieurs technologies anciennes. Ainsi, les applications Ajax utilisent en g n ral tout ou partie des technologies suivantes :
Les feuilles de styles CSS qui permettent d appliquer une mise forme au contenu d une page XHTML.
Le DOM qui repr sente la hi rarchie des l ments d une page XHTML.
L objet XMLHttpRequest de JavaScript qui permet d assurer des transferts asynchrones (ou quelquefois synchrones) entre le client et le serveur.
Les formats de donn es XML ou JSON utilis s pour les transferts entre le serveur et le client.
Le langage de script client JavaScript qui permet l interaction de ces diff rentes technologies.
L int r t pour Ajax d utiliser ces diff rentes technologies est qu elles sont d j int gr es dans la plupart des navigateurs actuels. Elles sont donc imm diatement exploitables - m me si quelques diff rences d impl mentation subsistent d un navigateur l autre.
Ceci repr sente une v ritable aubaine pour les d veloppeurs lorsqu on conna t les atouts d Ajax ; et on comprend mieux pourquoi toujours plus de d veloppeurs se rallient cette technologie.
JavaScript, le ciment des fondations d Ajax

Pour que ces diff rentes technologies sous-jacentes puissent tre exploit es, il faut disposer d un langage de script capable de les manipuler. videmment, dans ce contexte client, JavaScript est la technologie id ale pour remplir cette mission et faire interagir toutes ces technologies entre elles. Ainsi, dans chaque application Ajax, nous retrouverons un programme JavaScript qui constituera le " moteur du syst me, orchestrant la fois les transferts de donn es avec l aide de l objet XMLHttpRequest et l exploitation des r ponses du serveur en agissant sur les CSS (pour modifier la mise en forme de la page XHTML) et sur le DOM (pour modifier le contenu ou la structure de la page XHTML) (voir figure 3-1 ).

Figure 3-1
Organisation des principaux composants d Ajax

En ce qui concerne les donn es chang es, plusieurs formats peuvent tre utilis s selon l organisation et la complexit des flux d informations. Les applications les plus simples pourront se contenter de donn es au format texte (simples couples variable/valeur) alors que les syst mes plus complexes devront choisir de structurer leurs donn es en XML (le DOM assurant ensuite l insertion des donn es XML dans la page XHTML) ou encore dans un format issu de la structure des objets JavaScript, le JSON. noter que la plupart des requ tes envoy es vers le serveur utilisent le format texte (les couples variable/valeur suffisent dans la majorit des cas), mais sachez qu elles peuvent ventuellement aussi exploiter les formats XML ou JSON, de la m me mani re que les r sultats retourn s par le serveur au navigateur.
Comparatif avec les applications Web traditionnelles

Pour bien comprendre le fonctionnement et conna tre les avantages d un nouveau syst me, une bonne m thode consiste le comparer avec l existant que l on conna t d j . Dans cette partie, nous allons utiliser cette m thode en comparant le fonctionnement d une application Ajax avec celui d un site Web statique et celui d un site Web dynamique.
Fonctionnement d une application Web statique

Avec un site Web statique, la seule interactivit dont dispose l internaute est de pouvoir passer d une page HTML l autre par un simple clic sur les liens hypertextes pr sents sur une page. chaque fois que l internaute clique sur un lien, une requ te HTTP est envoy e, tablissant du m me coup une communication avec le serveur. Cette communication est de type synchrone, c est- -dire que d s l mission de la requ te, la communication reste en place jusqu la r ception de la r ponse du serveur. Pendant le temps de traitement de la requ te, le navigateur reste fig , bloquant ainsi toute action possible de l internaute.
chaque requ te, le serveur retournera une r ponse sous la forme d une page HTML compl te. S il s agit d une simple requ te, suite la saisie par l internaute de l URL sp cifique d une page dans la barre d adresse du navigateur ou, plus couramment, lorsque l internaute clique sur un lien hypertexte, le serveur se contentera de renvoyer la page HTML demand e, ce qui cl turera le traitement c t serveur et d bloquera ainsi le navigateur.
Fonctionnement d une application Web dynamique

Nous avons vu pr c demment le traitement d une simple requ te par le serveur mais d autre cas peuvent se produire, notamment lors de l envoi d un formulaire. Dans ce cas, la requ te est constitu e d une ligne de requ te (pr cisant la m thode utilis e et le protocole HTTP), d un corps (qui contient les donn es envoy es au serveur dans le cas d une requ te mise avec la m thode POST) et d une s rie d en-t tes qui d finissent les sp cificit s de la requ te (nature du navigateur utilis , type d encodage ) qui permettront au serveur de traiter correctement les informations. En g n ral, lors de l envoi d un formulaire, le traitement c t serveur est r alis par une page contenant un programme (en PHP par exemple). Les donn es r ceptionn es pouvant tre trait es directement par le programme ou entra ner un change avec un serveur de base de donn es afin de les m moriser ou d mettre une requ te SQL. l issue de ce traitement, une nouvelle page HTML sera construite la vol e et renvoy e au navigateur, ce qui cl turera le processus, d bloquant le navigateur de la m me mani re qu avec un site statique.
Fonctionnement d une application Ajax

Dans le cas d une application Ajax, si la page contenant la structure XHTML et ses scripts client (moteur Ajax, gestionnaire d v nements ) est charg e de la m me mani re que pour un site statique, il n en est pas de m me pour les interactions qui suivent entre le navigateur et le serveur. Le moteur Ajax une fois charg dans le navigateur restera en attente de l v nement pour lequel il a t programm . Pour cela, un gestionnaire d v nements JavaScript est configur pour appeler le moteur d s l apparition de l v nement concern . Lors de l appel du moteur, un objet XMLHttpRequest est instanci puis configur , une requ te asynchrone est ensuite envoy e au serveur. la r ception de celle-ci, le serveur d marrera son traitement et retournera la r ponse HTTP correspondante. Cette derni re sera prise en charge par la fonction de rappel du moteur Ajax qui exploitera les donn es pour les afficher un endroit pr cis de l cran.
Chronogrammes des changes client-serveur

Une des grandes diff rences entre une application Web traditionnelle et une application Ajax est li e l change asynchrone de donn es entre le navigateur et le serveur. Pour vous permettre de bien appr hender la diff rence entre ces deux applications, nous vous proposons de les comparer maintenant l aide de leur chronogramme.
Chronogramme d une application Web dynamique traditionnelle

Lorsqu un utilisateur sollicite le serveur dans une application Web dynamique traditionnelle (en envoyant un formulaire ou en cliquant sur une URL dynamique), il d clenche une requ te HTTP dans laquelle sont imbriqu s les param tres de la demande. partir de ce moment, le navigateur se fige jusqu la r ception de la r ponse HTTP du serveur, interdisant ainsi l utilisateur toute action pendant le temps de traitement de la requ te. D s la r ception de la requ te, le serveur Web analysera les param tres et traitera la demande selon son programme. Il pourra interroger un serveur de base de donn es pour recueillir des donn es compl mentaires si n cessaire. Une fois le traitement termin , une page HTML compl te sera construite la vol e, incluant les r sultats du traitement apr s leur mise en forme. Cette page sera alors retourn e au navigateur apr s son int gration dans le corps de la r ponse HTTP. la r ception de la r ponse HTTP, le navigateur interpr tera la page HTML, comme lors de l appel d une page Web dans un site statique, et l affichera l cran, entra nant le rechargement complet de la page. la fin du chargement de la page, le navigateur est d bloqu et l utilisateur reprend la main sur l application. Il pourra ainsi ventuellement r it rer une nouvelle demande serveur qui suivra le m me cycle de traitement que celui que nous venons de d crire (voir figure 3-2 ).


Figure 3-2
Chronogramme des changes client-serveur d une application traditionnelle

Chronogramme d une application Ajax en mode asynchrone

Dans le cas d une application Ajax en mode asynchrone, le d roulement du traitement est diff rent. noter que l objet XMLHttpRequest peut aussi envoyer des requ tes synchrones, mais dans ce cas le fonctionnement serait semblable celui d une application Web dynamique traditionnelle comme celle que nous avons d crite pr c demment.
Dans une application Ajax, l utilisateur doit commencer par appeler la page HTML contenant le moteur Ajax. Une fois la page charg e dans le navigateur, les changes avec le serveur seront contr l s par l application Ajax (voir figure 3-3 ). L envoi d une requ te est souvent d clench par un gestionnaire d v nements JavaScript, mais il peut aussi tre g n r par un script de temporisation pour actualiser des informations intervalles r guliers. Quel que soit le mode de d clenchement, le moteur Ajax est appel par le biais d une fonction JavaScript. La premi re action du moteur est la cr ation d un objet XMLHttpRequest imm diatement suivi de sa configuration (choix de la m thode de transfert GET ou POST, choix du fichier serveur sollicit , activation du mode asynchrone, d signation d une fonction de rappel, int gration des param tres ). Une fois l objet configur , l envoi de la requ te est d clench , g n rant une requ te HTTP semblable celle cr e avec une application dynamique traditionnelle. Toutefois, dans le cas de l envoi d une requ te Ajax, le navigateur n est pas bloqu et l utilisateur peut continuer utiliser son interface comme bon lui semble ; le transfert est asynchrone. C t serveur, les param tres seront analys s et le programme pourra aussi solliciter un serveur de base de donn es si besoin. Mais, contrairement une application dynamique traditionnelle, le corps de la r ponse HTTP retourn e au navigateur ne sera pas compos de la page HTML compl te : il contiendra seulement les donn es r clam es par le client. Lorsque le navigateur re oit la r ponse, une fonction de rappel, programm e lors de l envoi de la requ te, se chargera de r cup rer les donn es plac es dans le corps de la r ponse HTTP, de les mettre en forme et de les ins rer dans une zone particuli re de la page Web et cela sans n cessiter le rechargement de la page (voir figure 3-3 ).
Les avantages d Ajax
conomie de la bande passante

Avec Ajax, il n est plus n cessaire de renvoyer le contenu entier de la page HTML chaque requ te, car l objet XMLHttpRequest assure la r cup ration et l insertion dans la page en cours des seules donn es modifier. Ce syst me permet d liminer le transfert de nombreuses informations redondantes, all geant ainsi fortement le trafic r seau entre le serveur Web et le client (navigateur).
Emp che le rechargement de la page chaque requ te

Le traitement traditionnel d une requ te HTTP entra ne chaque retour de la r ponse du serveur un rechargement complet de la page en cours. Hormis le d sagr able " trou blanc que cela engendre, ce ph nom ne allonge le temps de traitement d une requ te aux d pens de la r activit de l application.


Figure 3-3
Chronogramme des changes client-serveur d une application Ajax

vite le blocage de l application pendant le traitement de la requ te

Contrairement au simple change HTTP d une application traditionnelle, dans laquelle l application cliente est bloqu e pendant tout le temps d attente de la r ponse du serveur, l change XMLHttpRequest asynchrone d une application Ajax permet l internaute de continuer travailler pendant le temps de traitement de la requ te. Cela ouvre des possibilit s nouvelles pour le d veloppement Web, permettant ainsi aux d veloppeurs de cr er des applications dont le mode de fonctionnement se rapproche de celui des applications disponibles jusqu alors sur des ordinateurs de bureau.
Augmente la r activit de l application

Les donn es renvoy es par le serveur tant plus l g res (le serveur retournant uniquement les donn es demand es et non la page HTML enti re) et le rechargement de la page compl te n ayant plus lieu chaque requ te, cela am liore consid rablement la r activit du syst me. De plus, le chargement progressif des donn es coupl une m thode pr dictive permet de disposer de fonctionnalit s graphiques avanc es (d placement d une carte l aide de la souris dans une application de cartographie en ligne par exemple) jusqu alors r serv es aux logiciels autonomes de bureau.
Am liore l ergonomie de l interface

Une interface Ajax peut tre compos e de multiples zones ayant une gestion du contenu ind pendante l une de l autre. Chaque zone pouvant d clencher ses propres requ tes, il est d sormais possible d avoir une mise jour cibl e des contenus. Ainsi, gr ce aux technologies DHTML associ es Ajax, l utilisateur peut am nager librement ses diff rentes zones par un simple glisser-d poser et am liorer l ergonomie de son interface Web.
Les inconv nients d Ajax
Pas de m morisation des actions dans l historique

Le principal inconv nient d une application Ajax est li au fait que les actions de l utilisateur ne sont pas m moris es dans l historique du navigateur. En effet, les diff rents contenus d une application Ajax s affichant toujours dans la m me page, ils ne peuvent pas tre enregistr s dans l historique du navigateur comme le seraient les diff rentes pages HTML d une application Web traditionnelle.
Par voie de cons quence, les boutons Suivant et Pr c dent ne sont plus utilisables car ils s appuient sur l historique du navigateur pour trouver la page suivante ou pr c dente. Ceci est videmment tr s handicapant pour les internautes qui ont l habitude d utiliser ces boutons pour naviguer d une page l autre.
Il existe n anmoins des solutions pour rem dier ce probl me en couplant l application Ajax avec un syst me d iframe comme le fait Google dans plusieurs de ses applications Ajax mais cela n cessite un traitement suppl mentaire qui complexifie le d veloppement.

Probl me d indexation des contenus

Les diff rents contenus d une application Ajax s affichant dans une seule et m me page, les moteurs de recherche pourront indexer uniquement le premier contenu par d faut de la page et non tous les contenus propos s par l application.
D autre part, le rappel des diff rents contenus d une application Ajax par le biais des favoris sera confront au m me probl me. Seul le contenu de la premi re page pourra tre m moris dans les signets du navigateur.
D pendance de l activation de JavaScript sur le navigateur

Les applications Ajax utilisant JavaScript pour interagir entre les diff rentes technologies exploit es c t client (CSS, DOM, XML ) sont donc d pendantes de l activation de JavaScript sur le navigateur, au m me titre que tous les autres programmes clients utilisant cette technologie.
M me si les internautes qui d sactivent JavaScript se rar fient, il faut toutefois pr voir une version d grad e de l application en pr vision des navigateurs qui ne supporteraient pas ce langage de script.
Les cadres cach s, une solution alternative Ajax

Dans le chapitre pr c dent, nous avons cit d autres technologies estampill es Web 2.0 (Flash + Flex, application Java) permettant la mise en uvre d une application Internet riche (RIA). Nous avions cependant cart ces solutions car elles ne pouvaient pas fonctionner sur un navigateur sans l installation d un plug-in.
Il existe n anmoins une technique nomm e " cadre cach (frameset HTML ou iframe) utilis e bien avant celle de l objet XMLHttpRequest qui permet d tablir des communications en arri re plan avec le serveur et qui, comme Ajax, ne n cessite pas l ajout d un plug-in.
La technique du cadre cach

Cette technique exploite la structure des jeux de cadres HTML dont l un d entre eux est invisible et sert de pont pour tablir une communication avec le serveur. Le cadre cach est rendu invisible en configurant sa largeur et sa hauteur z ro pixel. Avec cette technique, il est alors possible d envoyer des requ tes serveur par le biais du cadre cach sans perturber l cran de l utilisateur.
Pour illustrer le fonctionnement de cette technique, nous allons d tailler le cycle d une communication compl te entre le navigateur et le serveur. Pour commencer, l utilisateur d clenche une fonction JavaScript depuis le cadre visible. Cette fonction appellera un script serveur dont le retour sera assign au cadre cach . Le script serveur analyse alors les param tres communiqu s et traite la demande. Il renvoie ensuite en r ponse au cadre cach une page HTML compl te contenant le r sultat dans une balise div . Dans cette m me page HTML se trouve une fonction JavaScript qui sera invoqu e d s que la page sera compl tement charg e dans le cadre cach (avec le gestionnaire d v nements window.onload par exemple). Enfin, lorsque la fonction JavaScript s ex cute dans le cadre cach , elle r cup re le r sultat ins r pr alablement dans la balise div de la m me page et l affecte une zone d finie du cadre visible. L utilisateur peut alors voir la r ponse appara tre dans la page visible du navigateur et cela tout en continuant d utiliser l interface pendant le traitement serveur vitant ainsi que la page ne soit recharg e.
Depuis l apparition des iframes (introduites dans la version 4.0 du HTML), il est possible d exploiter la m me technique mais sans avoir utiliser la structure contraignante des framesets. En effet, l iframe peut tre plac dans une page HTML traditionnelle et permet de cr er ainsi un cadre dans n importe quelle page existante. Il est m me possible de cr er des iframes l aide d un programme JavaScript, ce qui permet de mieux contr ler la cr ation et la suppression des flux de communication entre le serveur et le navigateur.
Avantages des cadres cach s

Fonctionne sur les anciens navigateurs
Cette technique tant pratiqu e depuis longtemps, elle peut tre utilis e sur des navigateurs plus anciens qui ne supportaient pas encore les objets XMLHttpRequest. Il est donc possible d utiliser la technique des cadres cach s en tant que solution alternative Ajax si l on d sire que l application fonctionne sur une plus grande vari t de navigateurs.
Conserve l historique du navigateur
La technique des cadres cach s permet de conserver l historique du navigateur. Cette caract ristique permet aux internautes de continuer utiliser les boutons Suivant et Pr c dent du navigateur contrairement aux applications Ajax. noter que certaines applications couplent Ajax la technique des cadres cach s pour rem dier au probl me des boutons Suivant et Pr c dent inactifs (comme Gmail et Google Maps par exemple).
Inconv nients des cadres cach s

Manque d informations sur le traitement de la requ te
Le principal inconv nient de la technique des cadres cach s est li au manque d informations concernant le traitement de la requ te HTTP en arri re-plan. Cela pose de gros probl mes dans le cas o la page du cadre cach n est pas charg e, car l internaute peut attendre ind finiment la r ponse sans tre inform de l incident. M me s il est possible de programmer une temporisation pour interrompre le traitement et informer l utilisateur au bout d un temps d termin , il est pr f rable d sormais d utiliser un objet XMLHttpRequest qui nous permet de garder le contr le de toutes les tapes du traitement de la requ te HTTP.
4
HTTP et l objet XMLHttpRequest

Bien qu il ne soit pas r cent, l objet XMLHttpRequest n a pas t tr s utilis avant l apparition d Ajax (contrairement aux autres technologies utilis es telles que CSS, DOM, XML, JavaScript usuel ), aussi nous avons d cid de lui consacrer un chapitre complet et de vous le pr senter d s maintenant afin que vous puissiez mieux comprendre le fonctionnement des communications asynchrones qui caract risent les applications Ajax.

Ressources sur les technologies utilis es par Ajax
la fin de cet ouvrage, vous trouverez de nombreuses ressources sur les technologies sous-jacentes d Ajax que nous vous avons pr sent es dans le chapitre pr c dent (CSS, DOM, JavaScript, XML ). Nous avons opt pour cette organisation de sorte ne pas surcharger inutilement la progression de votre apprentissage sur Ajax tout en vous permettant d aller puiser des compl ments d information (voire vous initier) sur certaines technologies qui pourraient vous faire d faut pour la compr hension des scripts de cet ouvrage.
Rappels sur le protocole HTTP

Pour les applications Ajax et comme pour la plupart des applications Web traditionnelles, les transferts de donn es entre le serveur Web et le client (le navigateur) utilisent le protocole HTTP ( HyperText Transfer Protocol ). Pour mieux comprendre les rouages des m canismes de l objet XMLHttpRequest, il est int ressant de faire un petit rappel du mode de fonctionnement de ce protocole tr s souvent utilis sur Internet.
Un transfert HTTP se compose de deux l ments : les requ tes ( GET ou POST ) envoy es par le navigateur et la r ponse retourn e au navigateur par le serveur.

Les requ tes HTTP

Pour envoyer une requ te HTTP au serveur depuis un navigateur, deux m thodes peuvent tre utilis es : GET ou POST .

Comment indiquer la m thode choisie en Ajax ?
Dans le cas d un simple formulaire, on pr cise la m thode choisie en l indiquant en tant que valeur de l attribut method de la balise du formulaire ( form method= get par exemple) alors que dans le cas d Ajax, elle sera notifi e dans le premier param tre de la m thode open() de l objet XMLHttpRequest ( objetXHR.open( get , monFichier.php?val= +i,true) par exemple. La m thode open() et les autres m thodes et propri t s de l objet XMLHttpRequest sont d taill s plus loin dans ce m me chapitre.

Requ te avec la m thode GET
Une requ te GET peut tre initi e par un formulaire (dont l attribut method serait configur avec la valeur GET ) mais aussi partir d un simple lien hypertexte auquel les valeurs envoyer seront associ es l URL sous forme de couple variable/valeur apr s un point d interrogation (voir code 4-1).
Code 4-1 :

monProgramme.php?message=coucou
Si plusieurs couples de variable/valeur doivent tre envoy s, ils sont alors s par s par une esperluette (voir code 4-2).
Code 4-2 :

monProgramme.php?message=coucou nom=toto
Parmi les inconv nients de la m thode GET , notons que la taille d une requ te GET tant limit e 255 octets (ou 1024 selon les syst mes), le nombre d informations envoy es par cette m thode se trouve du m me coup r duit. En outre, les valeurs tant envoy es dans l URL, elles sont donc visibles par tous. Les requ tes GET ne pourront donc pas tre utilis es pour envoyer des informations volumineuses ou si la confidentialit des informations doit tre pr serv e.
Les avantages de la m thode GET sont principalement sa simplicit et la possibilit de construire dynamiquement des pseudo-URL dans lesquelles sont int gr es les valeurs envoyer (ce qui est bien pratique dans les sites catalogues pour afficher la fiche d un produit sp cifique partir des liens hypertextes d une liste, par exemple : fiche.php?id=5 ). noter que la m thode GET est aussi souvent utilis e dans les requ tes des moteurs de recherche en raison de la possibilit offerte l internaute d enregistrer la requ te dans ses favoris.
Quelle que soit l origine d une requ te GET (formulaire ou lien hypertexte avec param tres), le serveur r ceptionnera un ensemble d informations compos es d une ligne de requ te et de plusieurs lignes d en-t te (pour les requ tes GET , le corps de la requ te est vide car les valeurs sont ins r es dans la ligne de requ te, voir code 4-4).
Code 4-3 : Exemple d URL absolue avec ses param tres :
http://www.eyrolles.fr/monRepertoire/monProgramme.php?message=coucou

Code 4-4 : Exemple simplifi d une requ te HTTP avec la m thode GET initi e par l URL du code 4-3 :

1 : Ligne de requ te

GET /monRepertoire/?message=coucou HTTP/1.1

2 : Lignes d en-t te

Host: www.eyrolles.fr
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive

3 : Corps de la requ te (vide dans le cas d une requ te GET)
Requ te avec la m thode POST
Contrairement la m thode GET , les valeurs envoy es avec la m thode POST ne sont pas visibles dans la barre d adresse (ce qui est appr ciable si vous d sirez envoyer des mots de passe par exemple ) mais plac es dans une variable d environnement ins r e dans le corps de la requ te (et donc invisible par l internaute). Le nombre d informations n est plus limit comme pour la m thode GET et cette m thode offre ainsi la possibilit de transmettre des flux de donn es beaucoup plus importants (jusqu 2Go). Par contre, les donn es envoy es avec la m thode POST ne peuvent tre transmises que par un formulaire (ou par la m thode open() d un objet XMLHttpRequest en ce qui concerne les applications Ajax) et non plus par une URL comme avec la m thode GET .
noter enfin que, contrairement une requ te GET pour laquelle certains navigateurs (IE par exemple) r cup rent automatiquement les pr c dentes donn es dans la m moire cache, il n en n est pas de m me avec la m thode POST qui n cessite l autorisation de l internaute pour renvoyer les param tres (quel que soit le navigateur utilis ).
Dans le cas d une requ te POST , le serveur r ceptionnera un ensemble d informations compos es d une ligne de requ te, de plusieurs lignes d en-t te et d un corps de requ te contenant les valeurs transmettre (voir code 4-5).
Code 4-5 : Exemple simplifi d une requ te HTTP avec la m thode POST initi e par un formulaire contenant un seul champ nomm " message :

1 : Ligne de requ te

POST /monRepertoire/ HTTP/1.1
2 : Lignes d en-t te
Host: www.eyrolles.fr
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1
Content-type: application/x-www-form-urlencoded
Content-Length: 15
Connection: Keep-Alive

3 : Contenu de la requ te

message=coucou

Si l on compare les informations d une requ te POST (voir code 4-5) avec celles d une requ te GET (voir code 4-4), on remarque que les donn es transmettre sont maintenant ins r es dans le corps de la requ te et que deux nouveaux en-t tes ont t ajout s. L ent te Content-type qui pr cise l encodage utilis ( noter qu il s agit toujours du m me type MIME quel que soit le navigateur) pour le corps de la requ te - qui contient maintenant les donn es - et l en-t te Content-Length qui indique la taille en octets des donn es contenues dans le corps de la requ te.
La r ponse HTTP

Le traitement par le serveur d une requ te HTTP renvoie un ensemble d informations au navigateur qui a initi la demande (voir code 4-6). Si on observe ces informations, on peut distinguer trois parties diff rentes :
La ligne de statut (voir le rep re 1 du code 4-6) qui rappelle la version du protocole HTTP utilis ( HTTP/1.1 dans l exemple) suivi du statut de la r ponse (information importante pour Ajax comme 200 , qui signifie le succ s de l op ration) et d un message compl mentaire ( OK par exemple).
Un nombre variable de lignes d en-t te (voir le rep re 2 du code 4-6) contenant entre autres l en-t te Content-Type qui indique le type MIME du r sultat (information importante pour Ajax). Ce type peut par exemple tre text/plain pour du texte brut, text/html pour une page HTML ou encore text/xml pour du XML. Signalons aussi l en-t te Cache-Control int ressant pour Ajax car il permet d interagir sur le cache du navigateur.
Le contenu de la r ponse renvoy e (voir le rep re 3 du code 4-6) peut tre une page HTML compl te comme dans l exemple ci-dessous mais dans le cas d Ajax, le contenu de la r ponse sera surtout constitu de donn es seules (au format texte ou XML), ou encore de fragments HTML pour les r ponses g n r es suite une requ te d une application Ajax. En effet, nous avons vu pr c demment que l un des avantages d une application Ajax est justement de pouvoir r cup rer le minimum utile du serveur et non pas la page compl te comme pour les requ tes Web traditionnelles.
Code 4-6 : Exemple d une r ponse HTTP serveur :

1 : Ligne de statut

HTTP/1.1 200 OK

2 : Lignes d en-t te

Cache-Control: private
Content-type: text/html
Server: GWS/2.1
Date:Tue, 15 Jun 2007 13:20:24 GMT

3 : Contenu de la r ponse

html
head
title R ponse /title
/head
body
Hello
code
/body
/html

Selon la r ponse du serveur, le code du statut HTTP peut changer. Nous verrons par la suite que ce code devra tre test par le script du moteur Ajax afin de s assurer que l op ration a t effectu e avec succ s. Il est donc utile de conna tre les principaux codes de statut HTTP que le serveur peut renvoyer. Ces codes sont rappel s dans le tableau 4-1 .
Tableau 4-1 Principaux codes de statut HTTP Code de statut Signification Exemple/Message 200 299 Succ s de l op ration 200/OK : Requ te accomplie avec succ s 300 399 Redirection 301/Moved Permanently : Redirection permanente 400 499 Erreur client 404/Not Found : Document non trouv 500 599 Erreur serveur 503/Service Unavailable : Service non disponible
Caract ristiques de l objet XMLHttpRequest

La communication des applications Ajax avec le serveur repose essentiellement sur l objet XMLHttpRequest. Cette classe JavaScript permet d ex cuter des requ tes HTTP du navigateur vers le serveur d une mani re asynchrone (r ponse diff r e sans blocage de l application client) sans avoir recharger la page HTML comme c est le cas lors d une requ te HTTP traditionnelle.
D j op rationnel depuis 1998

L objet XMLHttpRequest n est pas r cent car la classe qui permet de l instancier a vu le jour en 1998. l poque, Microsoft l avait d velopp pour l int grer sous forme de contr le ActiveX dans son navigateur Internet Explorer 5.0.
Tr s peu utilis jusqu l av nement Ajax, il a cependant t impl ment progressivement dans la plupart des navigateurs et fait d sormais l objet d une sp cification du W3C ( www.w3.org/TR/XMLHttpRequest/ ).
Tableau 4-2 Progression de l impl mentation de la classe XMLHttpRequest dans les diff rents navigateurs Ann e d impl mentation Navigateur(s) concern (s) 1998 Internet Explorer 2002 Mozilla 2004 Safari 2005 Konqueror et Opera
Une instanciation en cours d homologation

Si cette classe est impl ment e dans les principaux navigateurs du moment, la proc dure d instanciation d un objet n est malheureusement pas encore standardis e pour tous (m me si l homog n isation de son utilisation devrait bient t voir le jour). En effet, comme l origine la classe a t cr e en tant que contr le ActiveX, la proc dure d instanciation avec Internet Explorer (utilisation du constructeur ActiveXObject() ) est diff rente des autres navigateurs (utilisation du constructeur XMLHttpRequest() ). De plus, la valeur passer en param tre lors de l instanciation d un objet dans un navigateur Microsoft est diff rente entre la premi re version d Internet Explorer sur lequel cette classe a t impl ment e (la version IE 5.0) et les versions ult rieures. On se retrouve donc avec 3 syntaxes d instanciation diff rentes selon le navigateur utilis !
Pour contourner ce probl me, une m thode judicieuse consiste d velopper une fonction de cr ation g n rique de l objet XMLHttpRequest prenant en compte la d tection du navigateur (et aussi sa version pour IE) afin d utiliser la bonne syntaxe d instanciation selon le contexte. Cette fonction peut tre avantageusement int gr e dans un fichier JavaS-cript externe qui sera li aux pages HTML utilisant Ajax. noter que si vous utilisez des frameworks (comme jQuery ou Prototype par exemple) la fonctionnalit de d tection du navigateur est en g n ral int gr e dans leur biblioth que JavaScript.
Tableau 4-3 Syntaxe utiliser pour l instanciation d un objet XMLHttpRequest selon les navigateurs et leurs versions Navigateurs concern s Syntaxe d instanciation d un objet XMLHttpRequest Internet Explorer 5.0 new ActiveXObject( Microsoft.XMLHttp ) Internet Explorer version ult rieure 5.0 new ActiveXObject( Msxml2.XMLHttp ) Autres navigateurs (Firefox ) new XMLHttpRequest( )
Pour illustrer la cr ation d un objet XMLHttpRequest en JavaScript, vous trouverez ci dessous un exemple de fonction g n rique de cr ation d un objet XMLHttpRequest selon le navigateur utilis .
Code 4-7 : Fonction g n rique de cr ation d un objet XMLHttpRequest :

function creationXHR() {
var resultat=null;
try { //test pour les navigateurs : Mozilla, Opera...
resultat= new XMLHttpRequest() ;
}
catch (Error) {
try { //test pour les navigateurs Internet Explorer 5.0
resultat= new ActiveXObject( Msxml2.XMLHTTP ) ;
}
catch (Error) {
try { //test pour le navigateur Internet Explorer 5.0
resultat= new ActiveXObject( Microsoft.XMLHTTP ) ;
}
catch (Error) {
resultat= null;
}
}
}
return resultat;
}

La fonction JavaScript ci-dessus peut tre incorpor e directement dans la page HTML mais il est plus judicieux de la saisir dans un fichier JS externe et de le lier ensuite la page HTML concern e afin de pouvoir en disposer facilement dans les autres pages du site.

var objetXHR = creationXHR();

La ligne de code ci-dessus est un exemple d utilisation de la fonction g n rique pour cr er un objet XMLHttpRequest.
La fonction du code 4-7 teste successivement la cr ation de l objet XMLHttpRequest avec des syntaxes d instanciation diff rentes correspondant aux trois types de navigateurs. La structure de gestion des exceptions ( try ) permet de tester une fonction sans pour autant g n rer d erreur. Si le test est positif, l objet est cr et, dans le cas contraire, elle passe au test suivant et poursuit le m me processus ( catch ).

Ressources sur les technologies associ es
Si la syntaxe du code de cette fonction ne vous semble pas vidente, vous pouvez vous r f rer aux ressources sur le JavaScript (et notamment sur la gestion des exceptions : try , catch ) regroup es la fin de cet ouvrage.
Propri t s et m thodes de l objet XMLHttpRequest

Comme toutes les classes, XMLHttpRequest poss de des propri t s et des m thodes. Avant de les utiliser pour mettre en uvre une requ te serveur, nous vous proposons de les pr senter dans les tableaux 4-4 et 4-5 ci-dessous.
Tableau 4-4 Propri t s de l objet XMLHttpRequest Propri t s Description onreadystatechange D signe une fonction de rappel qui sera appel e chaque fois que l tat du traitement d une requ te asynchrone (readyState) changera d tat. readyState tat du traitement d une requ te asynchrone (valeur num rique de 0 4, voir le tableau 4-6 pour conna tre les diff rents tats et leur signification). responseText Contient le r sultat du serveur sous forme de texte. responseXml Contient le r sultat du serveur sous forme XML. status Contient le code de statut HTTP (exemple : 200, voir tableau 4-1 ). Ce code est disponible en lecture uniquement lorsque la r ponse a t transmise. statusText Contient le message de statut HTTP (exemple : OK, voir tableau 4-1 ). Ce texte est disponible en lecture uniquement lorsque la r ponse a t transmise.

Tableau 4-5 M thodes de l objet XMLHttpRequest M thodes Description abort() Annule la requ te en cours. getAllResponseHeaders() Retourne dans une cha ne de caract res tous les en-t tes HTTP contenus dans la r ponse du serveur. Cette m thode n est utilisable que lorsque l tat du traitement (readyState) est gal 3 ou 4 (Interactive ou Completed). getResponseHeader( nomEnTete ) Retourne la valeur de l en-t te dont le nom est indiqu dans le param tre ( nomEnTete ). Cette m thode n est utilisable que lorsque l tat du traitement (readyState) est gal 3 ou 4 (Interactive ou Completed). open( methode , url , async ) Initialise l objet en pr cisant certains param tres de la requ te : la m thode utilis e ( methode : GET ou POST), l URL du script c t serveur ( url : fichier.php par exemple) et un troisi me param tre en option pour indiquer si la communication doit tre asynchrone ( async : true) ou synchrone ( async : false). send( contenu ) Envoie la requ te. Le param tre ( contenu ) pourra prendre la valeur null dans le cas d un requ te initialis e avec la m thode GET ou une cha ne de requ te dans le cas d une m thode POST. videmment cette m thode ne peut tre utilis e que lorsque la m thode open() a d j t configur e et donc que lorsque l tat du traitement (readyState) est gal 1 (Loading). setRequestHeader( nom , valeur ) Attribue une valeur ( valeur ) l en-t te de la requ te dont le nom est sp cifi dans le premier param tre ( nom ). Cette m thode n est utilisable que lorsque l tat du traitement (readyState) est gal 1 (Loading).
Tableau 4-6 Signification des diff rents tats de traitement d une requ te asynchrone (accessible gr ce la propri t " readyState ) Valeur tat Signification 0 Unitialized L objet n a pas encore t initialis et donc la m thode open() n a pas encore t appel e. 1 Loading L objet a t initialis mais la requ te n a pas encore t envoy e l aide de la m thode send(). 2 Loaded La requ te a t envoy e l aide de la m thode send(). 3 Interactive La r ponse est en cours de r ception. 4 Completed La r ponse du serveur est compl tement r ceptionn e. Les donn es sont disponibles dans la propri t responseText (s il s agit de donn es texte) ou dans responseXML (s il s agit de donn es XML).

Restriction d acc s aux domaines externes
Pour viter des utilisations malveillantes d une application Ajax qui r cup rerait des donn es d un autre site sans l autorisation de son propri taire, les navigateurs ont int gr un syst me de s curit qui interdit les appels Ajax vers des domaines diff rents de celui dans lequel se trouve l application Ajax.
Cependant, dans certains cas il est n cessaire d acc der des ressources plac es sur un serveur externe ou mis disposition par un fournisseur d information (cas des flux RSS par exemple). Pour d tourner cette contrainte, il est alors possible de mettre en uvre un serveur mandataire (proxy) qui aura pour fonction de relayer des requ tes entre le serveur Web et le serveur fournisseur d information.

Cr ation de moteurs Ajax de base
Envoi d une requ te synchrone sans param tre

M me si l objet XMLHttpRequest est tr s souvent exploit en mode asynchrone, il est aussi capable de g rer des requ tes synchrones. Dans ce cas, le troisi me param tre de la m thode open() doit tre configur avec la valeur false et le traitement sera s quentiel (voir code 4-8). Ce mode de fonctionnement s apparente plut t au processus d une requ te Web traditionnelle (blocage de l application client dans l attente de la r ponse du serveur) et l utilisation de l objet XMLHttpRequest a beaucoup moins d int r t que dans le mode asynchrone que nous allons traiter ci-apr s.

Codes didactiques
Les diff rents codes de ce chapitre ont t labor s pour vous permettre de comprendre les m canismes d une application Ajax d une mani re progressive. Ils sont souvent incomplets et nous vous conseillons de ne pas essayer de les tester en pratique mais de vous concentrer plut t sur leur analyse. Nous reprendrons ces scripts de base partir du chapitre 7 dans lequel vous aurez tout loisir de mettre en uvre vos premi res applications Ajax.

Code 4-8 : Exemple de traitement d une requ te synchrone (ce code n cessite la d claration pr alable de la fonction creationXHR() d finie dans le code 4-7) :

-MOTEUR AJAX-
//instanciation de l objet XMLHttpRequest
var objetXHR = creationXHR();
//----Traitement SYNCHRONE
//Configuration de la m thode utilis e, du script serveur cibl
//et enfin activation du type synchrone en dernier param tre
objetXHR.open( get , script.php , false );
//envoi de la requ te
objetXHR.send(null);
//r cup ration de la r ponse du serveur
var resultat = objetXHR.responseText ;
.
//Le r sultat peut maintenant tre ins r dans la page HTML
//si le script serveur correspond celui de l encadr , la valeur
//de la variable resultat serait alors gale Bonjour
-FIN DU MOTEUR AJAX-
La premi re ligne de code cr e l objet XMLHttpRequest par instanciation de sa classe. D s que l objet est cr , il est alors possible d initialiser la requ te l aide de la m thode open() . Dans le cas d une requ te synchrone, le troisi me param tre de cette m thode devra tre configur avec la valeur false . Il suffit ensuite d envoyer la requ te avec la m thode send(null) ( noter que l argument de la m thode send() est gal null car la m thode de la requ te est initialis e avec GET ) et d attendre la r ponse dans la propri t responseText de l objet.

R ponse HTTP du serveur une requ te sans param tre
Pour que vous puissiez bien appr hender tous les aspects de ce processus de communication HTTP, nous vous proposons un exemple de script serveur tr s simple qui pourra tre utilis avec les exemples de moteurs Ajax sans param tre que nous vous proposons dans cette partie. Ce script est volontairement minimaliste afin que vous puissiez concentrer votre attention sur le moteur Ajax et non sur le traitement c t serveur.
Code 4-9 : Exemple de code PHP du fichier script.php :

?php
//indique que le type de la r ponse renvoy e au client sera du texte
header( Content-Type: text/plain );
//retourne la r ponse au client l aide de la commande echo
echo Bonjour ;
?
Dans ce contexte, la r ponse HTTP du serveur une requ te simple (sans param tre) pourrait ressembler l exemple ci-dessous.

HTTP/1.1 200 OK
Cache-Control: private
Content-type: text/plain
Server: GWS/2.1
Date:Tue, 15 Jun 2007 13:20:24 GMT
Bonjour
Envoi d une requ te asynchrone sans param tre

Contrairement au mode synchrone, le mode asynchrone n cessite l utilisation d une fonction de rappel. Cette fonction de rappel devra tre d clar e et d sign e avant l envoi de la requ te de sorte ce que le moteur Ajax puisse ensuite l appeler lors de la r ception de la r ponse du serveur. Pour d signer la fonction de rappel, son nom devra tre m moris dans la propri t onreadystatechange de l objet XHR (voir rep re 1 dans le code 4-10). Ainsi, la fonction d sign e comme fonction de rappel sera appel e chaque changement de la propri t readyState . La propri t readyState correspond aux diff rents tats de traitement d une requ te Ajax (revoir tableau 4-6 ), elle changera donc plusieurs fois d tat au cours du cycle de chaque requ te. Comme nous ne d sirons r cup rer le r sultat que lorsqu il sera compl tement r ceptionn , il faut donc ajouter un test dans la fonction de rappel (voir rep re 2 du code 4-10) afin de s assurer que la propri t readyState est gale la valeur 4 ( tat Completed ) avant de copier le r sultat dans une variable pour sa future exploitation (voir code 4-10).
Code 4-10 : Exemple de traitement d une requ te asynchrone (ce code n cessite la d claration pr alable de la fonction creationXHR() d finie dans le code 4-7) :

-MOTEUR AJAX-
//instanciation de l objet XMLHttpRequest
var objetXHR = creationXHR();
//D claration de la fonction de rappel
function traitementResultat() {
if(objetXHR.readyState==4) {
var resultat = objetXHR.responseText ;

// Le r sultat peut maintenant tre ins r dans la page HTML
//si le script serveur correspond celui de l encadr ,
//la valeur de la variable resultat sera
//alors gale Bonjour
}
}
//----Traitement ASYNCHRONE
//D signation de la fonction de rappel
objetXHR.onreadystatechange = traitementResultat ;
//Configuration de la m thode utilis e, du script serveur cibl
//et enfin activation du type asynchrone en dernier param tre
objetXHR.open( get , script.php ,true);
//envoi de la requ te
objetXHR.send(null);
-FIN DU MOTEUR AJAX-

Ateliers p dagogiques sur les requ tes asynchrones
Le fonctionnement de la fonction de rappel et de la propri t readyState d une requ te asynchrone sera revu en d tail dans les ateliers p dagogiques du chapitre 9 .
Ajout d un traitement des erreurs HTTP du serveur

Les scripts pr c dents fonctionnent tr s bien tant qu il n y a pas de probl me lors du transfert HTTP. Imaginez maintenant que le script serveur soit supprim ou d plac . Dans ce cas les scripts ne fonctionneront plus et rien n indiquera la nature du probl me. Pourtant le serveur dispose d une variable qui indique les erreurs HTTP, il s agit bien s r du code de statut (revoir tableau 4-1 ). De m me, l objet XMLHttpRequest poss de une propri t status qui permet de lire facilement cette information. Nous allons donc modifier le script de la fonction de rappel pour y ajouter un second test afin de s assurer que tout s est bien pass avant d exploiter le r sultat (dans ce cas la propri t status doit tre gale 200). Dans le cas contraire, nous affichons un message d erreur afin d en informer les utilisateurs.
Code 4-11 : Exemple d une requ te asynchrone avec traitement des ventuelles erreurs HTTP (ce code n cessite la d claration pr alable de la fonction creationXHR() d finie dans le code 4-7) :

-MOTEUR AJAX-
//instanciation de l objet XMLHttpRequest
var objetXHR = creationXHR();
//D claration de la fonction de rappel
function traitementResultat() {
if(objetXHR.readyState==4) {
if(objetXHR.status==200) {
var resultat = objetXHR.responseText ;

// Le r sultat peut maintenant tre ins r dans la page HTML
//si le script serveur correspond celui de l encadr ,
//la valeur de la variable resultat sera
//alors gale Bonjour
}else {
alert( Erreur HTTP N + objetXHR.status);
}
}
}
//----Traitement ASYNCHRONE
//D signation de la fonction de rappel
objetXHR.onreadystatechange = traitementResultat ;
//Configuration de la m thode utilis e, du script serveur cibl
//et enfin activation du type asynchrone en dernier param tre
objetXHR.open( get , script.php , true );
//envoi de la requ te
objetXHR.send(null);
-FIN DU MOTEUR AJAX-
Envoi d une requ te asynchrone avec un param tre GET

En g n ral les requ tes Ajax sont accompagn es de param tres afin d indiquer au script serveur les donn es retourner. La mani re la plus simple d envoyer un param tre est d utiliser la m thode GET et d ajouter un param tre d URL la suite de l adresse du script cibl comme par exemple : scriptAvecParametre.php ?id=2 (pour l utilisation de ce param tre c t serveur, voir code 4-12).
Ce proc d a aussi l avantage de favoriser la mise au point du script serveur, puisqu il suffit de l appeler individuellement dans le navigateur en ajoutant le param tre d URL manuellement la suite de son nom (pour cela, saisir son URL compl te dans la barre d adresse du navigateur comme par exemple http://localhost/scriptAvecParametre.php?id=2 ). Le script ainsi appel avec ce param tre doit afficher l cran les m mes donn es qu il renverra ensuite l objet XMLHttpRequest lorsque le syst me sera op rationnel (soit dans notre exemple " Bonjour Monsieur Dupond ). Cette technique vous permet de v rifier que le script serveur fonctionne correctement et d aiguiller ventuellement vos recherches vers le programme JavaScript c t client si le probl me subsiste.
C t serveur, le param tre ( ?id=2 par exemple) est r cup r par le biais de la variable $_REQUEST[ id ] avant d tre exploit dans le programme de construction du r sultat (voir code 4-12). Celui-ci sera ensuite affich l cran pour tre r cup r en diff r dans la propri t responseText de la fonction de rappel du moteur Ajax c t client (voir la fonction traitementResultat() code 4-13).

R ponse HTTP du serveur un param tre de la requ te
Pour les moteurs Ajax incluant un param tre dans l envoi de la requ te, nous avons l g rement modifi le script serveur de sorte qu il envoie le message d accueil correspondant au num ro de l identifiant de l utilisateur concern .
Code 4-12 : Exemple de code PHP du fichier scriptAvecParametre.php :

?php
//indique que le type de la r ponse renvoy e au client sera du texte
header( Content-Type: text/plain );
//r cup ration de la variable GET
if(isset($_REQUEST[ id ])) $id=$_REQUEST[ id ]; else $id=0;
//affectation du nom correspondant l identifiant
if($id==1) $nom= Dumoulin ;
elseif($id==2) $nom= Dupond ;
elseif($id==3) $nom= Marchand ;
else $nom= Inconnu ;
//mise en forme et renvoi de la r ponse au client
echo Bonjour Monsieur . $nom ;
?
Dans ce contexte, la r ponse HTTP du serveur pourrait ressembler l exemple ci-dessous si le param tre de la requ te est id=2.

HTTP/1.1 200 OK
Cache-Control: private
Content-type: text/plain
Server: GWS/2.1
Date:Tue, 15 Jun 2007 13:20:24 GMT
Bonjour Monsieur Dupond

Code 4-13 : Exemple d une requ te asynchrone accompagn e d un param tre transmis avec la m thode GET (ce code n cessite la d claration pr alable de la fonction creationXHR() d finie dans le code 4-7) :

-MOTEUR AJAX-
//instanciation de l objet XMLHttpRequest
var objetXHR = creationXHR();
//D claration de la fonction de rappel
function traitementResultat() {
if(objetXHR.readyState==4) {
if(objetXHR.status==200) {
var resultat = objetXHR.responseText ;

// Le r sultat peut maintenant tre ins r dans la page HTML
//si le script serveur correspond celui de l encadr ,
//la valeur de la variable resultat sera
//alors gale Bonjour Monsieur Dupond
}else {
alert( Erreur HTTP N + objetXHR.status);
}
}
}
//----Traitement ASYNCHRONE - GET
//D signation de la fonction de rappel
objetXHR.onreadystatechange = traitementResultat ;
//Configuration de la m thode utilis e, du script serveur avec
//les param tres transmettre au serveur
//et enfin activation du type asynchrone en dernier param tre
var numero=2; //simulation du choix d un num ro d identifiant
objetXHR.open( get , scriptAvecParametre.php?id= +numero, true );
//envoi de la requ te
objetXHR.send(null);
-FIN DU MOTEUR AJAX-
Envoi d une requ te asynchrone avec un param tre POST

Une autre alternative pour envoyer un param tre au serveur consiste configurer la requ te avec la m thode POST . Cette technique est en g n ral utilis e quand les donn es des param tres sont importantes (sup rieure 512 octets) ce qui est assez rare en pratique. D autre part, cette m thode est moins facile mettre en uvre car si vous d sirez v rifier le bon fonctionnement du script PHP seul, il faut alors cr er un formulaire POST pour simuler l envoi de la requ te Ajax.
noter cependant que si vous d sirez envoyer vos param tres au serveur en XML et non au format texte sous forme de couple variable/valeur, il faudra dans cas utiliser la m thode POST pour mettre en uvre votre application.
Le fonctionnement est n anmoins semblable (voir code 4-14) hormis le fait que le param tre est pass en argument de la m thode send() (comme par exemple : send( id=2 ) ) et non plus la suite de l URL du fichier serveur dans le second param tre de la m thode open() (pour m moire : scriptAvecParametre.php ?id=2 ). En m thode POST , il faut indiquer le type des donn es envoy es par le biais de la m thode setRequestHeader qui affectera le type correspondant l en-t te Content-Type avant d envoyer la requ te (voir code 4-14). En effet, quand un formulaire traditionnel dans un navigateur envoie des donn es en m thode POST , le navigateur se charge d affecter automatiquement la valeur application/ x-www-form-urlencoded l en-t te Content-Type de la requ te. Dans le cas d une requ te Ajax, il faut r aliser manuellement cette affectation, car lorsque les donn es POST arriveront sur le serveur, PHP recherchera leur type d encodage dans cet en-t te afin de les analyser correctement.
C t serveur il n y a pas de diff rence (le fichier serveur sera donc celui du code 4-12) car pour la r cup ration du param tre nous avons utilis la variable HTTP $_REQUEST[ id ] qui permet de r cup rer des variables envoy es par un client quelle que soit leur m thode (contrairement $_GET[ id ] et $_POST[ id ] qui sont d di s chacune des m thodes).

Code 4-14 : Exemple d une requ te asynchrone accompagn e d un param tre transmis avec la m thode POST (ce code n cessite la d claration pr alable de la fonction creationXHR() d finie dans le code 4-7) :

-MOTEUR AJAX-
//instanciation de l objet XMLHttpRequest
var objetXHR = creationXHR();
//D claration de la fonction de rappel
function traitementResultat() {
if(objetXHR.readyState==4) {
if(objetXHR.status==200) {
var resultat = objetXHR.responseText ;
.
//Le r sultat peut maintenant tre ins r dans la page HTML
//si le script serveur correspond celui de l encadr ,
//la valeur de la variable resultat sera
//alors gale Bonjour Monsieur Dupond
}else {
alert( Erreur HTTP N + objetXHR.status);
}
}
}
//----Traitement ASYNCHRONE - POST
//D signation de la fonction de rappel
objetXHR.onreadystatechange = traitementResultat ;
//Configuration de la m thode utilis e, du script serveur cibl
//et enfin activation du type asynchrone en dernier param tre
objetXHR.open( post , scriptAvecParametre.php , true );
//Affectation du type d encodage de la requ te envoy e
objetXHR.setRequestHeader( Content-Type , application/x-www-form-urlencoded )
//simulation du choix d un num ro d identifiant
var numero=2;
//envoi de la requ te avec un param tre
objetXHR.send(id=numero);
-FIN DU MOTEUR AJAX-
R cup ration du r sultat de la requ te avec responseText ou responseXML

Pour r cup rer le r sultat renvoy par le serveur, nous avons utilis jusqu pr sent (dans la fonction de rappel traitementResultat () ) la propri t responseText de l objet XMLHttpRequest (voir code 4-15) si la r ponse est au format texte.
Code 4-15 : R cup ration de la r ponse du serveur dans une variable resultat .

var resultat = objetXHR.responseText ;
Par la suite nous verrons qu il est aussi possible de r cup rer des r sultats plus complexes au format XML. Dans ce cas, il faudra utiliser la propri t responseXML du m me objet.
Rappelons enfin que le r sultat du serveur n est disponible dans les propri t s response-Text ou responseXML que lorsque le cycle de transfert HTTP est termin et que l tat de la propri t readyState est gal 4 ( Completed ). C est d ailleurs pour cette raison que nous avons ajout le test du code 4-16 dans la fonction de rappel car celle-ci est appel e chacune des 4 modifications de la propri t readyState d un cycle de transfert HTTP et nous d sirons r cup rer la r ponse du serveur uniquement au terme de ce cycle.
Code 4-16 : Test de l tat de la propri t readyState :

//---Fonction de rappel
function traitementResultat() {
if(objetXHR.readyState==4) {
if(objetXHR.status==200) {
var resultat = objetXHR.responseText ;
}
}
}
Utilisation de innerHTML pour afficher le r sultat de la requ te

Dans les scripts pr c dents, nous avons r cup r la r ponse du serveur dans une variable resultat (voir code 4-15). Si nous d sirons maintenant l afficher dans la page, la m thode la plus simple consiste utiliser l attribut innerHTML . Cet attribut permet de remplacer le contenu d un l ment par une cha ne de caract res qui lui est affect e.
Pour cela, il faut commencer par cibler un l ment de la page ( span id= message par exemple, voir code 4-17) en se r f rant son identifiant l aide de la m thode getElementById() puis exploiter son attribut innerHTML comme dans l exemple ci-dessous :

document.getElementById( monMessage ).innerHTML
On pourra ainsi remplacer son contenu par la r ponse du serveur en lui affectant la propri t responseText de l objet XMLHttpRequest (voir code 4-17). Ainsi, la r ponse du serveur (" Bonjour par exemple) s affichera dans la balise span correspondante.
Code 4-17 : Affichage du r sultat dans une balise span de la page (code partiel) :

script language= JavaScript
-MOTEUR AJAX-
//instanciation de l objet XMLHttpRequest
var objetXHR = creationXHR();
//D claration de la fonction de rappel
function traitementResultat() {
if(objetXHR.readyState==4) {
if(objetXHR.status==200) {
document.getElementById( monMessage ).innerHTML=objetXHR.responseText ;
}
}
}
//----Traitement ASYNCHRONE - GET
//D signation de la fonction de rappel
objetXHR.onreadystatechange = traitementResultat ;
//Configuration de l objet XHR
objetXHR.open( get , script.php , true );
//envoi de la requ te
objetXHR.send(null);
-FIN DU MOTEUR AJAX-
/script

//avant l affectation :
span id= message /span
//apr s l affectation :
span id= message Bonjour /span

noter cependant que la propri t innerHTML n est pas normalis e par le W3Cw et qu il est pr f rable d utiliser les m thodes du DOM m me si celles-ci sont plus complexes mettre en uvre (ces m thodes seront pr sent es par la suite dans cet ouvrage).
Utilisation d un gestionnaire d v nements pour d clencher l envoi de la requ te

Pour que le moteur Ajax s ex cute, il faut d clencher son appel dans la page HTML de l application. Pour illustrer cela, nous vous proposons de mettre en place un gestionnaire d v nements tr s simple qui appellera une fonction contenant le moteur Ajax. Dans notre exemple, nous utiliserons le gestionnaire d v nements onkeypress afin que la fonction afficheMessage() (regroupant le moteur Ajax) soit invoqu e d s que l utilisateur appuiera sur une touche quelconque du clavier. videmment dans vos futures applications, vous pourrez d clencher de la m me mani re l appel du moteur Ajax avec l un des nombreux gestionnaires d v nements que JavaScript met votre disposition (voir les ressources sur le DOM la fin de cet ouvrage pour plus d information au sujet des gestionnaires d v nements).
Code 4-18 : D clenchement du moteur Ajax l aide du gestionnaire d v nements onkeypress :

script language= JavaScript
//-----Gestionnaire d v nements
window.onkeypress = afficheMessage;
-MOTEUR AJAX-
//D claration de l objet
var objetXHR;
//D claration de la fonction de rappel
function traitementResultat() {
if(objetXHR.readyState==4) {
if(objetXHR.status==200) {
document.getElementById( monMessage ).innerHTML=objetXHR.responseText ;
}
}
}
//D claration de la fonction d appel du moteur Ajax
function afficheMessage() {
//Instanciation de l objet XMLHttpRequest
objetXHR = creationXHR();
//D signation de la fonction de rappel
objetXHR.onreadystatechange = traitementResultat ;
//Configuration de l objet XHR
objetXHR.open( get , script.php ,true);
//Envoi de la requ te
objetXHR.send(null);
}
-FIN DU MOTEUR AJAX-
/script

//avant qu une touche ne soit actionn e :
span id= message /span
//apr s qu une touche a t actionn e :
span id= message Bonjour /span
Partie II
Environnement de d veloppement
Pour d velopper des applications AJAX-PHP, vous devez disposer d un serveur d valuation PHP-MySQL, d un diteur de code polyvalent (pour crire des pages HTML ainsi que des programmes PHP et JavaScript) et d un navigateur (qui sera aussi utilis pour d boguer les scripts). La pr sente partie a pour but de vous accompagner dans la mise en uvre de cet environnement de d veloppement afin de vous permettre de r aliser rapidement vos premi res applications.
5
Firefox, navigateur et d bogueur la fois

Pour tester le bon fonctionnement des applications Ajax, nous utiliserons bien s r un navigateur mais ce dernier servira aussi d outil de d bogage. Pour cela, il convient d installer des extensions ad hoc que nous allons d tailler dans ce chapitre.
Le navigateur Firefox

M me si Internet Explorer reste encore le navigateur le plus utilis actuellement, nous utiliserons Firefox pour tester nos applications dans le cadre de cet ouvrage.
En effet, Firefox a de nombreux avantages par rapport son concurrent : moins vuln rable et plus conforme aux standards, il dispose aussi de nombreuses extensions qui en font aujourd hui l outil indispensable au d veloppement Web. Parmi toutes ses extensions, deux d entre elles nous int ressent particuli rement.
La premi re est l extension " firebug , elle permet de transformer votre navigateur en outil de d bogage. Nous pourrons ainsi analyser le fonctionnement d une application et facilement localiser les ventuelles erreurs qui pourront se glisser dans votre programme JavaScript en contr lant son d roulement.
La seconde extension se nomme " IE Tab , elle permet d activer un mulateur du navigateur Internet Explorer tout en continuant d utiliser Firefox. En effet les principaux probl mes dans la r alisation de scripts client sont souvent li s des incompatibilit s entre navigateurs, aussi, avec cette extension, il sera tr s pratique de passer de l un l autre d un simple clic lors de la phase de test.

Installation de Firefox
Mise jour de Firefox 4.0

Si vous avez d j une version de Firefox install e sur votre ordinateur, il vous est recommand de d sinstaller l ancienne version et de proc der une installation compl te de Firefox 4.0 car l installer par-dessus une version existante peut quelquefois causer des probl mes impr visibles. Pour d sinstaller votre ancienne version il faut utiliser la rubrique Ajout/suppression de programmes de Windows, avant de commencer installer la nouvelle version (voir proc dure ci-apr s). Les param tres, pr f rences et autres marque-pages seront conserv s dans la nouvelle version car ils sont sauvegard s directement dans votre profil utilisateur.
Premi re installation
Si vous n avez pas encore eu le plaisir d utiliser Firefox, commencez par t l charger l installateur depuis le site de Mozilla :
http://www.mozilla.org/fr/firefox/new/
Une fois t l charg sur votre ordinateur, cliquez sur l installateur et laissez-vous guider. Le premier cran vous invite fermer toutes vos applications afin d viter d ventuels conflits de donn es communes. Le deuxi me cran vous propose de choisir le type d installation, standard ou personnalis . Validez l option par d faut (standard). L cran suivant vous demande de confirmer l emplacement de l installation du logiciel, validez l endroit propos par d faut (C: Program Files Mozilla Firefox). Vous serez ensuite invit pr ciser si vous d sirez importer des param tres, favoris et autres r glages depuis un autre logiciel d j install sur votre ordinateur. Vous pourrez ainsi importer de nombreux param tres depuis Internet Explorer mais aussi depuis Netscape, Opera ou encore Mozilla selon le navigateur pr sent sur votre ordinateur au moment de l installation.
Une fois l installation termin e, un dernier cran vous demande de l autoriser mettre jour automatiquement les diff rents modules de Firefox. Nous vous conseillons de laisser cette case coch e, afin de disposer au plus vite de la toute derni re version du navigateur.
Utilisation de Firefox

Firefox regorge de fonctionnalit s tr s int ressantes, mais il serait bien trop long de toutes les d tailler dans cet ouvrage. Nous nous contenterons simplement d indiquer quelques proc dures indispensables conna tre pour pouvoir exploiter au mieux Firefox dans le cadre de la mise au point de pages Web.
Les onglets
Pr curseur par rapport son concurrent, Firefox int gr depuis le d but l affichage des pages dans des onglets diff rents. Les d veloppeurs ayant souvent de nombreuses pages consulter en m me temps appr cieront d utiliser ce syst me d onglets plut t que d avoir jongler avec de multiples fen tres.
L ouverture d un nouvel onglet peut tre effectu e depuis le menu (Fichier puis Nouvel onglet) et cette fonctionnalit sera encore plus efficace si vous utilisez le raccourci clavier en rapport : Ctrl + T. Une autre alternative pour ouvrir un nouvel onglet consiste appuyer sur la touche Ctrl en m me temps qu un clic sur un lien hypertexte d une page. La page cible s ouvrira alors dans un nouvel onglet et ne remplacera pas la page en cours (si vous appuyez sur la touche Maj au lieu de la touche Ctrl, la page s ouvrira cette fois dans une nouvelle fen tre Firefox).
noter que vous pouvez facilement ranger vos onglets dans l ordre qui vous convient par un simple glisser-d poser de souris. Lorsque vous tes en train de d placer un onglet avec votre souris, une petite fl che indique alors quel endroit il va tre ins r si vous rel chez le bouton de la souris.
Les marque-pages
Les marque-pages (appel s aussi " favoris dans Internet Explorer) regroupent les diff rentes adresses m moris es lors de vos consultations de pages Web. Pour enregistrer une nouvelle adresse avec Firefox, il suffit de s lectionner depuis le menu Marque-pages Marquer cette page (ou d utiliser le raccourci clavier Ctrl + D) puis de choisir le dossier dans lequel vous d sirez m moriser le signet. Si vous d sirez que le signet apparaisse dans la barre d outils, il faudra le placer dans le r pertoire Barre personnelle. Enfin, sachez qu il est possible d afficher les marque-pages dans le panneau lat ral avec le raccourci clavier Ctrl + B.
Gestion du cache
Vous pouvez modifier la taille du cache : il s agit de l espace de stockage sur votre machine des l ments d j consult s, pour un chargement plus rapide. La plupart des utilisations n cessitent entre 50 et 100 Mo de m moire cache. Attention ne pas trop augmenter cette valeur, c est la plupart du temps inutile. Pour modifier la taille du cache depuis le menu de Firefox, allez dans le menu Outils Option puis cliquez sur Avanc et choisissez l onglet R seau. Puis dans cette fen tre, vous trouverez un champ qui vous permettra de modifier la taille du cache. De m me, si vous d sirez vider le cache, vous pouvez aussi cliquer sur le bouton Vider le cache maintenant situ droite du champ de cette m me fen tre.
Extensions Firebug et IE Tab

L extension Firebug permet de disposer d outils de suivi du code JavaScript, CSS et DOM d une page parcourue par Firefox. Cette extension permet aussi d acc der aux donn es XML ainsi qu aux requ tes XMLHttpRequest ce qui va se r v ler fort pratique dans la cadre du d bogage d une application Ajax.
Voici un aper u de ses principales fonctionnalit s :
D bogage JavaScript gr ce ses fonctions de suivi de programme et de gestion de points d arr ts qui permettent d avancer pas pas pour d velopper et mettre au point ses scripts tr s rapidement.
Analyse des acc s r seau tr s int ressant pour conna tre les donn es chang es et les temps de r ponse des requ tes HTTP propres Ajax.

Inspection d un l ment HTML, XML ou CSS de la page par simple survol avec possibilit de modifier son code la vol e.
Exploration par le clavier ou la souris des l ments les plus recul s du DOM.
L extension IE Tab permet d muler le fonctionnement du navigateur Internet Explorer directement dans Firefox. Pour basculer d un navigateur l autre, il suffit de cliquer sur le bouton situ en bas droite de l cran.
Installation des extensions

Pour installer une nouvelle extension Firefox, vous pouvez vous rendre directement sur la page Web du site officiel de Mozilla :
https://addons.mozilla.org/firefox/
Une autre alternative consiste aller dans le menu Outils Modules compl mentaires. La fen tre de gestion des modules compl mentaires doit alors s ouvrir (voir figure 5-1 ). Cliquez ensuite sur le bouton Catalogue de cette fen tre pour afficher la page des extensions de Firefox.

Figure 5-1
Fen tre des Modules compl mentaires, rubrique Catalogue de Firefox

Une fois dans la page des extensions, saisissez le nom de l extension recherch e dans le champ pr vu cet effet plac en haut droite de la fen tre (nous saisirons " firebug pour notre exemple, voir rep re 1 de la figure 5-1 ). Cliquez ensuite sur le bouton de validation droite du champ pour lancer la recherche.
Apr s avoir localis la derni re version de l extension Firebug dans les r sultats (voir rep re 2 de la figure 5-1 ), cliquez sur le bouton Installer droite de l extension concern e de la fen tre des modules compl mentaires (voir rep re 3 de la figure 5-1 ).
Une fois l installation effectu e, l extension vient alors se placer dans la fen tre des modules compl mentaires dans la rubrique Extensions (voir rep res 1 et 2 de la figure 5-2 ). Deux boutons plac s droite de l extension concern e vous proposent de Red marrer maintenant pour activer l extension ou d Annuler l extension (voir rep re 3 de la figure 5-2 ). Dans notre cas, comme nous d sirons installer une autre extension, nous allons renouveler la d marche pour rechercher l extension IE Tab avant de red marrer le navigateur.
Cliquez nouveau sur le bouton Catalogue pour lancer une seconde recherche en saisissant cette fois le nom de l extension IE Tab.
La proc dure sera la m me que pour l extension pr c dente, cliquez sur le bouton Installer droite de l extension concern e pour t l charger la seconde extension sur l ordinateur et pour qu elle soit visible dans la fen tre des modules compl mentaires.

Figure 5-2
Fen tre Modules compl mentaires de Firefox, rubrique Extensions apr s l ajout des deux modules compl mentaires

Red marrez ensuite Firefox afin d activer les nouvelles extensions. Lorsque Firefox s ouvre de nouveau, il dispose alors des fonctionnalit s de ses nouvelles extensions. Vous pouvez vous en assurer en cliquant sur l item Outils du menu puis sur Modules suppl mentaires dans le menu d roulant. Si vous cliquez ensuite sur le bouton Extensions (voir rep re 1 de la figure 5-3 ) vous devriez voir les deux nouvelles extensions pr c demment install es (voir rep re 2 de la figure 5-3 ).
De m me deux nouveaux boutons sont venus prendre place en bas droite de l cran du navigateur. Le premier bouton permettra de basculer de Firefox l mulateur de IE et le second d ouvrir Firebug.

Utilisation des extensions
Pour l utilisation des extensions Firebug et IE Tab, nous vous invitons vous r f rer aux chapitres de la partie 3 dans lesquels nous illustrons par des cas pratiques comment exploiter leurs diff rentes fonctionnalit s.

Figure 5-3
Liste des extensions de Firefox apr s l installation de Firebug et de IE Tab
6
WampServer, une infrastructure serveur compl te
Choix de l infrastructure serveur

Contrairement une simple page HTML (m me si elle contient du code JavaScript traditionnel), une page Ajax devra en g n ral communiquer avec des scripts serveur (PHP, par exemple). Cette page pourra ventuellement avoir des acc s une base de donn es (MySQL, par exemple). Or, l utilisation de ces technologies n cessite une infrastructure serveur ad quate car plusieurs applications sont n cessaires leur fonctionnement c t serveur :
un serveur Web (le serveur Apache est le plus fr quemment utilis ) ;
un langage de script serveur install sur le serveur Web (dans cet ouvrage, nous utiliserons PHP) ;
un serveur de base de donn es (dans cet ouvrage, nous utiliserons MySQL).
Selon les ressources mat rielles dont vous disposez, plusieurs solutions peuvent tre exploit es.
La premi re solution concerne les d veloppeurs qui disposent d une connexion permanente et rapide Internet ainsi qu un serveur Web distant quip d une base de donn es MySQL et d un moteur de scripts PHP.
La deuxi me solution est la plus exigeante. Elle concerne surtout les soci t s de d veloppement Internet qui ont leur disposition un serveur Web en local, avec PHP et MySQL, en plus de leur serveur distant de production.
La troisi me solution est accessible tous, puisqu il suffit d installer sur son poste de d veloppement une infrastructure serveur avec PHP et MySQL qui recr e en local le m me comportement que le serveur Web distant.

Nous avons retenu la troisi me solution pour r aliser nos d monstrations car elle pourra tre utilis e par tous les lecteurs de cet ouvrage. Cependant, les concepts d velopp s sont identiques quelle que soit la m thode retenue.
Afin de vous accompagner dans la mise en uvre de votre plate-forme de d veloppement, le paragraphe suivant sera consacr l installation d une infrastructure serveur locale.

Les protocoles Internet
Internet permet de relier de nombreux ordinateurs distants par un support physique. Cependant, pour que ces derniers puissent dialoguer, ils doivent utiliser un m me protocole. Le protocole pour le Web d Internet est le HTTP qui permet aux internautes de consulter (ou d valuer dans notre cas) des pages Web l aide de leur navigateur. Il existe galement d autres protocoles d di s des m dias sp cifiques ou permettant d acc der des services en ligne. Ainsi, les protocoles SMTP et POP3 permettent de g rer les e-mails et le protocole FTP permet le transfert (ou la publication dans notre cas) de fichiers d un ordinateur l autre.
Mise en uvre d une infrastructure serveur
Proc dure d installation de la suite WampServer

Pour t l charger gratuitement la derni re version de WampServer, rendez-vous sur le site www.wampserver.com . Depuis la page d accueil, d roulez la page jusqu la zone des t l chargements, puis cliquez sur le lien correspondant la version d sir e du logiciel, selon votre ordinateur (par exemple, WampServer 64 bits PHP 5.3). Pour vous tenir inform des volutions futures du logiciel, remplissez le formulaire qui s affiche ; sinon, cliquez sur le lien Passer au t l chargement direct. Vous serez ensuite redirig vers la page du site Sourceforge.net d di e WampServer. Une fen tre s affiche alors qui vous permettra de t l charger le fichier ex cutable sur votre ordinateur.
Une fois le fichier enregistr , lancez l installation en double-cliquant sur l installeur. Une premi re fen tre appara t, vous recommandant de fermer toutes les applications actives. Cliquez ensuite sur Next pour faire appara tre les conditions d utilisation (licence) qu il faut valider. Dans l cran suivant, vous pouvez choisir le r pertoire dans lequel vous allez installer le logiciel. Nous vous sugg rons de saisir wampserveur par exemple ( C: wampserveur ). Dans l cran suivant, optez pour la cr ation d une ic ne dans la barre de lancement rapide (option par d faut) et/ou sur le bureau de votre ordinateur, et cliquez de nouveau sur le bouton Next. L cran qui s affiche alors r capitule les options choisies et vous invite lancer l installation via le bouton Install.
L installation d marre et un indicateur affiche l tat d avancement de la t che. Vous aurez ensuite renseigner un certain nombre d informations concernant votre messagerie, savoir le SMTP (prendre le serveur de messagerie sortant de votre fournisseur d acc s Internet : smtp.wanadoo.fr , par exemple) et votre e-mail par d faut. Enfin, un dernier cran indique que l installation de WampServer s est correctement d roul e et vous propose de d marrer le logiciel d s maintenant (case pr coch e).


Figure 6-1
Installation de WampServer : d roulez la page jusqu la zone T l chargement, puis cliquez sur la version d sir e en fonction du type d ordinateur (32 ou 64 bits) .

Apr s validation du dernier cran, WampServer se lance automatiquement et une ic ne en forme de W appara t dans la barre des t ches de votre ordinateur. Si l ic ne est verte, cela signifie que les deux serveurs (Apache et MySQL) sont en tat de marche ; si elle est orange, au moins un des deux serveurs est arr t (ou pas encore d marr ) ; enfin, si elle est rouge, les deux serveurs sont l arr t.

Arr t et d marrage de WampServer

Avant d utiliser WampServer, il est utile de rappeler la proc dure de gestion des serveurs et du logiciel pour vos futures utilisations. Pour commencer, je vous invite arr ter les serveurs de WampServer. Pour cela, cliquez sur l ic ne de WampServer (voir rep re 1 de la figure 6-2 ), puis dans le menu contextuel qui s affiche (par la suite, nous appellerons ce menu contextuel le manager de WampServer). Cliquez ensuite sur Stop All Services (voir figure 6-2 ). L ic ne doit alors changer d tat et appara tre en rouge. Pour red marrer les serveurs de WampServer, vous devez parcourir le manager de ce dernier et s lectionner l option Start All Services. noter que si l ic ne de WampServer reste orange ou rouge, cela indique que vos serveurs (ou l un de vos serveurs) ne sont plus op rationnels. Il faudra alors acc der au manager et s lectionner l option Restart All Services pour r activer le ou les serveurs de WampServer. Nous venons de voir la proc dure pour g rer l arr t et le red marrage des serveurs de WampServer. Cependant, si vous d sirez compl tement arr ter l application, il faut dans ce cas faire un clic droit sur la m me ic ne et s lectionner Exit (l ic ne doit alors dispara tre compl tement de la barre des t ches). Pour relancer le logiciel WampServer, cliquez sur le bouton D marrer de Windows et d roulez le menu Tous les programmes. Cliquez sur le dossier wampserver , puis sur l ic ne start WampServer. Vous devrez r it rer cette op ration lors de chaque d marrage de votre ordinateur afin de lancer WampServer.

Figure 6-2
Utilisation de WampServer : d s le d marrage du logiciel, une ic ne appara tdans la barre des t ches. Cliquez dessus pour afficher le manager de WampServer .
D couverte du manager de WampServer

Le manager de WampServer vous permet d acc der aux fonctions suivantes (les diff rentes options seront d taill es en partant du haut du manager, voir figure 6-2 ) :
Localhost - donne acc s au Web local et permet de tester toutes les pages enregistr es sous la racine www (soit http://localhost/ qui correspond la racine situ e l emplacement C:/wampserveur/www/ ).
PhpMyAdmin - permet d acc der au gestionnaire de base de donn es MySQL nomm phpMyAdmin (soit l alias http://localhost/phpmyadmin/ ).
www directory - donne acc s un explorateur Windows configur pour s ouvrir automatiquement dans le r pertoire racine www ( C: wampserveur www ).
Apache - donne acc s un sous-menu de contr le du serveur Apache depuis le r pertoire Services. Vous pourrez ainsi arr ter le serveur Apache (Stop Service) et le red marrer (Restart Service). Ce sous-menu vous permet aussi de d sinstaller puis d installer un autre serveur Apache d une version diff rente. Cette fonction permet aussi d acc der au fichier de configuration d Apache ( httpd.conf ) dans le Bloc-notes, ou encore de cr er des r pertoires alias pointant vers des ressources plac es dans un emplacement diff rent de la racine www ( C:/wampserveur/www/ par d faut).
PHP - permet d activer ou de d sactiver une extension PHP. Les extensions de PHP sont des biblioth ques de fonctions d di es un usage particulier qu il faut activer sur le serveur avant de pouvoir les exploiter dans vos programmes PHP. Pour activer une extension, il suffit de double-cliquer sur l extension d sir e dans la liste propos e par le manager. PHP permet aussi d acc der au fichier de configuration de PHP ( php.ini ) et au fichier des logs du pr processeur PHP ( php error log ) en utilisant le Bloc-notes.
MySQL - donne acc s un sous-menu d administration du serveur MySQL depuis le r pertoire Services. Vous pourrez ainsi arr ter le serveur MySQL (Stop Service) et le red marrer (Restart Service). Ce sous-menu vous permet aussi de d sinstaller puis d installer un autre serveur MySQL d une version diff rente. Il permet aussi d acc der au fichier de configuration de MySQL ( my.ini ) ainsi qu au fichier des logs du serveur MySQL ( mysql error log ) en utilisant le Bloc-notes.
Start All Services - permet de d marrer tous les services en m me temps (soit les deux serveurs, Apache et MySQL).
Stop All Services - permet d arr ter tous les services en m me temps (soit les deux serveurs, Apache et MySQL).
Restart All Services - permet de red marrer tous les services en m me temps (soit les deux serveurs, Apache et MySQL).

D une version l autre
Selon la version de WampServer et de votre syst me d exploitation, les crans et les proc dures d taill es pr c demment peuvent tre tr s l g rement diff rents. En guise de r f rence, nous avons utilis la version 2.1e de WampServer pour nos d monstrations. Si vous utilisez une version ant rieure ou ult rieure, il est possible que le manager soit organis diff remment ou que son apparence ne soit pas exactement la m me (sur les versions ant rieures, par exemple, l ic ne de WampServer repr sentait un demi-cercle blanc dont certains quartiers pouvaient changer de couleur en fonction des trois tats du serveur). Il n en demeure pas moins que le fonctionnement de ces logiciels reste identique d une version l autre et que vous n aurez pas de difficult adapter les proc dures d taill es dans cet ouvrage.
Test du serveur local

Pour tester le bon fonctionnement du serveur Web et du moteur PHP, nous allons commencer par cr er un script PHP l aide d un simple diteur de texte. Ouvrez le Bloc-notes de Windows partir du menu D marrer ( Programmes Accessoires Bloc-notes ) ou TextEdit si vous utilisez un Macintosh. Saisissez ensuite les trois lignes de code suivantes dans l diteur :

?php
echo Bonjour, PHP fonctionne ;
?

Enregistrez ensuite ce fichier dans C: wampserveur www SITEajax sous le nom bonjour.php , en prenant soin de s lectionner le type Tous fichiers et en ajoutant au nom du fichier l extension .php . Le r pertoire SITEajax sera cr sous www lors de l enregistrement de ce premier fichier. Ce m me r pertoire sera utilis dans les chapitres suivants pour tester les exemples d applications Ajax qui entreront en interactions avec des fichiers PHP, c est pourquoi nous vous conseillons d utiliser les m mes conventions de nommage. De retour dans le Bloc-notes, assurez-vous que le nom du fichier appara t bien dans la barre de titre de la fen tre puis fermez le Bloc-notes.

Ne jamais supprimer le fichier index.php de la racine www
La page Web local qui s affiche quand vous acc dez au localhost par le manager de WampServer, n est autre que le fichier index.php qui se trouve la racine www . Si vous tenez conserver la page qui affiche les diff rents r pertoires de vos sites, il faudra veiller ne pas supprimer ce fichier. Enfin, c t organisation, nous vous conseillons de cr er un r pertoire diff rent sur cette m me racine chaque fois que vous ajouterez un nouveau site sur votre serveur local.

  • Accueil Accueil
  • Univers Univers
  • Ebooks Ebooks
  • Livres audio Livres audio
  • Presse Presse
  • BD BD
  • Documents Documents