> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > Javascript > AJAX et l'échange de données en JavaScript > Les techniques AJAX > Le concept d'AJAX > Lecture du tutoriel

Le concept d'AJAX

Par

Sébastien de la Marck (Thunderseb) et Avatar

Johann Pardanaud (Nesquik69)

Mise à jour : 07/12/2010

Difficulté : Intermédiaire

5 975 visites depuis 7 jours , dont 591 sur ce chapitre , classé 32/777

Chapitre rédigé par Thunderseb.
Ce chapitre est disponible au format PDF.

Retour en haut

Sommaire du chapitre :

Introduction
Page Web et Application Web
Dialoguer avec le serveur
Principes synchrones et asynchrones

Retour en haut

Introduction

AJAX est l'acronyme d'Asynchronous JavaScript And XML, autrement dit JavaScript Et XML Asynchrones.

AJAX n'est ni une technologie ni un langage de programmation ; AJAX est un concept de programmation Web reposant sur plusieurs technologies comme le JavaScript et le XML – d'où le nom AJAX. A l'heure actuelle, le XML tend à être délaissé au profit du JSON, ce qui explique que certains puristes utilisent l'acronyme AJAJ – dont la prononciation laisse plutôt à désirer.

L'idée même d'AJAX est de faire communiquer une page Web avec un serveur Web sans occasionner le rechargement de la page. C'est la raison pour laquelle JavaScript est utilisé, car c'est lui qui va se charger d'établir la connexion entre la page Web et le serveur.

Contrairement à ce qui est souvent dit, le principe de fonctionnement d'AJAX a toujours existé, et ce par le biais de certaines astuces JavaScript, comme l'ajout d'un élément <script /> après le chargement de la page. Mais il a fallu attendre l'arrivée de l'objet XMLHttpRequest pour que l'utilisation de l'AJAX se démocratise. L'objet XMLHttpRequest est un objet natif JavaScript, développé à l'origine en tant qu'ActiveX dans Internet Explorer, qui facilite grandement la communication JavaScript – Serveur.

Afin de bien introduire le principe de l'AJAX, voici une comparaison du fonctionnement d'un site Web dit traditionnel et d'une application Web mettant en œuvre AJAX.

Retour en haut

Page Web et Application Web

Différencions tout d'abord deux côtés applicatifs : le navigateur, à gauche, et le serveur, à droite. A ce petit schéma on va ajouter un pendule qui balance entre les deux côtés.

Site Web traditionnel

Tout d'abord le navigateur envoie une requête – via une URL – au serveur. Le serveur répond en renvoyant au navigateur le code HTML de la page ainsi que tout ce qui lui est associé comme les scripts JavaScript, les images ou les éventuels médias et autres objets embarqués – donc la réponse du serveur est beaucoup plus volumineuse que la requête. Le navigateur affiche la page et l'utilisateur peut la parcourir quelques instants avant de cliquer sur un lien hypertexte qui enverra une nouvelle requête au serveur qui lui-même renverra le HTML correspondant... et ainsi de suite.

D'un point de vue purement pratique, c'est assez aberrant comme principe car c'est extrêmement inefficace et couteux puisque le serveur va à chaque fois renvoyer tout, ce qui prend du temps et ce qui occasionne une charge pour le serveur.

Ce principe de fonctionnement montre que le navigateur n'intervient pas dans le processus si ce n'est que pour afficher la page. Le gros du travail se fait du côté du serveur. Le pendule balance donc du côté du serveur.

Application AJAX

Voyons ce même schéma du point de vue d'AJAX. Quand on utilise le concept d'AJAX dans une page Web, on parle d'application Web (ou application AJAX).

La première requête est la même – ça on ne sait rien y faire. La différence va résider dans le fait que quand l'utilisateur cliquera sur un lien – ou un autre élément cliquable – la page ne se rechargera pas et le navigateur enverra une requête au serveur, lequel renverra les données demandées dans un format léger – comme le format JSON. Dans ce cas, le serveur n'aura renvoyé qu'un minimum de données ce qui est beaucoup plus léger et donc plus rapide. Le navigateur, par le biais de JavaScript, peut alors mettre à jour une petite partie de la page avec les données reçues du serveur.

Dans ce cas, le pendule est au centre. Le serveur et le navigateur travaillent pour proposer une solution optimale. C'est l'exemple parfait de l'équilibre d'une application AJAX

Il faut cependant faire attention à ne pas mésinterpréter ce schéma, car il ne s'agit en aucun cas de remplacer la page entière, ce qui reviendrait à recharger la page. Si on se réfère au pendule, il va balancer du côté du serveur, ce qui montre qu'il y a un problème, et dans ce cas AJAX n'est pas utilisé correctement.

C'est donc la raison pour laquelle il est totalement absurde de créer un site Web entièrement en AJAX. Ce n'est pas possible car AJAX ne doit jamais se substituer à la méthode traditionnelle. AJAX doit être utilisé pour charger/modifier de petites parties d'une page. Un exemple peut être Facebook ; sur Facebook il y a la possibilité d'afficher les amis d'une personne sans recharger la page. Quand vous cliquez sur le lien Afficher les amis, une requête est envoyée au serveur, lequel renvoie la liste des amis de la personne dont vous souhaitez connaître les amis. Cette liste est alors affichée dynamiquement via JavaScript. Pas de rechargement de page, juste une requête rapide – quasi instantanée – et un confort de navigation accru.

Retour en haut

Dialoguer avec le serveur

Si le pendule est bien au centre, l'application est en équilibre et le dialogue entre le navigateur et le serveur se passe bien. Mais comment dialoguer ? Ou plutôt, en quel format parler ?

Le navigateur et le serveur ne peuvent se parler que via un format de type texte brut. Le navigateur peut donc demander au serveur "Liste amis Alyx" et le serveur renverra la liste des amis d'Alyx. C'est assez nul comme format : si la question est claire, la liste des amis que renverra le serveur le sera nettement moins et c'est ici qu'il va falloir opter pour le format adéquat. Plusieurs formats sont possibles :

Texte simple ;
HTML ;
XML ;
JSON.

Le texte simple

Comme on vient de le voir, ce format n'est pas du tout adapté s'il s'agit de recevoir des données devant êtres "formatées" ou classées comme une liste d'amis.

Le HTML

Le HTML est intéressant car il suffira de l'insérer directement dans la page avec la propriété innerHTML. C'est rapide. Cela dit le HTML est verbeux et peut se révéler assez lourd quand il s'agit d'un grand volume de données.

Code : HTML

<ul>
	<li><span title="a4242">Gordon</span></li>
	<li><span title="j3781">Barney</span></li>
	<li><span title="j7638">Eli</span></li>
	<li><span title="o7836">Chell</span></li>
	<li><span title="e5831">Odessa</span></li>
</ul>

Le XML

Avec certains objets AJAX, comme XMLHttpRequest il est possible de récupérer du texte sous forme de XML et de l'interpréter comme tel, ce qui permet de manipuler les données avec les fonctions DOM. Ca peut être intéressant mais XML souffre du même problème que le HTML : il est verbeux. De plus le traitement via DOM peut se révéler assez lent s'il s'agit d'un grand volume de données et suivant le navigateur utilisé par le client.

Code : XML

<friends>
	<f name="Gordon" id="a4242" />
	<f name="Barney" id="j3781" />
	<f name="Eli" id="j7638" />
	<f name="Chell" id="o7836" />
	<f name="Odessa" id="e5831" />
</friends>

Le JSON

Reste le JSON. Le JSON est une manière de structurer l'information en utilisant la syntaxe objet de JavaScript – des objets et des tableaux. JSON est très léger, car non-verbeux mais nécessite d'être évalué par le compilateur JavaScript pour pouvoir être utilisé comme un objet. L'évaluation se fait via eval pour les navigateurs obsolètes ou via la méthode parse de l'objet natif JSON. L'évaluation est souvent décriée car peut se révéler dangereuse, mais dans la mesure où vous connaissez la source des données à évaluer il n'y a pas de danger.

Code : JavaScript

[
	{ "name":"Gordon", "id":"a4242" },
	{ "name":"Barney", "id":"j3781" },
	{ "name":"Eli", "id":"j7638" },
	{ "name":"Chell", "id":"o7836" },
	{ "name":"Odessa", "id":"e5831" }
]

Le JSON est donc le format travaillant de paire avec AJAX quand il s'agit de recevoir des données classées et structurées. Les autres formats peuvent bien évidemment servir et se révéler intéressants dans certains cas, mais d'une façon générale les grandes pointures du JavaScript, comme Douglas Crockford incitent à utiliser JSON.

La librairie json2, écrite par Doug Crockford, permet d'émuler le comportement de l'objet natif JSON s'il n'est pas pris en charge par le navigateur. La librairie crée un objet global JSON pourvu des méthodes parse et stringify. La méthode parse est en fait un eval sécurisé, c'est-à-dire qu'un traitement est fait sur la chaine à évaluer pour s'assurer qu'elle ne présente aucun danger.

Une démonstration de cette petite application peut être découverte ici. Il ne s'agit que de HTML statique bien évidemment, cela sert juste à illustrer la théorie.

Retour en haut

Principes synchrones et asynchrones

La principale particularité d'AJAX est l'asynchronisme : la fonction qui envoie une requête au serveur n'est pas la même que celle qui en recevra la réponse. Avant d'aborder la pratique d'AJAX, il est bon de bien cerner cette notion d'asynchronisme qui est très importante.

Quand un programme ou un script s'exécute, il appelle les différentes instructions dans l'ordre dans lequel elles sont placées :

Code : JavaScript

1
2
3

var plop = 0; // première instruction
plop += 2;    // deuxième
alert(plop);  // et troisième

Maintenant, imaginons qu'il y ait un appel de fonction :

Code : JavaScript

1
2
3

var plop = 0;                // première instruction
plop = additionner(plop, 2); // deuxième
alert(plop);                 // et troisième

Quand la fonction additionner est appelée, le script principal se met en pause, et attend que la fonction soit exécutée, et qu'elle ait renvoyé une valeur (si elle ne renvoie rien, c'est pareil).

On dit que le script est exécuté de façon synchrone : quand un appel externe au script principal est réalisé, le script en attend la réponse ou la fin de l'exécution.

Le contraire de synchrone est asynchrone. Quand un appel est asynchrone, le script principal n'attend pas d'avoir reçu les données pour continuer. Evidemment, si mon exemple synchrone marche bien avec des fonctions, il ne marche pas si le script est asynchrone ; imaginons donc une requête de type AJAX !

Le script s'exécute et rencontre une requête AJAX, laquelle est envoyée en mode asynchrone. Dans ce cas, la requête est envoyée, mais le script n'attend pas que la requête ait abouti, il continue quoi qu'il arrive. L'intérêt est que si la requête met quelques secondes à être traitée par le serveur, le script n'est pas ralenti.

Mais si la requête est envoyée et que le script n'attend pas sa réponse, comment savoir quand cette requête renvoie quelque chose ?

Bonne question. Et c'est ici qu'interviennent les fonctions dites de callback. Une fonction callback est exécutée quand la requête aboutit à quelque chose (que son traitement est fini). Et c'est cette fonction de callback qui va se charger de récupérer les données renvoyées par la requête.

Ainsi, quand la requête est envoyée, le script continue son exécution, et quand la requête renvoie quelque chose, c'est la fonction de callback qui est appelée, et c'est elle qui va faire "suite" au script principal, en traitant les informations renvoyées.

On peut résumer l'asynchronisme en AJAX par ce schéma :

Retour en haut

Retour en haut

8 commentaires pour "Le concept d'AJAX"

Note moyenne : 3.61 / 4 (137 votes)

Pseudo	Commentaire
Thunderseb	# Posté le 25/03/2009 à 11:20:17
Responsable de la validation Avis : Très bon Blog Twitter close Ville : Liège Pays : Belgique	Ca dépend fort de ce qui est récupéré. Dans mon exemple sur Facebook il vaut mieux le faire en JSON. Mais si le texte est plus long et dont ontenir de la mise en forme (par exemple la visualisation d'une zone de texte) bah là il faut passer par HTML, car ce serait trop compliqué. JSON est semblable à XML en fait, mais ne peut pas vraiment être comparé à HTML. Car HTML a plus un rôle de présentation des données (la visuel) alors que JSON et XML est du stockage de données qui doit encore être traité pour être affiché. Hébergemoi.be - Winestripe Realfox 4 - zValido - Left 4 Dead - Portal Dynamisez vos sites web avec Javascript !
hornetbzz	# Posté le 16/10/2009 à 16:45:11
que la force soit avec toi Études : ESTACA	Bonjour, Super tuto, c'est assez lisible et clair. J'ai appliqué sur un cas un peu complexe, ça fonctionne bien. A la limite, un point faible serait la lenteur des échanges client-server pour de "grosses" requetes, ce qui n'est vraiment pas la vocation d'Ajax. Après cette lecture assidue, deux questions surgissent à l'orée de mes (2) turgescences neuronales : - Est-ce que l'on pourrait comparer le mode de programmation Ajax avec du Server Side Include (SSI d'Apache) (je veux dire, en terme de résultat) ? - Si oui, est ce que le SSI ne serait pas plus sécurisé ? Merci
Thunderseb	# Posté le 16/10/2009 à 16:50:57
Responsable de la validation Avis : Très bon Blog Twitter close Ville : Liège Pays : Belgique	Non, ce n'est pas comparable aux SSI. SSI c'est plutôt comme les includes en PHP, ça se joue du côté serveur. C'est sécurisé, mais le problème des SSI (ou l'avantage, c'est au choix), c'est qu'il n'y a pas moyen de combiner avec du PHP (enfin, sur mon serveur free.fr). SSI c'est parfait pour un petit site statique, mais pour un site PHP, faut oublier. J'utilise souvent SSI, par exemple mon site zEditor : http://nayi.free.fr/zeditor/index.shtml . Hébergemoi.be - Winestripe Realfox 4 - zValido - Left 4 Dead - Portal Dynamisez vos sites web avec Javascript !
marcel35	# Posté le 08/04/2010 à 18:26:49
	Je me posais pleins de questions sur l'ajax avant de venir ici, et maintenant je m'en pose le double ! Je suis pressé d'attaquer les chapitres suivants, ou plutôt de les dévorer. =D Si les prochaines chapitres sont aussi clairs que le premier, alors chapeau ! ps : fan du "facebouque" XD
keke21410	# Posté le 08/04/2010 à 21:17:36
"Belong to web" Ville : Ancey Pays : France métropolitaine	c'est pas mal d'avoir créer ce tuto aussi au format .pdf, même si 'fichier > enregistrer sous' marche aussi, je pense que ce serait interessant pour les tutos du SDZ ! Bref, je vais m'atteler (enfin) à Ajax et donc à ton tutoriel ! Merci ! #LGDF: Golmote vaincra ! [Projet] Un magazine du zér0 [Projet] site web jeux pokemon Mon avatar te plais pas ? Cliques ici pour le changer !