Comprendre les mcanismes d'AJAX

Par Didier Mouronval

Date de publication : 4 aot 2009 Dernire mise jour : 6 aot 2009

AJAX est encore trop souvent mal compris par les dbutants. Qu'il s'agisse de sa mise en uvre, de ses capacits ou de sa nature mme. Cet article va tenter de dgonfler les diffrentes baudruches concernant cette "technologie". Nous verrons aussi en quoi AJAX se diffrencie des diffrentes techniques d'inclusion de contenu.

Comprendre les mcanismes d'AJAX par Didier Mouronval

Prambule.................................................................................................................................................................... 3 AJAX : ksako ?...........................................................................................................................................................4 Mcanisme de cration d'une page HTML................................................................................................................. 5 Interaction PHP / JavaScript........................................................................................................................................5 Comment a impossible !?.......................................................................................................................................... 5 Communications serveur -> client............................................................................................................................... 5 Communications client -> serveur classique...............................................................................................................6 Les formulaires....................................................................................................................................................... 6 Les liens..................................................................................................................................................................6 Les redirections JavaScript.................................................................................................................................... 7 Le cas AJAX................................................................................................................................................................ 7 Premier principe......................................................................................................................................................7 Que doit-on donc faire ct serveur ?................................................................................................................... 8 Etapes de la requte..............................................................................................................................................9 Asynchrone ou synchrone ?.................................................................................................................................10 Remerciements.......................................................................................................................................................... 11

-2Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

Prambule
Cet article n'a pas pour objet de vous apprendre utiliser AJAX, mais de vous faire comprendre ses mcanismes. Pour ceux qui souhaitent en savoir plus, je vous invite consulter : Les tutoriels AJAX de developpez.com. En particulier, pour les dbutants et en complment de cet article : Ajax : Vos premiers pas dans les nouvelles technologies et Web 2.0, allez plus loin avec AJAX et XMLHttpRequest. La FAQ AJAX.

Avant toute chose, il est important de bien comprendre comment est architecture une communication client / serveur. Il existe deux types de communication entre le client (habituellement, le navigateur) et le serveur, les communications dites "statiques", c'est--dire qui se contentent d'envoyer vers le client un flux de donnes prsentes sur le serveur et les communications dites "dynamiques" qui effectuent un traitement sur le serveur pour renvoyer au client le rsultat de ce traitement. Un schma valant mieux que de longs discours, voici des reprsentations des architectures client / serveur statiques et dynamiques : Schma reprsentant le fonctionnement d'un site statique :

Relation client / serveur statique Schma reprsentant le fonctionnement d'un site dynamique :

-3Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

Relation client / serveur dynamique Je remercie emmanuel.remy pour la cration et la mise disposition de ces schmas !

AJAX : ksako ?
Ce qui fait gnralement le plus peur quand on commence aborder AJAX, c'est l'apparente complexit pour obtenir une instance XMLHttpRequest. XMLHttpRequest est la cl de vote d'une requte AJAX, sans lequel il est impossible de faire quoi que ce soit. Historiquement, la technologie AJAX est apparue en 1999 avec IE5 ; l'poque aucune norme AJAX du W3C n'existe et donc aucune notion d'objet XMLHttpRequest. Microsoft choisit alors de s'appuyer sur sa technologie ActiveX MSXML. Un an et demi plus tard Mozilla propose l'objet XMLHttpRequest, dont les noms des fonctions sont calqus sur celles de l'ActiveX de IE5 pour conserver un maximum de compatibilit entre les navigateurs. De facto XMLHttRequest devient une norme (Safari, Opera, Chrome l'adoptent) et c'est en 2006 que le W3C publie ses premires spcifications. L'objet XMLHttpRequest apparait ainsi dans IE7. Une seconde version des spcifications est finalement publie en 2008. Toujours est-il que la complexit n'est qu'apparente et que l'implmentation se fait assez facilement ( voir un exemple). Cependant, AJAX n'est rien d'autre qu'un acronyme ! Pour bien le comprendre, dcomposons-le : AJAX : Asynchronous JavaScript And XML, soit en franais : JavaScript et XML asynchrones. Cependant, nous allons voir que les termes employs sont parfois l uniquement pour gnrer l'acronyme ! Asynchrone : il s'agit de la capacit de communiquer avec une ressource cot serveur sans figer le navigateur (c'est--dire que le reste de la page reste actif), il est noter que bien que l'aspect asynchrone d'une requte Ajax en fait souvent un avantage non ngligeable, cela ne reste qu'une option, il est tout fait possible de crer des requtes synchrones, qui bloqueront donc votre page tant que le serveur n'aura pas rpondu. JavaScript : et bien oui, AJAX n'est rien d'autre que l'utilisation de l'objet (ou ActiveX) XMLHttpRequest de JavaScript. Tout ce que vous aurez savoir pour crer une requte Ajax efficace, ce seront les diffrentes proprits de cet objet. Et XML : si le XML se justifiait l'poque des premires vocations d'AJAX (la mode tait au XML et les formats alternatifs comme JSON n'existaient pas), il est aujourd'hui controvers. Toujours est-il que le retour d'une requte AJAX est suppos tre soit du texte, soit du XML, on comprend donc bien que ce X est surtout l pour l'acronyme !

-4Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

Mcanisme de cration d'une page HTML

Avant de rentrer plus en dtail dans le droulement d'une requte AJAX, il est important d'avoir une ide claire du droulement de cration d'une page Web et en particulier de la communication client / serveur. Dans cet article, j'ai pris comme rfrence de langage serveur le PHP. Sachez que c'est un choix arbitraire et que tout ce qui suit est valable quel que soit le langage serveur utilis ! Lorsqu'un internaute demande une page Web via son navigateur, il va chercher un fichier sur un serveur. Une connexion est donc ouverte vers le serveur pour pouvoir communiquer avec lui. Si le fichier en question est identifi comme du HTML (par son extension essentiellement), alors, il "comprend" que le rsultat sera directement exploitable par le navigateur et renvoie donc le contenu du fichier au navigateur qui ferme la connexion. En revanche, s'il comprend que le contenu est du PHP (j'insiste, ou tout autre langage serveur), alors, il sait qu'il doit d'abord interprter le code contenu dans le fichier pour pouvoir renvoyer au navigateurs du code HTML comprhensible par le navigateur, que l'on appelle du coup "gnr". Bien entendu, quand je dis que le code gnr sera compris par le navigateur, cela implique que le dveloppeur a bien cod sa page ! Une fois le code interprt, le rsultat est envoy vers le navigateur qui l'affiche, sans savoir qu'il s'agit d'un document PHP, ce qui du reste ne servirait rien car un navigateur ne sait pas valuer du code PHP, puis ferme la connexion.

Interaction PHP / JavaScript

Les notions abordes ici se limitent aux cas des requtes HTTP de type GET ou POST (les plus courantes), s'il existe des mthodes autorisant les connexions dites persistantes, elles dpassent largement le cadre de cet article. JavaScript (dans le cadre d'une requte AJAX) est lui interprt sur le navigateur. La consquence du fonctionnement dcrit prcdemment est que les interprteurs PHP et JavaScript ne fonctionnent jamais en mme temps ! En effet, lorsque le serveur interprte le PHP, le document HTML n'existe pas, il n'existera qu'une fois le contenu reu et affich sur le navigateur, donc une fois la connexion client / serveur ferme. A l'inverse, lorsque l'interprteur JavaScript entre en action, c'est--dire ds que le navigateur aura rencontr une balise <script> alors le document PHP n'existe plus. Il est donc absolument impossible de faire interagir PHP et JavaScript !

Comment a impossible !?
Je vous entends dj pester ! Comment a c'est impossible, je l'ai pourtant dj fait ! Et bien non, c'est faux ! Vous avez dj certainement transmis des donnes du client (navigateur) vers le serveur, en effet, JavaScript est excut cot client, PHP cot serveur, le client et le serveur savent communiquer entre eux et se transmettre des donnes, donc JavaScript est capable de dire au navigateur de transmettre des donnes au serveur puis le serveur est capable de dire PHP qu'il a reu telles donnes du navigateur. De mme, PHP est capable de dire au serveur d'envoyer des donnes au navigateur qui les transmettra JavaScript, mais aucun moment PHP et JavaScript n'ont communiqu entre eux. Vous trouvez peut-tre que je chipote, mais cela a une importance majeure : l'intrt de faire interagir les deux serait d'changer des donnes types (un nombre, un tableau, un boolen, un objet etc.) mais le client et le serveur ne sont pas des langages de programmation et ne connaissent pas ce genre de donnes ! Le protocole HTTP impose que les seules informations qui peuvent transiter et tre exploites soient au format texte, ventuellement sous forme de texte structur (XML par exemple) reconnu la fois par JavaScript et PHP bref ct client et ct serveur.

Communications serveur -> client

Il est donc possible de faire parvenir au client ou au serveur des donnes de type textuel.

-5Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

Pour passer de PHP JavaScript, la solution est plutt simple. Puisque c'est le navigateur qui crera le contexte JavaScript et qu'il lui suffit de rencontrer une balise <script> pour savoir qu'il faut interprter son contenu comme du JavaScript ( condition bien sr, que l'attribut type soit bien renseign), il n'y a qu' insrer ces balises dans la page gnre. Voici un exemple pour crer un tableau JavaScript depuis un tableau PHP :
<?php $tableau = array('toto', 'tata', 5); echo '<script type="text/javascript"> var tableau = ["'.$tableau[0].'","'.$tableau[1].'",'.$tableau[2].']; </script>'; ?>

Vous noterez bien que l'on ne transmet pas directement le tableau, on construit un tableau JavaScript depuis les lments d'un tableau PHP. De mme, concernant la valeur numrique, elle n'est pas insre comme tant un entier. Elle est ajoute sous forme de texte format de faon ce que JavaScript puisse interprter qu'il s'agit d'un nombre. Attention, dans le cadre d'Ajax, le code JavaScript ne sera pas interprt, nous verrons pourquoi plus tard. Concernant la communication entre JavaScript et PHP, les modalits sont plus complexes et dpendent de diffrents cas, c'est ce que nous allons dtailler maintenant.

Communications client -> serveur classique

J'entends par communication client / serveur classique la navigation sans utiliser AJAX. Il existe trois faons de communiquer entre le navigateur et le serveur sans utiliser AJAX.

Les formulaires
Lorsque l'on soumet un formulaire, le navigateur rcupre les valeurs des lments du formulaire soumis possdant un attribut name puis transmet ces couples nom / valeur la page dfinie par l'attribut action via une requte HTTP soit en les ajoutant l'URL soit dans le corps de la requte selon la valeur de l'attribut method ("GET" dans le premier cas, "POST" dans le second). PHP reoit ces paramtres dans les tableaux $_GET ou $_POST. Les valeurs sont alors ncessairement de type chane. Il ne peut pas en tre autrement pour deux raisons : Comme nous l'avons dj voqu, le protocole ne connait pas les types. Il est ncessaire de passer par une couche supplmentaire, le HTML, pour transmettre les donnes, or HTML n'accepte pas les variables et ne reconnait donc pas les types non plus.

PHP peut alors construire une nouvelle page en prenant ces informations en compte puis renvoyer un nouveau document HTML au navigateur. Le navigateur recharge alors la page pour afficher le nouveau contenu. Vous noterez toutefois que les champs de formulaires peuvent tres remplis en JavaScript. Il est donc possible de transmettre des reprsentations textuelles des variables JavaScript PHP (voire de les rintgrer dans la nouvelle page). Mais il s'agira tout de mme d'un contexte JavaScript diffrent.

Les liens
Comme pour les formulaires, il est possible de transmettre des donnes depuis un lien. Cependant, nous sommes ici limits la mthode GET, c'est--dire les faire passer par l'URL. Ces paramtres sont inclure dans l'URL aprs un point d'interrogation ("?") sous forme de couples nom / valeur spars par le caractre "&" :

-6Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

www.developpez.com?toto=tata&auteur=bovino

L encore, nous sommes limits des donnes textuelles, mais nous pouvons ajouter avec JavaScript des valeurs transmettre :
<a href="www.developpez.com" id="test">Lien</a> <script type="text/javascript"> var variable = 'bovino'; var parametres = '?toto=tata&auteur=" + variable; document.getElementById('test').href += parametres; </script>

Vous constaterez que la couche HTML est ici aussi ncessaire pour communiquer avec le serveur.

Les redirections JavaScript

L'objet location de JavaScript comprend quatre mthodes permettant de faire une redirection. Il est donc possible d'utiliser ces mthodes pour transmettre des paramtres. mthode location.href description Il ne s'agit en fait pas d'une mthode mais d'une proprit qui fait rfrence l'URL de la page. Elle permet de rcuprer ou d'affecter l'URL de la page. Cette mthode charge l'URL passe en argument avec inscription dans l'historique. Cette mthode charge l'URL passe en argument sans inscription dans l'historique. Cette mthode recharge la page en cours, elle n'est pas utile pour transfrer des paramtres JavaScript.

location.assign() location.replace() location.reload()

Exemples
location.href = 'www.developpez.com?toto=tata&auteur=bovino'; location.assign('www.developpez.com?toto=tata&auteur=bovino'); location.replace('www.developpez.com?toto=tata&auteur=bovino');

Il faut noter qu'ici, c'est JavaScript qui appelle directement la requte HTTP, il n'y a plus d'intermdiaire HTML, en revanche, c'est le moteur HTML qui reoit la rponse du serveur. Le point commun de toutes ces mthodes est que l'on envoie des informations au serveur qui renvoie un document complet. Il y a donc ncessairement rechargement de la page. AJAX va nous permettre de modifier uniquement des portions de page lorsque le rechargement complet n'est pas ncessaire. Nous allons voir ce que cela change par rapport aux modles prcdents.

Le cas AJAX Premier principe

L'utilit essentielle d'AJAX est la capacit d'utiliser des informations prsentes sur le serveur dans un script JavaScript sans avoir recharger la page. Les exemples typiques d'utilisation sont nombreux, par exemple :

-7Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

Modifier une partie de la page sans avoir la recharger entirement comme c'tait le cas dans les techniques prsentes auparavant. Enregistrer la vole des informations sur le serveur. Vrifier la validit et/ou la disponibilit (pseudos, mots de passe...) de champs de formulaires avant de soumettre ceux-ci (ATTENTION : cela n'exonre pas des vrifications cot serveur !) Proposer des suggestions lors du remplissage d'un champ de formulaire (autocompltion). Etc. La premire consquence est donc que lors d'une requte AJAX, le serveur ne doit pas renvoyer un document HTML.

En effet, dans les communications client / serveur sans utiliser AJAX, on parle de navigation, c'est--dire que le serveur doit renvoyer une page HTML complte au navigateur qui se charge ensuite de l'afficher. Le navigateur a besoin d'une page complte (et si possible valide) pour l'afficher correctement. A l'inverse, dans le cas d'AJAX, nous souhaitons juste mettre jour une partie de la page, y insrer une page HTML complte constituerait donc une erreur grave de conception et risquerait de provoquer des erreurs d'affichage. Il est cependant possible de crer cot serveur un fragment HTML (par exemple le contenu HTML que l'on veut insrer et qui peut lui-mme comporter des balises. Mais ce fragment ne sera pas interprt comme du HTML mais comme du texte simple.

Que doit-on donc faire ct serveur ?

JavaScript ne pourra interprter la rponse que comme du texte. Cependant, la mthode de cration est identique celle utilise pour la cration d'une page. En PHP, le rsultat retourn par le serveur sera celui qui aura t affich avec des instructions echo par exemple. Le script PHP devra donc organiser le rsultat obtenu de faon a tre facilement exploitable par JavaScript. Il existe diffrentes techniques pour cela : Renvoyer du texte simple, par exemple si vous avez juste un message renvoyer.
echo 'Ce login est invalide';

Un document XML. Attention, pour que la rponse du serveur puisse tre correctement interprte, il est important de le prciser dans le header du script PHP et que le XML retourn soit valide. Il est aussi noter que le format XML est considr comme plus scuris que les autres modes d'change.

Un objet JSON (

JavaScript Object Notation).

S'il est un langage de balises permettant de structurer parfaitement les donnes, XML gnre en contrepartie des changes consquents de donnes souvent inadaptes et qui ncessitent d'tre ensuite analyses ("parses") ds rception. Le format d'change JSON est ainsi naturellement apparu ; il prsente l'avantage d'organiser les donnes de faon comparable, mais beaucoup plus lgre, en utilisant la syntaxe des objets JavaScript, et de les rendre directement utilisables :
{nom1: valeur1, nom2: valeur2, nom3: { sousnom1: sousvaleur1, sousnom2: sousvaleur2 } }

-8Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

On utilise des couples nom / valeur, chaque couple est spar par une virgule (mais il ne faut pas de virgule aprs le dernier), les noms et les valeurs sont spars par deux points (caractre ":"). Les valeurs peuvent elles-mmes tre des objets. Le format JSON offre plusieurs avantages : - Il est lger et facilement manipulable. - Il est normalis, cela signifie que n'importe qu'elle application supportant ce format peut accder son contenu sans avoir ajouter quoi que ce soit. En revanche, il prsente aussi un inconvnient : s'agissant au final d'une donne type, il ne pourra pas tre envoy en tant que tel mais sous forme de texte, il faudra donc l'valuer avec JavaScript avant de l'utiliser. Un systme de pseudo XML en sparant les diffrents rsultats avec des sparateurs prdfinis.
$nom1 = $valeur1; $nom2 = $valeur2; $nom3 = $valeur3; echo $nom1.'<>'.$valeur1.'<arg>'.$nom2.'<>'.$valeur2.'<arg>'.$nom3.'<>'.$valeur3;

Les avantages de ce type de format sont : - Il est relativement lger et facile mettre en uvre. - Il est directement exploitable en JavaScript et chaque lment facilement rcuprable au moyen d'appels la mthode split() de l'objet String. Les inconvnients : - Il n'est pas normalis, il est donc ncessaire de bien documenter sa structure. - Il devient vite lourd grer en cas de structure trop complexe (imbrications multiples par exemple).

Etapes de la requte
Une requte AJAX se dcompose en diffrentes tapes : Crer un objet XMLHttpRequest ( Voir un exemple dans la FAQ). Dfinir les actions raliser lors des diffrentes rponses du serveur (mthode onreadystatechange()). Rcuprer les ventuels paramtres envoyer. Ouvrir une connexion avec le serveur (mthode open()). Envoyer la requte au serveur (mthode send()).

Vous constaterez qu'avec AJAX, c'est JavaScript qui envoie et qui reoit les donnes. Il s'agit d'une diffrence essentielle avec la navigation classique. En effet, nous avons vu que c'est le moteur HTML qui insre le JavaScript dans le contexte du document et cela lorsqu'il rencontre une balise <script>. Donc, comme le moteur HTML n'intervient pas dans une requte AJAX, ce qui signifie que : Il n'est pas possible de rcuprer du JavaScript avec AJAX. Bon d'accord, j'exagre un peu... Mais il faut bien comprendre que le code JavaScript contenu dans la rponse du serveur est, comme tout le reste, considr comme du texte, il est donc ncessaire de l'valuer (avec la mthode eval()) avant de pouvoir l'utiliser, tout comme les rponses au format JSON.
eval(XMLHttpRequest.responseText);

Il est cependant noter que l'utilisation de eval() est plutt dconseille en rgle gnrale. Cette mthode oblige appeler le moteur JavaScript, ce qui rduit considrablement les performances.
-9Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

Cette mthode est aussi considre comme peu scurise car elle donne une importance exagre au texte valu. Dans le cadre d'AJAX, on peut se dire (avec bon sens) qu'tant donn la Same Origin Policy (SOA : politique de mme origine) inhrente JavaScript et donc AJAX, les risques sont minimes. C'est logiquement le cas si l'on considre que le dveloppeur est comptent, ce qui n'est pas toujours le cas... mais qu'en est-il si la page appele par votre requte fonctionne la manire d'un proxy, qui est encore aujourd'hui la mthode la plus courante pour faire de l'AJAX inter domaine ? Avez-vous vraiment confiance dans les intermdiaires chez lesquels vous rcuprez vos donnes ? Il faut toutefois tre conscient qu'il est impossible d'viter l'utilisation de eval() pour interprter du JavaScript rcupr par AJAX. De ce fait, si vous avez inclure du JavaScript dans un document via AJAX, demandez-vous au pralable si vous ne faites pas de fautes de conception et donc s'il n'y a pas un moyen plus acadmique de procder. D'aprs mon exprience, les cas o il est impossible de procder diffremment sont assez rares. Une utilisation dtourne de eval() serait de passer directement par le DOM, l'intrt tant de rendre le script accessible dans le contexte global si vous l'valuez par exemple dans le cadre d'une fonction anonyme de rappel type callback :
var lafonction = XMLHttpRequest.responseText; var lescript = document.createElement('script'); lescript.type='text/javascript'; lescript.appendChild(document.createTextNode(lafonction)); document.getElementsByTagName('head')[0].appendChild(lescript);

Attention, cette mthode n'a pas t teste avec tous les navigateurs !

Asynchrone ou synchrone ?
Il est aussi important de comprendre quoi correspondent les notions de requtes synchrones ou asynchrones. Le principe est relativement simple et bien compris, mais les implications sont plus difficiles apprhender. Lors d'une requte synchrone, la fonction qui la contient bloque son excution tant que la rponse du serveur n'a pas t reue. A titre de comparaison, c'est presque le mme fonctionnement qu'avec une bote d'alerte. Les implications sont que de ce fait, aucun code JavaScript ne peut tre excut pendant ce temps, la page n'est plus interactive. Lors d'une requte asynchrone au contraire, la requte est lance mais le code de la fonction continue s'excuter. C'est habituellement un intrt majeur d'AJAX, en revanche, il est important de notifier au visiteur que l'action qu'il a dclenche est en cours d'excution, car rien n'est plus agaant que de cliquer sur un contrle devant effectuer une action et de ne rien voir arriver... Une autre consquence, au niveau du dveloppeur, est de bien comprendre que pendant le cours de la requte, la fonction qui l'a cre continue son excution et bien souvent termine son excution avant que la rponse du serveur ne revienne. Or, quand une fonction termine son excution, son contexte est dtruit. De ce fait, il est important de savoir que si vous avez besoin des rsultats de la requte dans la fonction qui la cre, vous risquez d'tre oblig de passer par une requte synchrone. En gnral, on prfrera envisager tous les traitements de retour dans la fonction appele par la russite de la requte (ce que l'on appelle habituellement le callback) via l'vnement onreadystatechange en prenant bien soin de rendre disponibles les lments du contexte requis. L'aspect asynchrone ne reprsente que la valeur par dfaut d'une requte AJAX, elle est cependant celle que je prconiserais. Tout comme pour les valuations de scripts, les cas o l'utilisation de requtes synchrones est indispensable sont plutt rares et je prfre tenter de privilgier les actions des utilisateurs au maximum.

- 10 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/

Comprendre les mcanismes d'AJAX par Didier Mouronval

Remerciements
Je tiens remercier emmanuel.remy pour ses conseils qui ont permis d'amliorer notablement la qualit de cet article et pour la cration des schmas ainsi que ram-000 pour sa relecture avise.

- 11 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2009 Didier Mouronval. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Droits de diffusion permanents accords Developpez LLC. Cette page est dpose la SACD.

http://dmouronval.developpez.com/tutoriels/ajax/comprendre-requete-ajax/