Ajax, jQuery

et PHP

42 ateliers pour concevoir

des applications Web 2.0

3...

Groupe Eyrolles

61, bd Saint-Germain

75240 Paris cedex 05

www.editions-eyrolles.com

CHEZ LE MÊME ÉDITEUR

Du même auteur

J.-M. DEFRANCE. – À la découverte de son iPhone.

N°12795, 2011, 206 pages.

J.-M. DEFRANCE. – PHP/MySQL avec Dreamweaver CS4.

N°12551, 2009, 536 pages.

Autres ouvrages sur le développement web

C. PORTENEUVE. – Bien développer pour le Web 2.0.

N°12391, 2008, 2e édition, 674 pages.

O. ANDRIEU. – Réussir son référencement web (édition 2011).

N°12868, 2011, 550 pages.

R. GOETTER. – CSS avancées. Vers HTML 5 et CSS 3.

N°12826, 2011, 400 pages.

R. GOETTER. – CSS 2. Pratique du design web.

N°13257, 2011, 3e édition, 318 pages.

S. JABER. – Programmation GWT 2.

Développer des applications RIA et Ajax avec le Google Web Toolkit.

N°12569, 2010, 484 pages.

R. GOETTER. – Mémento XHTML.

N°12541, 2009, 2e édition, 14 pages.

J. KEITH. – HTML 5 pour les web designers.

N°12861, 2010, 98 pages.

D. CEDERHOLM. – CSS 3 pour les web designers.

N°12987, 2011, 132 pages.

M. NEBRA. – Réussir son site web avec XHTML et CSS.

N°12485, 2010, 3e édition, 318 pages.

F. DRAILLARD. – Premiers pas en CSS et XHTML. CSS 3 et HTML 5.

N°12724, 2010, 3e édition, 342 pages.

Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui menacée. En application de...

Table

Couverture

Titre

Licence

Table

Remerciements

Partie I - Introduction à Ajax

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

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 ﬂux 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

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

Fonctionne sur les anciens...

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...

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...

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...

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...

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...

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...

6

WampServer 2,

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...

7

Dreamweaver,

un éditeur polyvalent

Pourquoi utiliser Dreamweaver ?

Dans le chapitre consacré à l’environnement serveur, vous avez créé un petit script pour tester le fonctionnement du serveur (revoir le fichier bonjour.php dans le chapitre 6). Pour créer ce premier fichier PHP, vous avez utilisé le bloc-notes de votre PC (ou TextEdit si vous avez un Macintosh). Par la suite, nous allons devoir créer des pages HTML, mais surtout de nombreux programmes PHP ou JavaScript. Même s’il est possible de créer tous vos scripts avec un simple bloc-notes, il est très intéressant d’utiliser un éditeur plus évolué et surtout mieux adapté à la création de scripts PHP ou JavaScript (avec des fonctions de coloration syntaxique ou des assistants à la saisie de code par exemple).

Il existe de nombreux éditeurs polyvalents qui pourraient vous assister dans la création de pages HTML et dans la rédaction de programmes PHP et JavaScript, mais nous avons choisi l’éditeur Dreamweaver car il reste encore l’un des éditeurs Web le plus utilisé actuellement et que vous êtes déjà très nombreux à être initié à son usage ce qui facilitera d’autant plus la création de vos applications Ajax-PHP.

Sachez évidemment, que si vous optez pour un autre éditeur, cela ne change en rien la lecture de ce livre car vous pourrez créer de la même manière tous les scripts des applications Ajax-PHP avec votre éditeur préféré.

Pour ceux qui n’ont jamais utilisé Dreamweaver, nous vous proposons de découvrir son interface et les principales fonctions de son éditeur de code. Les utilisateurs de Dreamweaver, quant à eux, peuvent passer directement au chapitre suivant. Nous leur conseillons quand même de lire la partie sur la définition d’un site et notamment celle concernant la configuration du serveur d’évaluation pour disposer de la fonctionnalité d’aperçu des pages. Cette dernière est bien pratique pour les ateliers qui vont suivre.

Enfin, en ce qui concerne la version de Dreamweaver, soyez rassurés, les fonctionnalités que nous utilisons sont semblables dans les trois dernières versions de l’éditeur (CS5, CS4 et CS3). Nous avons réalisé nos démonstrations avec la version CS4 qui est encore la plus utilisée actuellement, mais vous pourrez très facilement adapter ces présentations à la version de Dreamweaver que vous possédez.

Présentation de l’interface de Dreamweaver

L’interface de Dreamweaver est composée d’une fenêtre Document (voir figure 7-1, repère 1) en haut de laquelle on trouve la barre d’outils documents comprenant, entre autres, trois boutons (voir figure 7-1, repère 2) qui permettent de sélectionner le mode (mode Code, Fractionner ou mode Mixte et mode Création). Une barre d’outils nommée Insérer (voir figure 7-1, repère 3) permet d’accéder à plusieurs catégories de boutons classés par thèmes, à partir d’onglets d’un menu déroulant placé en haut de ce même panneau. De nombreux panneaux disposés à droite et en bas de la fenêtre de document permettent de paramétrer les éléments de la page ou d’accéder aux fonctionnalités de l’éditeur. Le panneau Propriétés (voir figure 7-1, repère 4) affiche les caractéristiques de l’élément sélectionné dans la page. Le panneau Fichiers (voir figure 7-1, repère 5) permet d’ouvrir les différents fichiers du site.

Figure 7-1 - L’interface de Dreamweaver et ses principaux panneaux

Définition d’un site

Avant de créer un fichier avec Dreamweaver, il est fortement recommandé de définir la configuration du site. Nous allons configurer Dreamweaver avec le répertoire racine de WampServer 2 afin que nos fichiers PHP et JavaScript soient accessibles depuis le serveur Web Local.

Depuis le menu, sélectionnez Site puis Gérer les sites. Cette fenêtre Gérer les sites permet de créer, modifier ou supprimer un site, par la suite vous pourrez ainsi afficher cette même fenêtre pour apporter des modifications à la configuration initiale d’un site. À noter que pour créer...

Partie III

Ateliers de création d’applications Ajax-PHP

L’objectif des ateliers de cette partie n’est pas de réaliser des applications toujours opérationnelles et sophistiquées mais au contraire de bâtir pas à pas des applications Ajax très simples, à partir de quelques lignes de code, en alternant judicieusement des tests pratiques, analyses, constats et améliorations. Ainsi, au fil des versions successives de ces applications pédagogiques, vous découvrirez toutes les structures possibles et comprendrez le rôle des différentes parties d’une application Ajax-PHP.

8

Applications

Ajax-PHP synchrones

Pour commencer simplement, je vous propose une série d’ateliers qui vous permettra de créer progressivement une première application synchrone.

Pour illustrer son fonctionnement nous réaliserons une petite application qui simulera le fonctionnement d’une machine à sous en ligne. Côté client, l’application sera constituée d’une page HTML dans laquelle nous construirons progressivement un moteur Ajax dont l’objectif sera de simuler le fonctionnement d’une machine à sous. Pour cela l’utilisateur devra appuyer sur un bouton pour déclencher une requête depuis son navigateur et relancer ainsi la machine à sous. Côté serveur, un fichier PHP réceptionnera et traitera la requête client puis renverra le montant du gain en retour qui s’affichera ensuite dans la page Web.

Atelier 8-1 : requête synchrone sur un fichier texte sans feuille de styles

Composition du système

Nous allons commencer par mettre en place une structure minimaliste pour tester le fonctionnement d’une première requête synchrone sur un simple fichier texte (voir figure 8-1). Cette première structure est composée :

d’une page HTML (index.html) dans laquelle nous allons intégrer un bouton de formulaire pour déclencher le jeu, une zone d’affichage du résultat et le JavaScript du moteur Ajax ;

d’un simple fichier texte (gainMax.txt) dans lequel nous allons saisir la valeur du gain maximum, soit 100.

Figure 8-1 - Saisie du moteur Ajax dans la balise <head> de la page

Prérequis concernant l’objet XMLHttpRequest (XHR)

Comme vous avez déjà découvert le fonctionnement de l’objet XMLHttpRequest dans le chapitre 4 de ce même ouvrage, nous nous appuierons sur ce prérequis dans la rédaction des ateliers de ce chapitre. Si toutefois certaines méthodes ou propriétés de cet objet vous semblent inconnues, n’hésitez pas à vous reporter au chapitre 4 pour revoir son concept.

À noter aussi que nous aurons souvent l’occasion de faire référence à l’objet XMLHttpRequest dans cet ouvrage et pour alléger l’écriture, nous utiliserons fréquemment son appellation abrégée XHR.

Fonctionnement du système

Le bouton JOUER de la page permettra à l’utilisateur d’afficher la valeur maximum des gains. Ce bouton sera relié à un gestionnaire d’événements onclick qui appellera une fonction jouer() (voir code 8-1, à noter que pour cette première application le gestionnaire sera intégré dans la balise HTML <input> mais nous verrons par la suite qu’il est préférable de déclarer les gestionnaires d’événements directement dans le code JavaScript afin de bien séparer le programme de la structure de la page).

Cette fonction déclenchera le moteur Ajax (voir code 8-2) qui créera un objet XMLHttpRequest (par la suite, nous utiliserons son appellation abrégée XHR) puis le configurera (à l’aide de la méthode open() de l’objet : choix de la méthode GET et ciblage du fichier gainMax.txt en mode Synchrone) avant d’envoyer la requête (à l’aide de la méthode send() de l’objet).

L’information contenue dans le fichier texte gainMax.txt (soit la valeur 100) sera ensuite retournée au navigateur dans le corps de la réponse. Cette valeur sera enregistrée dans la variable nouveauGain par le biais de la propriété responseText de l’objet puis affectée à la zone de résultat à l’aide de la propriété innerHTML de l’élément résultat.

Conception du système

Téléchargement des codes sources des ateliers

Le moment est venu de passer à l’action. Les explications des différents ateliers vous permettront de créer vos différents scripts à partir de zéro. Cependant, vous avez la possibilité de télécharger tous les fichiers des exemples de cet ouvrage à votre disposition dans l’extension du livre sur le site www.editions-eyrolles.com (utilisez le nom de l’auteur comme mot clé pour accéder à l’extension de cet ouvrage).

Vous pourrez ainsi vous reporter à ces fichiers pour les comparer avec les vôtres en cas de problème, ou encore tester directement le fonctionnement de tous les ateliers directement sur ces ressources si vous ne désirez pas saisir vous-même les codes.

Ouvrez Dreamweaver (ou l’éditeur de votre choix) et sélectionnez le site Ajax que nous avons créé lors de l’installation de l’environnement de développement. Créez un nouveau fichier HTML et...

9

Applications Ajax-PHP

sans paramètre

Nous allons maintenant nous intéresser aux applications Ajax-PHP asynchrones mais sans passage de paramètre (du client vers le serveur) dans un premier temps.

L’application utilisée pour ces ateliers sera une évolution de la machine à sous en ligne que nous avons déjà utilisée dans le chapitre précédent. Ces différents ateliers nous permettront de découvrir les problèmes des communications asynchrones Ajax et comment les résoudre.

Atelier 9-1 : requête asynchrone sur un fichier PHP avec une feuille de styles

Composition du système

Au cours de l’atelier précédent, nous avons remarqué la gêne occasionnée par le blocage du navigateur pendant le traitement d’une requête synchrone. Nous allons maintenant résoudre ce problème en vous présentant une application Ajax configurée en mode asynchrone.

Cette structure est composée :

d’une page HTML (index.html) dont la structure sera semblable à l’atelier précédent mais dont le script du moteur Ajax sera adapté au fonctionnement asynchrone d’une requête ;

d’un fichier serveur PHP (gainAleatoire.php) identique à celui de l’atelier précédent ;

d’une feuille de styles (style.css) identique à celle de l’atelier précédent.

Fonctionnement du système

Une fois la page index.html chargée dans le navigateur, le bouton JOUER est affiché et le message du résultat est rendu invisible par la configuration initiale de la feuille de styles. Lorsque l’utilisateur clique sur le bouton JOUER, la fonction jouer() est appelée. Un objet XHR est alors créé puis configuré en mode Asynchrone pour cibler le fichier serveur gainAleatoire.php. La requête est ensuite envoyée au serveur qui renverra une valeur aléatoire comprise entre 0 et 100 en retour. Pendant le temps de traitement, l’utilisateur peut continuer à utiliser le navigateur, contrairement à la requête synchrone que nous avons étudié dans l’atelier 8-4. À la réception de la réponse, le navigateur appelle la fonction de rappel actualiserPage(). Celle-ci récupérera la valeur de la réponse et l’affectera à la zone résultat comme dans le cas de l’atelier 8-4. Enfin, la dernière instruction de la fonction de rappel permettra de rendre la zone de résultat de nouveau visible et d’afficher ainsi le montant du gain à l’écran.

Conception du système

Ouvrez la page HTML de l’atelier 8-4 précédent (index.html) et sauvegardez-la sous le même nom dans un nouveau répertoire nommé /chap09/atelier9-1/. Copiez ensuite les autres fichiers de l’atelier précédent dans ce nouveau dossier. À noter que vous pouvez facilement faire des copier-coller de fichiers directement dans la fenêtre Fichiers de Dreamweaver. Il suffit pour cela de sélectionner le fichier désiré dans la liste de l’arborescence du site et de faire un clic droit puis de sélectionner l’option Édition puis Copier (ou plus rapidement, d’utiliser le raccourci clavier Ctrl + C). Placez-vous ensuite dans le répertoire de destination, cliquez droit et sélectionnez cette fois Édition puis Coller (ou plus rapidement, utilisez le raccourci clavier Ctrl + V).

Revenez à la page HTML et passez en mode Code. Localisez la ligne de la méthode open() de l’objet XHR et modifiez le troisième paramètre de la fonction pour le remplacer par la valeur true. Avec cette nouvelle configuration, la requête sera maintenant effectuée en mode asynchrone.

objetXHR.open("get","gainAleatoire.php", true);

Contrairement à une requête synchrone pour laquelle les instructions de traitement de la réponse peuvent être mises à la suite de l’envoi de la requête, en mode asynchrone, il faut définir une fonction JavaScript qui prendra en charge ce traitement d’une manière différée lorsque la réponse sera renvoyée par le serveur. Le nom de la fonction de rappel doit être mémorisé dans la propriété onreadystatechange de l’objet XHR avant l’envoi de la requête. Nous allons donc ajouter la ligne d’instruction ci-dessous pour configurer cette propriété et indiquer que la fonction de rappel sera la fonction actualiserPage() (attention à ne pas mettre de parenthèses après le nom de la fonction dans la ligne de code ci-dessous car nous désirons enregistrer la fonction et non le résultat qui pourrait être retourné par cette fonction).

objetXHR.onreadystatechange = actualiserPage;

Les instructions de traitement de la réponse placées après l’envoi de la requête doivent maintenant être transférées de la fonction jouer() dans la nouvelle fonction de rappel nommée actualiserPage() que nous allons définir ensuite. La nouvelle fonction jouer(), après modification, correspond désormais au code 9-1 ci-après.

Code 9-1 :

function jouer() {
  // Création d’une requête uniquement pour Firefox
  objetXHR = new XMLHttpRequest();
  // Configuration de la requête GET et Asynchrone
  objetXHR.open("get","gainAleatoire.php", true);
  // Désignation de la fonction de rappel
  objetXHR.onreadystatechange = actualiserPage;
  // Envoi de la requête
  objetXHR.send(null);
}

Nous allons maintenant définir le traitement effectué par la fonction...

10

Applications Ajax-PHP

avec paramètres GET

Jusqu’à présent, nous nous sommes contentés d’envoyer des requêtes sans paramètre : nous n’en avions pas besoin car le serveur nous renvoyait une valeur aléatoire qui changeait à chaque appel. Or, dans la majorité des applications Ajax, il est intéressant de pouvoir communiquer un ordre au script serveur de sorte qu’il puisse traiter la requête en fonction de cette information et renvoyer une réponse en rapport. Pour cela, nous allons devoir ajouter des paramètres lors de l’envoi de la requête et les gérer côté serveur. Les ateliers de ce chapitre sont consacrés à la mise en œuvre de telles applications.

Atelier 10-1 : requête asynchrone avec un champ texte

Composition du système

Pour commencer, nous allons traiter un exemple simple en ajoutant un champ de saisie au formulaire de l’application de l’atelier précédent proposant au joueur d’indiquer son nom afin que la réponse du serveur soit personnalisée en conséquence (la valeur saisie dans ce champ sera ensuite récupérée et envoyée en paramètre au serveur). Comme nous aurons cette fois deux informations retournées par le serveur (le nom du joueur et son gain) nous en profiterons pour vous présenter une solution simple pour gérer une réponse HTTP du serveur constituée de plusieurs valeurs.

Cette structure est composée :

d’une page HTML (index.html) dont la structure sera identique à celle de l’atelier précédent mais avec un champ de saisie en plus dans le formulaire ;

d’un fichier JS (fonctionsAjax.js) qui contiendra les fonctions communes à tous les moteurs Ajax ;

d’un fichier JS (fonctionsMachine.js) qui contiendra les fonctions spécifiques à l’application Ajax de la machine à sous dont la structure de base avant modification sera identique à celle de l’atelier précédent ;

d’un fichier serveur PHP (gainAleatoire.php) dont la base est identique à celle de l’atelier précédent mais qui sera modifié pour gérer le paramètre de la requête ;

d’une feuille de styles (style.css) identique à celle de l’atelier précédent ;

d’une animation indiquant que le traitement est en cours (chargeur.gif).

Fonctionnement du système

Une fois la page index.html chargée dans le navigateur, l’utilisateur devra saisir son nom avant de cliquer sur le bouton JOUER pour déclencher le moteur Ajax. Celui-ci récupérera la valeur saisie dans le champ et l’enverra en paramètre au serveur. À la réception de la requête, le serveur récupérera le paramètre pour conditionner le traitement à effectuer. Dans notre exemple, le traitement sera très simple car le serveur se contentera de renvoyer le nom de l’utilisateur dans sa réponse en plus de la valeur du gain. À la réception de la réponse, la fonction de rappel du moteur Ajax analysera son contenu pour en tirer les deux informations attendues (le nom du joueur et son gain). Il mettra ensuite en forme ces informations dans un texte qui s’affichera à l’écran selon la structure ci-dessous (avec XX1 pour le nom du joueur et XX2 pour la valeur du gain).

Bravo M. XX1, vous avez gagné XX2 euros

Conception du système

Ouvrez la page HTML de l’atelier 9-8 (index.html) et sauvegardez-la sous le même nom dans un nouveau répertoire nommé /chap10/atelier10-1/. Copiez ensuite les autres fichiers de l’atelier précédent dans ce nouveau dossier.

Nous allons commencer par ajouter le champ de saisie dans le formulaire. Pour cela, ouvrez la page index.html en mode Création et agrandissez la zone <div> (dont l’identifiant est formulaire) à l’aide de ses poignées de sorte à pouvoir y insérer l’objet du champ de saisie et un texte d’information (voir repères 3 et 4 de la figure 10-1). Pour ajouter le champ dans le formulaire, vous pourrez avantageusement utiliser les éléments de formulaire de l’option Formulaire de la barre d’outils Insertion (voir repère 1 de la figure 10-1). Sélectionnez ensuite le champ de saisie (voir repère 2 de la figure 10-1) et renseignez l’information Champ texte du panneau des Propriétés (voir repère 3 de la figure 10-1) avec la valeur nom de sorte à identifier ce nouvel élément (cette procédure configure les attributs name et id du champ). Une fois modifiée, la partie de la zone formulaire doit correspondre au code 10-1.

Code 10-1 : structure de la page index.html :

<div id="formulaire">
   <form method="GET">
     Indiquez votre nom :
     <input type="text" id="nom" name="nom" />
     avant de
     <input name="button" id="button" type="button" onClick="jouer();" value="JOUER" /
</form>
</div>

Figure 10-1 - Modification de la zone<div> du formulaire et ajout du champ de saisie

Évidemment, au lieu de redimensionner la taille de la zone formulaire avec les poignées, vous pouvez aussi modifier la règle de styles formulaire directement dans la feuille de styles style.css. Dans ce cas, utilisez les...

Partie IV

Ressources sur les technologies associées

Cette partie comporte plusieurs chapitres dédiés aux différentes technologies utilisées dans les applications Ajax-PHP. Vous pourrez ainsi vous y reporter ponctuellement pour trouver des compléments d’information lors de la réalisation des ateliers de la partie III de cet ouvrage, mais vous pouvez aussi les parcourir indépendamment du reste de l’ouvrage pour vous initier ou parfaire vos connaissances sur l’une de ces technologies.

16

XHTML

HTML permettait initialement de structurer et de mettre en forme une page Web. Avec l’arrivée du XHTML, sa présentation est maintenant gérée par les feuilles de style CSS, cette évolution permet désormais de scinder parfaitement la structure de la forme des pages Web afin qu’elles soient plus facilement traitées par des applications ou des périphériques différents sans pour autant nécessiter de créer autant de versions de la page que l’on nécessite de représentations.

Les bases du XHTML

La révolution du HTML 5

Le XHTML est en passe d’être remplacé par le HTML 5. Ce dernier a pour vocation de quitter l’ère du Web des documents pour entrer dans celle du Web des applications. Pour cela, le HTML 5 propose de nombreuses nouvelles balises qui vont remplacer le schéma structurel actuel fondé sur des éléments en bloc et en ligne par une structure mieux adaptée à la diversité des contenus que doivent contenir les pages Web d’aujourd'hui. Cependant,...

18

XML

Définition du XML

XML est l’acronyme de eXtensible Markup Language. Comme le HTML, le XML est une norme SGML (Standard Generalized Markup Language) mais celle-ci a été développée bien plus tard (en 1998) alors que le HTML est défini par le consortium W3C depuis 1990.

Un document XML se caractérise par le fait qu’il contient uniquement des données structurées, sans aucune indication quant à leur présentation. Ainsi, si vous ouvrez un document XML dans un navigateur, il n’affiche que la structure des données sous forme d’arborescence. XML est donc particulièrement bien adapté pour structurer, enregistrer et transmettre des données.

Le XML est aussi un langage qui utilise des balises non prédéfinies pour structurer un document, contrairement au HTML pour lequel l’usage de balises standards est obligatoire (<head>, <body>, <p>…).

Avantages du XML

Les avantages du XML sont multiples. En voici quelques-uns qui devraient vous convaincre de son intérêt.

Simple – Comme les documents de type HTML, le document XML est un...

Annexes