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. DEFRANCE. – Samsung Galaxy S III.

N°13544, 2012, 310 pages.

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

É. SARRION. – jQuery 1.7 et jQuery UI (2eédition).

N°13504, 2012, 568 pages.

É. SARRION. – Mémento jQuery.

N°13488, 2012, 14 pages.

É. SARRION. – jQuery mobile.

N°13388, 2012, 602 pages.

R. RIMELÉ. – HTML 5 (2eédition). Une référence pour le développeur web.

N°13638, 2013, 752 pages.

C. PORTENEUVE. – Bien développer pour le Web 2.0 (2eédition).

N°12391, 2008, 674 pages.

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

N°13664, 2013, 552 pages.

R. GOETTER. – Mémento CSS3 (2eédition).

N°13665, 2013, 14 pages.

R. GOETTER. – CSS...

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.

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

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

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

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

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

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

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 un site rapidement, vous auriez aussi pu...

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 enregistrez-le tout de suite dans le répertoire /ateliers/chap8/atelier8-1/ en le nommant index.html.

Organisation de vos ateliers

Nous vous suggérons de créer chaque atelier dans un répertoire différent portant le nom de l’atelier afin de bien isoler les fichiers utilisés dans le cadre...

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 de rappel actualiserPage(). Cette fonction étant exécutée à chaque changement de l’objet XHR, nous allons pouvoir l’utiliser pour effectuer le traitement des résultats du serveur. Nous allons donc insérer dans cette fonction les instructions de traitement de la réponse que nous avons précédemment supprimées...

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 HTML5

Le XHTML est en passe d’être remplacé par le HTML5. Ce dernier a pour vocation de quitter l’ère du Web des documents pour entrer dans celle du Web des applications. Pour cela, le HTML5 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, même si l’arrivée du HTML5 risque fort de révolutionner le Web dans les années...

17

CSS

Les feuilles de styles en cascade, également appelées CSS (Cascading Style Sheets) ont été ajoutées au W3C dès 1996. Il a cependant fallu attendre 2001 et l’apparition de Internet Explorer 6 pour qu’elles soient largement utilisées sur la plupart des sites.

Parmi les freins à leur diffusion, citons l’incidence des éditeurs Wysiwyg (comme Dreamweaver ou FrontPage) pour lesquels il a été très difficile d’implémenter la séparation du contenu et de la forme dans les fonctionnalités de leur interface. Mais le principal frein est, sans aucun doute, le problème de compatibilité entre les navigateurs : en effet, ceux-ci ont longtemps interprété les styles à leur manière, sans se préoccuper des spécifications publiées.

Désormais, et grâce au XHTML qui sépare parfaitement le contenu de la forme, l’usage des styles est devenu obligatoire (du moins en mode XHTML strict) pour appliquer une présentation à une page Web.

Cependant, hormis le fait d’apporter une solution pour la mise en forme du contenu d’une page XHTML, les CSS présentent bien d’autres avantages. Elles permettent d’alléger le code source de votre page et en facilitent la lecture ; elles contribuent à rendre un site homogène et à en améliorer la maintenance en centralisant dans un même fichier les codes de mise en forme du site entier ; elles permettent de dépasser (et de loin) les limites de la mise en forme bridées par le HTML. De même, si vous vous préoccupez de l’accessibilité de votre site, l’usage des CSS sera la solution idéale pour autoriser la consultation de vos pages par un large éventail d’utilisateurs, enfin, les styles pouvant être changés dynamiquement par le DOM, l’apparence d’une page pourra ainsi être modifiée à la volée, ce qui se révélera très utile pour mettre en œuvre les fonctions de traitement d’une réponse d’une requête Ajax.

Les différentes versions des CSS

La première spécification du W3C sur les CSS date de 1996 et a été publiée sous le nom Feuilles de styles en cascade niveau 1, également appelée CSS1. Une nouvelle version...

Annexes