From 8be08b2f3d7d89f450b4eca058961680cacff69d Mon Sep 17 00:00:00 2001
From: SphinxKnight
Si vous connaissez d'autres listes de diffusion, newsgroups, forums ou d'autres communautés ayant trait à AJAX, n'hésitez pas à ajouter un lien ci-dessous.
http://www.ajaxlines.com (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet.
http://www.ajaxmatters.com - Portail d'informations sur AJAX et les technologies Web associées (anglais). -
-Liens Interwikis
-
Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.
-AJAX est un raccourci pour Asynchronous JavaScript And XML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet XMLHttpRequest
pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger.
Pour faire une requête HTTP vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que XMLHttpRequest
intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé XMLHTTP
. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet XMLHttpRequest
qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Entre temps, Microsoft a également implémenté XMLHttpRequest.
Note : Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.
+Note : Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.
Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet httpRequest
le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété onreadystatechange
de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');-
Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.
@@ -112,7 +112,7 @@ httpRequest.send();Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’open()
n’a pas été spécifié, ou a été défini à true
). Si vous utilisez une requête synchrone, vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur.
Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, test.html
, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message alert()
. Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier.
alertContents()
vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier test.html
dans un message alert()
.Note : Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête Content-Type: application/xml
, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.
Note : Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête Content-Type: application/xml
, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.
Note 2 : Si vous ne spécifiez pas l’en-tête Cache-Control: no-cache
, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir contourner le cache).
Note : Si vous ne spécifiez pas l’en-tête Cache-Control: no-cache
, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir contourner le cache).
Note 3 : Si la variable httpRequest
est utilisée globalement, des appels concurrents à makeRequest()
peuvent s’écraser l’un l’autre, provoquant une situation de compétition (race condition). On peut s’en prémunir en déclarant la variable httpRequest
locale à une closure contenant les fonctions AJAX.
Note : Si la variable httpRequest
est utilisée globalement, des appels concurrents à makeRequest()
peuvent s’écraser l’un l’autre, provoquant une situation de compétition (race condition). On peut s’en prémunir en déclarant la variable httpRequest
locale à une closure contenant les fonctions AJAX.
Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode onreadystatechange
lors de l’accès à la propriété status
. Pour atténuer ce problème, vous pouvez entourer votre bloc if...then
dans un try...catch
:
Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété responseText
de l’objet, qui contenait le contenu du fichier test.html
. Essayons maintenant la propriété responseXML
.
Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété responseText
de l’objet, qui contenait le contenu du fichier test.html
. Essayons maintenant la propriété responseXML
.
Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (test.xml
) contient ce qui suit :
Ce code prend l’objet XMLDocument
donné par responseXML
et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.
Catégories
+Catégories
-Interwiki
+Interwiki
<label>Vore nom : <input type="text" id="ajaxTextbox" /> </label> -<span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> +<span id="ajaxButton"> Lancer une requête </span>diff --git a/files/fr/web/guide/ajax/index.html b/files/fr/web/guide/ajax/index.html index a7e13ac33a..1cfc6f249b 100644 --- a/files/fr/web/guide/ajax/index.html +++ b/files/fr/web/guide/ajax/index.html @@ -3,8 +3,6 @@ title: AJAX slug: Web/Guide/AJAX translation_of: Web/Guide/AJAX --- -
AJAX (Asynchronous JavaScript + XML) n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : HTML ou XHTML, les feuilles de styles CSS, JavaScript, le modèle objet de document (DOM), XML, XSLT, et l'objet XMLHttpRequest. Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur.
@@ -13,7 +11,7 @@ Une introduction à AJAXS'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire :
-- cgit v1.2.3-54-g00ecf |