Site A.T.L.A.N.T.I.C-83
COURS = Programmation AJAX (Chapitre_2) - VERSION: 1.0 (M.A.J: 29/09/11)
- AUTEUR(s): Bernard GIACOMONI - Vanessa GIACOMONI
Ecran large mobile
Retour
sommaire cours

II.PRINCIPES GENERAUX

II.1.OBJECTIFS ET PLAN DU CHAPITRE:


Ce chapitre a pour but d'exposer les principes gnraux du mcanisme des changes entre client et serveur web dans une interaction de type AJAX. Aprs quelques gnralits concernant AJAX, certaines notions lies au mcanisme des changes client-serveur dans une interaction de type "classique" (c'est dire n'utilisant pas AJAX) par le biais du protocole TCP/IP sont rappeles. Puis, le principe des interactions de type AJAX est expos et compar au mcanisme "classique".



II.2.ORIGINES DE L'APPELLATION AJAX:


AJAX est un acronyme form partir de l'expression "Asynchronous JAvascript and XML". Cette appellation n'est pas d'une grande pertinence. En effet, les interactions AJAX ne sont pas forcment "asynchrones". De plus, elles n'utilisent pas forcment le langage XML.
La seule vritable caractristique de la programmation AJAX est qu'elle utilise le "plugin" JavaScript du navigateur du client pour communiquer directement avec le serveur, au moyen d'un composant particulier: la classe XMLHttpRequest.



II.3.RAPPELS SUR LES MECANISMES CLASSIQUES DE PRODUCTION DE PAGES WEB INTERACTIVES:


II.3.1.LA NOTION DE SITE NON INTERACTIF:

Un site web est dit "non interactif" lorsque au cours d'une navigation, les contenus des diffrentes pages web qui le composent sont tlcharges vers le client sans que celui-ci puisse influer sur ces contenus. La navigation d'un visiteur s'apparente donc dans ces conditions la visite des vitrines d'un centre commercial ou d'un muse: s'il est possible au visiteur de choisir les pages (les vitrines) du site qu'il dsire visiter, il lui est absolument impossible de slectionner ce qui lui est prsent dans ces vitrines (de tels sites sont parfois appels "SITES VITRINES").


Remarquons, pour viter toute confusion, qu'un site "NON INTERACTIF" n'est pas forcment "STATIQUE". En effet, il peut prsenter de nombreuses animations de tous genres: animations JavaScript ou Java, animations Flash, videos en streaming, etc. D'autre part, le contenu affich peut reflter l'tat d'entits au contenu volutif supportes par le serveur: bases de donnes, fichiers ou d'autres valeurs volutives lies au serveur (par exemple, la date et l'heure).


EXEMPLE:
Une page web non interactive d'un vendeur de voitures d'occasion pourra prsenter toutes les automobiles contenues dans la base de donnes du site l'instant de la transaction. Les contenus prsents pourront donc varier dans le temps en fonction des acquisitions et des ventes ralises et des mises jour correspondantes de la base de donnes. En revanche, le visiteur ne pourra agir lui-mme sur le contenu prsent par une page (par exemple en slectionnant une marque, une couleur ou un kilomtrage approximatif).


La caractristique d'un site non interactif est donc que l'interaction du visiteur avec le serveur est limite au choix des pages web qu'il dsire visiter. En gnral, ces interactions sont dclenches uniquement par l'activation de "Liens Hypertextes" sans arguments d'accompagnement (requtes HTTP de type GET) . Les pages appeles ne sont pas forcment des pages html: elles peuvent contenir des scripts qui auront pour but d'intgrer leur contenu des donnes locales volutives (contenu d'une base de donnes, date locale, etc.).



Navigation sans interaction


COMMENTAIRES DETAILLES:
Voici le droulement d'un change NAVIGATEUR-SERVEUR en mode non interactif:
  1. Un lien hypertexte est activ par le visiteur sur l'cran de son navigateur
  2. Cette action dclenche l'envoi par le navigateur vers le serveur d'une requte HTTP (requte GET) contenant l'U.R.L. de la page appele (la requte peut contenir des arguments, mais la valeur de ceux-ci n'est pas dtermine par l'internaute)
  3. A la rception de la requte, le serveur va lire dans sa mmoire de masse le contenu de la page web pointe par l'U.R.L.
  4. SI la page ne contient que du code HTML, le contenu est directement rexpdi vers le navigateur du client.
  5. SINON, si la page contient ou est associe des scripts serveurs, ces scripts sont excuts en utilisant ventuellement les donnes disponibles localement (arguments accompagnant l'URL, bases de donnes, fichiers, etc.), puis le contenu obtenu est rexpdi vers le navigateur du client
  6. A la rception de ce contenu, le navigateur affiche celui-ci la place de la page web en cours d'affichage.


II.3.2.LA NOTION DE PAGE WEB INTERACTIVE:

A l'inverse, une page web est dite "INTERACTIVE" lorsque le visiteur a la possibilit d'en modifier le contenu affich grce des ARGUMENTS intgres aux requtes de navigation. Ces arguments, qui peuvent tre des valeurs numriques, alphanumriques ou logiques, sont saisis grce des CONTROLES se prsentant sous la forme d'objets graphiques sensibles aux interactions du visiteur avec son clavier, sa souris ou tout autre moyen de dsignation (cran tactile, par exemple). Concrtement, ces objets graphiques sont des boutons, des champs de saisie, des listes d'options, etc., gnralement regroups dans des FORMULAIRES et accessibles sur l'cran du navigateur.
Les pages web appeles par ce type d'interaction ont la particularit d'tre associes des "scripts" excutables par le serveur (scripts PHP, ASP, etc..) et capables de modifier le contenu des pages appeles en fonction des valeurs des arguments reus.
Le serveur peut donc excuter ces scripts pour modifier le contenu des pages web stockes dans sa mmoire de masse en fonction de la valeur des arguments reus. Le client pourra ainsi influer sur le contenu des pages web qu'il visite (par exemple, en expdiant au serveur un argument de valeur "renault" en mme temps que l'URL de la page web, il va limiter les articles affichs par cette page aux automobiles de marque RENAULT).


interaction entre visiteur et page web


COMMENTAIRES DETAILLES:
Voici le droulement d'un change NAVIGATEUR-SERVEUR en mode interactif "classique":
  1. Un lien hypertexte ou un formulaire est activ par le visiteur sur l'cran de son navigateur
  2. Cette action dclenche l'envoi par le navigateur vers le serveur d'une requte HTTP (requte GET ou POST) contenant l'U.R.L. de la page appele. La requte contient des arguments, dont la valeur a t dtermine par l'internaute avant l'change, l'aide des diffrents moyens de saisie dont il peut disposer(contrles de types boutons, champs de saisie, slecteurs, etc.)
  3. A la rception de la requte, le serveur va lire dans sa mmoire de masse le contenu de la page web pointe par l'U.R.L. Cette page contient ou est associe des scripts serveurs (il s'agit par exemple d'une page PHP)
  4. Ces scripts sont excuts en tenant compte des valeurs des arguments reus (par exemple, pour slectionner des donnes), et ventuellement en utilisant des donnes disponibles localement (bases de donnes, fichiers, etc.)
  5. Puis, le contenu obtenu est rexpdi vers le navigateur du client
  6. A la rception de ce contenu, le navigateur affiche celui-ci la place de la page web en cours d'affichage.
Par rapport au cas prcdent, les diffrence essentielles sont le fait que l'internaute dtermine les valeurs des arguments accompagnant l'URL de la page appele, en gnral l'aide de formulaires et que ces arguments sont utiliss par le serveur pour adapter le contenu de la page web qu'il rexpdie vers le client, grce l'excution de scripts associs a cette page.


Lorsque certaines des pages qui composent un site web sont interactives, ce site est dit INTERACTIF.



II.4.PRINCIPE FONDAMENTAL DU MECANISME D'INTERACTION AJAX:


II.4.1.MECANISME GENERAL:

Dans AJAX, comme dans le mode "classique", le protocole d'change H.T.T.P. (Hyper Text Transfer Protocol) est utilis pour changer des donnes entre le serveur et le client. La diffrence principale rside dans le fait que le navigateur ne remplace plus systmatiquement la page courante par le contenu de la page appele. Le navigateur du client se contente dans un premier temps de stocker ce contenu dans un objet du langage javascript (en fait, une variable). L'utilisation qui est faite de ce contenu dpend d'un script javascript fourni par le dveloppeur. Suivant la nature de ce contenu, le script pourra excuter les actions suivantes:
  • Si ce contenu est du HTML, il pourra tre charg tel-quel dans un conteneur de la page en cours (on pourra ainsi faire apparatre un texte, une image, une liste, etc. dans un cadre sans tre oblig de recharger toute la page).
  • Si ce contenu est du XML, il pourra galement tre affich dans la page en utilisant les fonctions javascript du D.O.M.
  • Si le contenu est un script javascript, il pourra tre excut par le navigateur du client. On pourra ainsi slectionner, puis tlcharger et excuter la demande un script javascript stock par le serveur.
  • Etc...
NOTA:
Les interactions AJAX ne peuvent tre dclenches que par un script javascript. Les mcanismes lis aux hyperliens et aux submits de formulaires ne les concernent pas. De ce fait, elles peuvent avoir lieu uniquement:
  • Soit au chargement de la page (si un script Javascript est activ directement au cours du chargement).
  • Soit lors de la survenue d'un vnement trait par javascript: interactions souris (onLoad, onClick, ...), vnements lis aux timer, etc.
Le schema ci-aprs reprsente cette architecture d'change:



Mecanisme d'interaction AJAX


COMMENTAIRES DETAILLES:
  • (1) Sur le navigateur du client, un gestionnaire d'vnement javascript associ une balise HTML quelconque est activ. Cette activation provoque l'appel d'un code javascript utilisant un composant particulier (plus prcisment, un objet de la classe XMLHttpRequest).
  • (2) Grce une mthode de cet objet, le code javascript peut adresser au serveur une requte http de chargement d'une page web (requte GET ou POST concernant l'URL d'un fichier XML, HTML ou d'un fichier convertible en HTML par le serveur: par exemple, PHP). Outre l'URL du fichier, cette requte peut transmettre des arguments dont la valeur peut tre fixe par l'utilisateur
  • (3) Comme dans le fonctionnement classique, lorsque le serveur reoit cette requte, il va lire le contenu du fichier demand. En fonction du type de fichier, ce contenu peut tre trait par un prprocesseur (ex: PHP) afin de le convertir en HTML. Ce traitement peut utiliser non seulement les donnes disponibles sur le serveur (bases de donnes, valeurs d'environnement, fichiers, date locale, mesures de capteurs relis au serveur, etc.), mais aussi les valeurs d'arguments transmises.
  • (4) Puis, le serveur renvoie le contenu HTML ou XML obtenu par ces traitements vers le client.
  • (5) Contrairement au fonctionnement classique, le navigateur stocke simplement ce contenu dans un attribut de l'objet XMLHttpRequest.
  • (6) Suivant sa nature, le contenu peut tre (ou non) utilis par un autre programme javascript pour tout usage imaginable: charger une image, lancer un script javascript, remplacer le contenu d'un cadre de la page web affiche, etc.


II.4.2.LA NOTION D'ASYNCHRONISME:

Les objets de la classe XMLHttpRequest possdent deux modes de fonctionnement:
  1. Le Fonctionnement SYNCHRONE: en mode synchrone, l'objet bloque l'excution de la page web par le client tant que les donnes qu'il a demandes au serveur n'ont pas t reues par le navigateur.
  2. Le Fonctionnement ASYNCHRONE: dans ce mode, l'excution de la page en cours n'est pas bloque pendant la transaction: un gestionnaire d'vnement particulier est arm. Celui-ci, qui sera activ la rception des donnes, se chargera de lancer le script de traitement de ces donnes.


Dans le premier cas, on se retrouve un peu dans le cas d'une interaction classique avec remplacement complet de la page: l'exploitant du navigateur "perd la main" pendant toute la dure de la transaction.


Dans le deuxime cas, l'excution de la page en cours n'est pas bloque pendant la transaction. L'exploitant "garde donc la main" pendant la dure de celle-ci. En revanche, le rsultat de l'change AJAX n'apparatra l'cran que lorsque l'vnement de rception aura activ le script Javascript de traitement, ce qui parfois est un peu dconcertant pour l'utilisateur.




II.5.CONCLUSION:


II.5.1.LES CARACTERISTIQUES D'AJAX:

Contrairement au mcanisme classique des pages interactives qui oblige le dveloppeur recharger la totalit d'une page web ds qu'il veut y effectuer une modification, si minime soit-elle, le mcanisme offert par la classe XMLHttpRequest se contente de mettre disposition du poste client (et plus particulirement de l'excuteur JAVASCRIPT de son navigateur) les donnes retournes par la transaction. L'utilisation de ces donnes est donc laisse l'initiative du poste client: le developpeur peut donc envisager les utilisations les plus diverses. Par exemple:
  • Afficher directement ce contenu dans un cadre prvu cet effet (donc, modifier le contenu d'un ou plusieurs lments de la page sans tre oblig de la recharger entirement).
  • Utiliser ce contenu pour crer ou modifier les items d'une liste d'options (trs utile pour faire apparatre ou liminer des options en fonction de choix prcdents).
  • Dans le cas ou le contenu est un code javascript, excuter ce contenu.
  • Dans le cas o le contenu est un fichier XML, afficher ce contenu.
  • Etc.
Ce mcanismes est donc bien plus souple que le mcanisme traditionnel. Il autorise une grande crativit dans la programmation client: il est ainsi tout fait possible de dvelopper un site interactif utilisant uniquement l'architecture d'change AJAX pour assurer ses transactions avec le serveur: dans ce cas, ce site ne comprendra qu'une page web qui, au cours de la navigation du client, sera partiellement modifie partir de divers contenus tlchargs depuis le serveur.


AJAX n'utilise que des outils dj prsents antrieurement (Javascript, XML, langages serveurs, etc.). On ne pet donc pas parler rellement d'une "technologie AJAX". Par contre, il s'agit bien d'une "architecture d'change avec le serveur" tout fait distincte de l'architecture client-serveur classique.


II.5.2.AVANTAGES ET INCONVENIENTS D'AJAX:

Du ct des avantages, on peut noter:
  • Le fait de pouvoir modifier partiellement le contenu de la page affiche par le client partir de donnes importes du serveur sans recharger toute la page: ceci peut parfois permettre une minimisation importante du temps de transaction et une meilleure utilisation de la bande passante (dbit de la ligne internet).
  • En mode asynchrone, le fait de ne pas bloquer les interactions de l'utilisateur avec la page web pendant la dure d'une transaction: ceci augmente l'impression de "fluidit" et vite la dsagrable impression pour le client de "perdre la main" sur sa page web. Il est de notorit publique qu'il suffit de quelques secondes de retard dans une rponse pour qu'un client abandonne une page qui semble ne pas "rpondre" une action. Le fonctionnement AJAX en asynchrone permet de rendre moins perceptibles les temps d'attente.
  • Le fait de transfrer une partie des traitements d'laboration des pages web vers le poste client permet une conomie de la puissance des serveurs.
Ces avantages ont videmment plusieurs revers et non des moindres:
  • L'architecture AJAX exige que la machine du client web soit suffisamment puissante pour absorber le surcrot de traitement qu'elle lui donne. Dans le cas contraire, la dure du premier affichage des pages peut se trouver notablement augmente.
  • L'architecture AJAX exige que le client active le traitement des scripts javascript, ce qui n'est pas forcment le cas pour tous les utilisateurs d'internet: javascript possde ( tort) une mauvaise rputation chez certains internautes.
  • Lorqu'un site emploie AJAX, certaines fonctions des navigateurs peuvent tre perturbes (enregistrement des pages, gestion des favoris et marque-pages, liens de retour, etc.).
  • L'utilisation d'AJAX peut avoir une influence ngative sur le rfrencement naturel d'un site: en effet, les contenus tlchargs par AJAX ne font pas partie de la page web charge initialement. les moteurs de recherche ne peuvent donc pas analyser les mots-clefs prsents dans ces contenus.


Enfin, pour l'instant (2011), AJAX n'est pas un standard du W3C. De ce fait, son implmentation peut varier d'un navigateur l'autre, ce qui peut entraner des diffrences d'affichage notables entre les divers navigateurs existants).




Retour accs cours Retour sommaire cours
FormateurGaucheRepos FormateurGaucheActif FormateurDroitRepos FormateurDroitActif