Si le téléchargement ne démarre pas après 5 secondes, veuillez cliquer sur le lien "Télécharger"
JavaScript est la technologie idéale pour remplir cette mission et faire interagir toutes ces
technologies entre elles. Ainsi, dans chaque application Ajax, nous retrouverons un
programme JavaScript qui constituera le « moteur » du système, orchestrant à la fois les transferts
de données avec l’aide de l’objet XMLHttpRequest et l’exploitation des réponses du serveur
en agissant sur les CSS (pour modifier la mise en forme de la page XHTML) et sur le DOM
(pour modifier le contenu ou la structure de la page XHTML) (voir figure 3-1).
Figure 3-1
Organisation
des principaux
composants d’Ajax
Comment fonctionne Ajax ?
CHAPITRE 3 23 Cours JQuery gratuit premier pas | Cours JQuery | Cours INFORMATIQUE
En ce qui concerne les données échangées, plusieurs formats peuvent être utilisés selon
l’organisation et la complexité des flux d’informations. Les applications les plus simples
pourront se contenter de données au format texte (simples couples variable/valeur) alors que
les systèmes plus complexes devront choisir de structurer leurs données en XML (le DOM
assurant ensuite l’insertion des données XML dans la page XHTML) ou encore dans un
format issu de la structure des objets JavaScript, le JSON. À noter que la plupart des requêtes
envoyées vers le serveur utilisent le format texte (les couples variable/valeur suffisent dans la
majorité des cas), mais sachez qu’elles peuvent éventuellement aussi exploiter les formats
XML ou JSON, de la même manière que les résultats retournés par le serveur au navigateur.
Comparatif avec les applications Web traditionnelles
Pour bien comprendre le fonctionnement et connaître les avantages d’un nouveau système,
une bonne méthode consiste à le comparer avec l’existant que l’on connaît déjà. Dans cette partie, nous allons utiliser cette méthode en comparant le fonctionnement d’une application Ajax avec celui d’un site Web statique et celui d’un site Web dynamique.
Fonctionnement d’une application Web statique Avec un site Web statique, la seule interactivité dont dispose l’internaute est de pouvoir passer d’une page HTML à l’autre par un simple clic sur les liens hypertextes présents sur une page Cours JQuery gratuit premier pas | Cours JQuery | Cours INFORMATIQUE.
À chaque fois que l’internaute clique sur un lien, une requête HTTP est envoyée, établissant du même coup une communication avec le serveur. Cette communication est de type
synchrone, c’est-à-dire que dès l’émission de la requête, la communication reste en place jusqu’à la réception de la réponse du serveur. Pendant le temps de traitement de la requête,
le navigateur reste figé, bloquant ainsi toute action possible de l’internaute.
À chaque requête, le serveur retournera une réponse sous la forme d’une page HTML
complète. S’il s’agit d’une simple requête, suite à la saisie par l’internaute de l’URL spécifique d’une page dans la barre d’adresse du navigateur ou, plus couramment, lorsque l’internaute clique sur un lien hypertexte, le serveur se contentera de renvoyer la page HTML
demandée, ce qui clôturera le traitement côté serveur et débloquera ainsi le navigateur.
Fonctionnement d’une application Web dynamique
Nous avons vu précédemment le traitement d’une simple requête par le serveur mais d’autre cas peuvent se produire, notamment lors de l’envoi d’un formulaire. Dans ce cas, la requête est constituée d’une ligne de requête (précisant la méthode utilisée et le protocole HTTP),
d’un corps (qui contient les données envoyées au serveur dans le cas d’une requête émise avec
la méthode POST) et d’une série d’en-têtes qui définissent les spécificités de la requête (nature du navigateur utilisé, type d’encodage…) qui permettront au serveur de traiter correctement
les informations. En général, lors de l’envoi d’un formulaire, le traitement côté serveur est réalisé par une page contenant un programme (en PHP par exemple). Les données réceptionnées
pouvant être traitées directement par le programme ou entraîner un échange avec un Introduction à Ajax
PARTIE I
serveur de base de données afin de les mémoriser ou d’émettre une requête SQL. À l’issue de
ce traitement, une nouvelle page HTML sera construite à la volée et renvoyée au navigateur,
ce qui clôturera le processus, débloquant le navigateur de la même manière qu’avec un site
statique.
Fonctionnement d’une application Ajax
Dans le cas d’une application Ajax, si la page contenant la structure XHTML et ses scripts client (moteur Ajax, gestionnaire d’événements…) est chargée de la même manière que pour un site statique, il n’en est pas de même pour les interactions qui suivent entre le navigateur et le serveur. Le moteur Ajax une fois chargé dans le navigateur restera en attente de l’événement pour lequel il a été programmé. Pour cela, un gestionnaire d’événements JavaScript est configuré pour appeler le moteur dès l’apparition de l’événement concerné. Lors de l’appel du moteur, un objet XMLHttpRequest est instancié puis configuré, une requête asynchrone est ensuite envoyée au serveur. À la réception de celle-ci, le serveur démarrera son traitement et retournera la réponse HTTP correspondante.
Cours JQuery gratuit premier pas | Cours JQuery | Cours INFORMATIQUE
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. Cours JQuery gratuit premier pas | Cours JQuery | Cours INFORMATIQUE
Chronogrammes des échanges client-serveur
Une des grandes différences entre une application Web traditionnelle et une application Ajax est liée à l’échange asynchrone de données entre le navigateur et le serveur. Pour vous permettre
de bien appréhender la différence entre ces deux applications, nous vous proposons de les comparer maintenant à l’aide de leur chronogramme.
Chronogramme d’une application Web dynamique traditionnelle
Lorsqu’un utilisateur sollicite le serveur dans une application Web dynamique traditionnelle
(en envoyant un formulaire ou en cliquant sur une URL dynamique), il déclenche une requête HTTP dans laquelle sont imbriqués les paramètres de la demande. À partir de ce moment, le navigateur se fige jusqu’à la réception de la réponse HTTP du serveur, interdisant
ainsi à l’utilisateur toute action pendant le temps de traitement de la requête. Dès la réception de la requête, le serveur Web analysera les paramètres et traitera la demande selon son programme. Il pourra interroger un serveur de base de données pour recueillir des
données complémentaires si nécessaire. Une fois le traitement terminé, une page HTML complète sera construite à la volée, incluant les résultats du traitement après leur mise en forme. Cette page sera alors retournée au navigateur après son intégration dans le corps de la réponse HTTP. À la réception de la réponse HTTP, le navigateur interprétera la page HTML, comme lors de l’appel d’une page Web dans un site statique, et l’affichera à l’écran, entraînant le rechargement complet de la page. À la fin du chargement de la page, le navigateur est
débloqué et l’utilisateur reprend la main sur l’application. Il pourra ainsi éventuellement réitérer une nouvelle demande serveur qui suivra le même cycle de traitement que celui que nous venons de décrire (voir figure 3-2). Cours JQuery gratuit premier pas | Cours JQuery | Cours INFORMATIQUE