Le fonctionnement d’Ajax

(article écrit par un groupe d’étudiants d’IUT dans le cadre d’un projet)

Impossible de vous expliquer comment fonctionne Ajax si vous ne connaissez pas l’organisation du World Wide Web aussi appelé Web.
Les notions de client et de serveur sont élémentaires pour comprendre l’Internet.
Derrière l’entité serveur se cache tout simplement un disque dur contenant des données. Celles-ci peuvent être sous la forme de fichiers, d’applications ou de bases de données. Bien sûr, un serveur n’est pas forcément spécialisé et peut très bien regrouper toutes ces données. Un Client est en réalité un ordinateur relié au réseau comme celui que vous êtes en train d’utiliser. Les échanges entre ces deux entités diffèrent selon la technologie utilisée.

Tout d’abord, je vais essayer d’expliquer aux plus novices d’entre vous comment marche l’affichage d’une page web utilisant uniquement le HTML.
Si vous voulez davantage connaître l’HTML, je vous conseille de visiter cette page : http://www.ext.upmc.fr/urfist/html/html.htm.
Lorsque vous surfez sur la toile et que vous cliquez sur un lien, ou tapez une adresse, votre navigateur web (Internet Explorer ou Mozilla) envoie une requête au serveur. Le serveur étant toujours prêt à répondre aux demandes du client, il retourne au navigateur web du client une page HTML stockée sur son disque dur. C’est ensuite votre navigateur qui va interpréter et afficher la page.
Voici un petit schéma explicitant les quelques lignes ci-dessus:

Mais le web n’est pas composée que de pages statiques. En effet, avec le langage PHP les pages ont la possibilité d’être animées.Par exemple, avec un petit script PHP la page peut afficher la date et l’heure à laquelle elle a été affichée. Ici, les échanges entre serveur et client sont différents. Le processus est similaire, sauf que le serveur effectuera un traitement avant de renvoyer la page.

En effet, le serveur va devoir exécuter le script. Celui retournant la date et l’heure n’est pas gourmand en ressources système, mais certains peuvent pénaliser le serveur.Voici,un second schéma:

Un troisième langage permet de faire des pages dynamiques, il s’agit du JavaScript. Le traitement est différent car c’est du coté client que le script s’exécute. Cela permet de ne pas surcharger le serveur, et facilite ainsi sa tâche. Les traitements effectués coté client sont d’un ordre généralement différent de ceux effectués coté serveur. Le javascript est principalement utilisé pour des opération de rendu de l’affichage alors que les traitements serveur sont plus focalisés sur la gestion des données.

Cet article ne devait pas être sur le fonctionnement d’Ajax ? Si, bien sûr, mais pour comprendre son fonctionnement, il faut savoir comment les langages les plus courants opèrent puisque Ajax est en réalité un ensemble de technologie(s) et de langages.
Ajax est un mélange des deux précédents schémas : Lorsque le client télécharge une page, celle-ci intègre des composant Javascript (donc exécutés coté client) qui seront ensuite capables de requêter de nouvelles informations au serveur et se chargeront de les afficher dans le navigateur.
Les javascripts établissent ainsi une communication entre le client et le serveur par la création d’un contrôle ActiveX sous Internet Explorer et d’un XMLHttpRequest sur la plupart des autres navigateurs.
Le serveur communiquera avec le client en lui transmettant des texte souvent formatés à l’aide de XML. Le navigateur se chargera de l’interprétation et de l’affichage de ces données.

Avec l’Ajax, les échanges entre serveur et client ne nécessitent plus de raffraichissement complet de l’écran mais seulement de certaines zone de celui-ci. L’utilisateur aura donc un impression d’interactivité beaucoup plus grande. Les mises à jour de la page ont lieu régulièrement, à chaque fois que l’on est dans la situation où la requête est envoyée. Ce système est aussi plus économique pour le réseau et le serveur qui ne génèrent plus que des informations partielles (au risque de pooling près).

This entry was posted in Programming. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.