A
A
t
t
e
e
l
l
i
i
e
e
r
r
:
:
1
1
Introduction à AJAX
Objectifs spécifiquesA la fin de cette partie, l’étudiant doit être capable de : - Découvrir le principe de fonctionnement d’Ajax
- Manipuler et tester quelques sites utilisant AJAX
- Préparer l’environnement de travail pour bien développer une application Ajax
Plan du chapitre
Introduction à AJAX ... 1
1. Qu’est-ce qu’Ajax ? ... 2
2. Principe de fonctionnement ... 2
2.1. Fonctionnement d’une application Web classique ... 2
2.2. Fonctionnement d’une application Ajax ... 3
3. Présentation de divers sites utilisant AJAX ... 4
4. Préparation de l’environnement de travail ... 5
4.1. Le navigateur Firefox ... 5
4.2. Configuration d’un site dynamique dans Dreamweaver ... 5
4.3. Test des pages JavaScript et PHP ... 9
4.4. Présentation de Firebug ... 10
4.5. Présentation de IE Tab ... 11
Volume horaire 3 heures
1. Qu’est-ce qu’Ajax ?
e terme « Ajax » est apparu pour la première fois dans un article de Jesse James Garret, sur le site de sa société Adaptive Path, le 18 février 2005. Il s’agit donc d’un terme relativement récent, qui est en réalité l’acronyme de Asynchronous JavaScript + XML.
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 :
x Les feuilles de styles CSS qui permettent d’appliquer une mise forme au contenu d’une page XHTML.
x Le DOM qui représente la hiérarchie des éléments d’une page XHTML.
x L’objet XMLHttpRequest de JavaScript qui permet d’assurer des transferts asynchrones (ou quelquefois synchrones) entre le client et le serveur.
x Les formats de données XML ou JSON utilisés pour les transferts entre le serveur et le client. x 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.
2. Principe de fonctionnement
2.1. Fonctionnement d’une application Web classique
Dans une application Web classique, lorsque l’utilisateur clique sur un lien ou valide un formulaire, le navigateur envoie une requête au serveur HTTP, qui lui retourne en réponse une nouvelle page, qui remplace purement et simplement la page courante. Ces applications Web traditionnelles été très basé des requêtes dites « synchrones ».
Figure 2: Communication synchrone avec le serveur.
L
Les inconvenants de ce type de fonctionnement :
x consomme inutilement une partie de la bande passante et de ressources côté serveur. x une grande partie du code (X)HTML étant commune aux différentes pages de l'application. x Les interfaces utilisateur très lentes.
x Manque d’interaction (web 2.0).
2.2. Fonctionnement d’une application Ajax
Dans le cas d’une application Ajax, un moteur 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énement JavaScript est configuré pour appeler le moteur dès l’apparition de l’événement concerné. Lors de l’appel du moteur, un objet XMLHttp-Request 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.
Figure 3: Communication asynchrone avec le serveur.
Les avantages d’Ajax
x Économie de la bande passante
x Empêche le rechargement de la page à chaque requête
x Évite le blocage de l’application pendant le traitement de la requête x Augmente la réactivité de l’application
x Améliore l’ergonomie de l’interface Les inconvénients d’Ajax
x Pas de mémorisation des actions dans l’historique x Problème d’indexation des contenus
3. Présentation de divers sites utilisant AJAX
Actuellement de nombreux sites de renom utilisent déjà 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. Nous vous proposons ci-dessous de faire un rapide tour d’horizon de ces sites précurseurs du Web 2.0
Aperçu Site Description
Google suggest
Google suggest a été le premier site à exploiter le modèle Ajax. 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 Map
Google Maps est un service gratuit de cartographie en ligne. Le rechargement en temps réel des parties de la carte atteintes par l'interaction de l'utilisateur et sans avoir à recharger entièrement la page.
NetVibes
NetVibes est un des premiers sites à avoir utilisé de manière riche et interactive les diverses technologies qui gravitent autour d'AJAX. Vous pouvez créer des onglets, manipulez les fenêtres, interagissez avec, changez le titre à la volée, ajoutez des widgets...
iGoogle
iGoogle est également une interface personnalisable remplie de widget comme NetVibes.
4. Préparation de l’environnement de travail
4.1. Le navigateur Firefox
Nous utiliserons Firefox pour tester nos applications. En effet, Firefox a de nombreux avantages par rapport aux autres navigateurs : moins 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 :
x La première est l’extension « firebug », elle permet de transformer votre navigateur en outil de débogage.
x La seconde extension se nomme « IE Tab », elle permet d’activer un émulateur du navigateur Internet Explorer tout en continuant d’utiliser Firefox.
4.2. Configuration d’un site dynamique dans Dreamweaver
Étape 1 : Création d’un alias
Lancez EasyPHP, puis cliquez droit sur l'icône d'EasyPHP à coté de l'horloge dans la barre des tâches puis Administration.
Sur la page Administration d’EsyPHP, ajouter un alias en cliquant sur le bouton Ajouter, puis remplissez les champs :
- Nom pour l’alias : site
- Chemin du répertoire créé : z:\www - Puis cliquez sur OK
- Si tous se passe bien, vous avez un nouvel alias : site
Étape 2 : Création d’un site
Depuis le menu, sélectionnez Site puis Gérer les sites. Dans le panneau Gérer les sites, cliquez ensuite sur le bouton Nouveau.
Figure 4: Gérer les sites.
La fenêtre Définition d’un site s’affiche à l’écran. Vous devez utiliser le mode Avancé (cliquez sur l’onglet Avancé) pour configurer votre site.
Figure 5: Définition du site : Infos locales.
Dans la catégorie Infos locales de la fenêtre Définition du site remplissez les champs : - Nom du site : site
- Dossier racine : z:\www
Figure 6: Configuration de la catégorie Infos locales.
Sélectionner la catégorie Infos distantes dans le cadre de gauche de la fenêtre Définition du site remplissez les champs :
- Accès : Local Réseau. - Répertoire distant : z:\www.
Étape 3: Configuration du serveur d’évaluation
Pour configurer la catégorie Serveur d’évaluation commencez par choisir le modèle de serveur en sélectionnant le couple PHP/MySQL dans la liste déroulante. En dessous de ce premier champ, il faut choisir l’Accès en mode Local/Réseau. Dans le troisième champ, vous n’avez rien à changer car le dossier du serveur d’évaluation est le même que celui de la racine locale: z:\www\. Par contre, l’URL sous laquelle sera disponible le site sur le serveur d’évaluation est http://127.0.0.1:8888/site/
Figure 8: Alias de site.
Vous avez maintenant terminé la configuration de votre site et il ne vous reste plus qu’à cliquer sur le bouton OK en bas de la fenêtre pour valider votre site.
Figure 10: Gérer les sites.
4.3. Test des pages JavaScript et PHP
Commençons par créer le fichier JavaScript externe. Pour cela cliquez dans le menu sur Fichier puis sélectionnez Nouveau (ou utilisez le raccourci clavier Ctrl + N). Dans la fenêtre Nouveau document, sélectionnez Page vierge dans la première colonne et Javascript dans la seconde puis validez en cliquant sur le bouton Créer.
Une fois le fichier créé, vous pouvez saisir votre programme JavaScript directement dans le fichier sans avoir à ajouter de balise spécifique.
Pour ce premier exemple, nous nous contenterons d’une simple fonction Afficher() exécutant une fenêtre d’alerte dans la page. Enregistrez ensuite ce fichier sous le nom test_js.js.
Code source de la page test_js.js
// JavaScript Document
function afficher(){
alert("bonjour, JavaScript fonctionne") }
Créez ensuite une page PHP qui devra afficher une page phpinfo. Cette page utilisera la fonction phpinfo() pour afficher à l’écran toutes les informations utiles sur la version et la configuration du PHP installé sur votre serveur. Enregistrez ensuite ce fichier sous le nom test_php.php.
Code source de la page test_php.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="test_js.js"> </script>
<title>Document sans titre</title> </head>
<body onload="afficher()">
<?php
echo "PHP fonctionne aussi, c'est formidable!"; phpinfo(); ?> </body> </html>
4.4. Présentation de Firebug
Une fois Firebug installé, une icône vient se placer à droite dans la barre de statut en bas de l'écran.
Cette icône peut prendre 3 apparences :
x cette icône indique que Firebug est désactivé pour la page actuellement ouverte ; x cette icône indique que Firebug n'a trouvé aucune erreur dans la page ouverte ;
x cette icône (associée à un nombre à sa droite) indique le nombre d'erreurs que Firebug a rencontrées sur la page ouverte.
Visualiser les erreurs
La première fonctionnalité remarquable de Firebug est l'affichage "amélioré" des erreurs JavaScript. Firebug affiche les éventuelles erreurs dans la barre de statut de firefox en lieu et place de l'icône Firebug. En cas d'erreurs, ces dernières sont détaillées dans la console Firebug, comme illustré ci-dessous :
Le signalement d'une erreur est constitué du message d'erreur, de la localisation de cette erreur dans le code et enfin du nom de fichier JavaScript responsable de cette erreur. Ce nom de fichier est cliquable et amène à la visualisation du fichier concerné dans Firebug.
4.5. Présentation de IE Tab
IE Tab est un module complémentaire qui vous permet d'utiliser le moteur de rendu du Microsoft Internet Explorer (IE), installé sur votre système d'exploitation, au sein du navigateur Mozilla Firefox.
Faites un clic droit sur l'icône symbolisant le moteur en cours d'utilisation. Cette icône se situe en bas à droite de la fenêtre de votre navigateur. Lorsque le moteur de Firefox est utilisé, c'est le logo de ce dernier qui apparaît. Lorsque le moteur d'Internet Explorer est utilisé, c'est l'icône d'Internet Explorer qui sera affichée.
