Premiers pas

  • Raccourci de la révision : AJAX/Premiers_pas
  • Titre de la révision : Premiers pas
  • ID de la révision : 13009
  • Créé :
  • Créateur : Mgjbot
  • Version actuelle ? Non
  • Commentaire robot Ajoute: [[zh-cn:AJAX:Getting Started]]

Contenu de la révision

Cet article vous guide à travers les bases d'{{template.Abbr("AJAX", "JavaScript asynchrone et XML")}} et vous donne deux exemples clefs-en-main pour débuter.

Qu'est-ce qu'AJAX ?

AJAX est un nouveau terme inventé récemment pour désigner deux puissantes fonctionnalités présentes dans plusieurs navigateurs depuis quelques années, mais sont restées inaperçues de nombreux développeurs Web jusqu'il y a peu. Depuis, des applications comme Gmail, Google suggest et Google Maps sont devenues monnaie courante.

Ces deux fonctionnalités sont les possibilités de :

  • faire des requêtes vers le serveur sans avoir à recharger la page ;
  • parcourir et travailler avec des documents XML.

Le terme AJAX est un acronyme en anglais. Le A est pour « asynchronous » (asynchrone), ce qui signifie que vous pouvez faire une requête HTTP vers le serveur et faire d'autres choses en attendant que la réponse arrive. JA est pour « JavaScript » et X est pour « XML ».

Étape 1 - Lancement d'une requête HTTP

Afin de faire une requête HTTP vers le serveur à l'aide de JavaScript, il faut disposer d'une instance d'une classe fournissant cette fonctionnalité. Une telle classe a d'abord été introduite dans 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 une classe XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l'objet ActiveX original de Microsoft.

Par conséquent, pour créer une instance de la classe (un objet) fonctionnant sur plusieurs navigateurs, vous pouvez utiliser :

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

(À des fins d'illustration, le code ci-dessus est une version un peu simplifiée de ce qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus concret, voir la troisième étape de cet article.)

Certaines versions de certains navigateurs Mozilla ne fonctionneront pas correctement si la réponse du serveur n'a pas un en-tête de type mime XML. Pour les satisfaire, vous pouvez utiliser un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml.

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

La chose suivante à faire est décider ce que vous voulez faire après avoir reçu la réponse du serveur. À ce stade, vous devez juste dire à l'objet de requête HTTP quelle fonction JavaScript devra effectuer le travail d'analyse de la réponse. Cela se réalise en assignant à la propriété onreadystatechange de l'objet le nom de la fonction JavaScript que vous envisagez d'utiliser, comme ceci :

http_request.onreadystatechange = nomDeLaFonction;

Notez qu'il n'y a pas de parenthèses après le nom de la fonction, ni de paramètres fournis. Par ailleurs, au lieu de donner un nom de fonction, vous pouvez également utiliser la technique JavaScript de définition de fonctions au vol, et spécifier directement les actions à effectuer sur la réponse, comme ceci :

http_request.onreadystatechange = function() {
    // instructions de traitement de la réponse
};

Ensuite, après avoir déclaré ce qui se passera lorsque la réponse sera reçue, il s'agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes open() et send() de la classe de requête HTTP, comme ceci :

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
  • Le premier paramètre de l'appel à open() est la méthode de requête HTTP – GET, POST, HEAD ou toute autre méthode que vous voulez utiliser et est gérée par le serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas procéder à la requête. Pour plus d'informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les spécifications du W3C
  • Le second paramètre est l'URL de la page dont vous faites la requête. Pour des raisons de sécurité, il n'est pas possible d'appeler des pages se situant sur un autre domaine. Veuillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur 'permission denied' à l'appel d'open(). Une erreur courante est de charger le site via domaine.tld, mais d'essayer d'appeler des pages avec www.domain.tld.
  • Le troisième paramètre précise si la requête est asynchrone. Si mis à TRUE, l'exécution de la fonction JavaScript se poursuivra en attendant l'arrivée de la réponse du serveur. C'est le A d'AJAX.

Le paramètre de la méthode send() peut être n'importe quelle donnée que vous voulez envoyer au serveur en cas d'utilisation de la méthode POST. Les données doivent être sous la forme d'une chaîne de requête, comme :

nom=valeur&autrenom=autrevaleur&ainsi=desuite

Notez que si vous voulez envoyer des données avec la méthode POST, vous devrez changer le type MIME de la requête à l'aide de la ligne suivante :

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Autrement, le serveur ignorera les données envoyées.

Étape 2 - Gestion de la réponse du serveur

Souvenez-vous que lors de l'envoi de la requête, vous aviez fourni le nom d'une fonction JavaScript conçue pour traiter la réponse.

http_request.onreadystatechange = nomDeLaFonction;

Voyons maintenant ce que cette fonction doit faire. Tout d'abord, elle doit vérifier l'état de la requête. Si cet état a une valeur de 4, cela signifie que la réponse du serveur a été reçue dans son intégralité et qu'elle peut maintenant être traitée.

if (http_request.readyState == 4) {
    // tout va bien, la réponse a été reçue
} else {
    // pas encore prête
}

Voici la liste complète des valeurs de readyState :

  • 0 (non initialisée)
  • 1 (en cours de chargement)
  • 2 (chargée)
  • 3 (en cours d'interaction)
  • 4 (terminée)

(Source)

La seconde chose à vérifier est le code d'état HTTP de la réponse du serveur. Tous les codes possibles sont listés sur le site du W3C. Dans notre cas, nous sommes seulement intéressés par une réponse 200 OK.

if (http_request.status == 200) {
    // parfait !
} else {
    // il y a eu un problème avec la requête,
    // par exemple la réponse peut être un code 404 (Non trouvée) 
    // ou 500 (Erreur interne du serveur)
}

Maintenant que vous avez vérifié l'état de la requête et le code d'état HTTP de la réponse, vous pouvez faire ce que vous voulez des données envoyées par le serveur. Il existe deux manières d'accéder à ces données :

  • http_request.responseText – renvoie la réponse du serveur sous la forme d'une chaîne de texte
  • http_request.responseXML – renvoie la réponse sous la forme d'un objet XMLDocument que vous pouvez parcourir à l'aide des fonctions DOM de JavaScript

Étape 3 - Un exemple simple

Mettons tout cela ensemble et effectuons une requête HTTP simple. Notre JavaScript demandera un document HTML, test.html, qui contiendra le texte « Je suis un test. », et nous afficherons le contenu de ce fichier test.html dans un message alert().

<script type="text/javascript" language="javascript">

    function makeRequest(url) {

        var http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // Voir la note ci-dessous à propos de cette ligne
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { alertContents(http_request); };
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertContents(http_request) {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('Un problème est survenu avec la requête.');
            }
        }

    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Effectuer une requête
</span>

Dans cet exemple :

  • L'utilisateur clique sur le lien « Effectuer une requête » dans le navigateur ;
  • ceci appelle la fonction makeRequest() avec un paramètre – le nom test.html d'un fichier HTML situé dans le même répertoire ;
  • la requête est faite et ensuite (onreadystatechange) l'exécution est passée à alertContents();
  • alertContents() vérifie si la réponse a été reçue et porte un code OK et affiche ensuite la contenu du fichier test.html dans un message alert().

Vous pouvez tester l'exemple et consulter le fichier de test.

Note : La ligne http_request.overrideMimeType('text/xml'); ci-dessus provoquera des erreurs dans la console JavaScript de Firefox 1.5b (comme documenté dans le bug 311724) si la page appelée par XMLHttpRequest n'est pas du XML valide (par exemple s'il s'agit de texte simple).

Si vous obtenez des erreurs de syntaxe ou de fichier mal formé sur ce navigateur, et que vous n'essayez pas de charger du contenu XML avec XMLHttpRequest, retirez simplement cette ligne de votre code.

Note 2 : Si vous envoyez une requête vers un bout de code dynamique qui renvoie du XML, plutôt que vers un fichier XML statique, vous devez positionner certains en-têtes de réponse pour que votre page fonctionne non seulement avec Mozilla, mais aussi avec Internet Explorer. Si vous ne spécifiez pas l'en-tête Content-Type: application/xml, IE produira une erreur JavaScript 'Objet attendu' après la ligne à laquelle vous tenterez d'accéder à un élémentXML. 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 faire du débogage un véritable défi

Note 3 : Si la variable http_request est utilisée globalement, des appels concurrents à makeRequest() peuvent s'écraser l'un l'autre, provoquant un effet de race condition. On peut s'en prémunir en rendant la variable http_request locale à la fonction et en la passant en paramètre à la fonction alertContent().

Note 4 : Pour procéder à l'enregistrement de la fonction de callback onreadystatechange, aucun paramètre n'est permis :

http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (requêtes simultanées)
http_request.onreadystatechange = alertContents(http_request); //2 (ne fonctionne pas)
http_request.onreadystatechange = alertContents; //3 (variable globale)

La méthode 1 permet d'avoir plusieurs requêtes lancées simultanément, la méthode 2 ne fonctionnera pas, et la méthode 3 est utilisée si http_request est une variable globale.

Étape 4 - Travailler avec des réponses XML

Dans l'exemple précédent, après que la réponse à la requête HTTP ait été reçue, nous avons utilisé la propriété reponseText de l'objet de requête, et celle-ci renvoyait 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 :

<?xml version="1.0" ?>
<root>
    Je suis un test.
</root>

Dans le script, il est juste nécessaire de remplacer la ligne de requête par :

...
onclick="makeRequest('test.xml')">
...

Ensuite, dans alertContents(), il faut remplacer la ligne affichant un message alert(http_request.responseText); par :

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

De cette façon, nous avons pris l'objet XMLDocument donné par responseXML et nous avons utilisé des méthodes DOM pour accéder à certaines données contenues dans le document XML. Vous pouvez consulter le fichier test.xml et le script mis à jour.

Pour plus d'information sur les méthodes DOM, consultez les documents sur l'implémentation de DOM dans Mozilla.

Catégories

Interwiki

{{ wiki.languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "zh-cn": "cn/AJAX/Getting_Started" } ) }}

Source de la révision

<p>
</p><p>Cet article vous guide à travers les bases d'{{template.Abbr("AJAX", "JavaScript asynchrone et XML")}} et vous donne deux exemples clefs-en-main pour débuter.
</p>
<h3 name="Qu.27est-ce_qu.27AJAX_.3F"> Qu'est-ce qu'AJAX ? </h3>
<p>AJAX est un nouveau terme inventé récemment pour désigner deux puissantes fonctionnalités présentes dans plusieurs navigateurs depuis quelques années, mais sont restées inaperçues de nombreux développeurs Web jusqu'il y a peu. Depuis, des applications comme Gmail, Google suggest et Google Maps sont devenues monnaie courante.
</p><p>Ces deux fonctionnalités sont les possibilités de :
</p>
<ul><li> faire des requêtes vers le serveur sans avoir à recharger la page ;
</li><li> parcourir et travailler avec des documents XML.
</li></ul>
<p>Le terme AJAX est un acronyme en anglais. Le <strong>A</strong> est pour <em>« asynchronous »</em> (asynchrone), ce qui signifie que vous pouvez faire une requête HTTP vers le serveur et faire d'autres choses en attendant que la réponse arrive. <strong>JA</strong> est pour <em>« JavaScript »</em> et <strong>X</strong> est pour <em>« XML »</em>.
</p>
<h3 name=".C3.89tape_1_-_Lancement_d.27une_requ.C3.AAte_HTTP"> Étape 1 - Lancement d'une requête HTTP </h3>
<p>Afin de faire une requête HTTP vers le serveur à l'aide de JavaScript, il faut disposer d'une instance d'une classe fournissant cette fonctionnalité. Une telle classe a d'abord été introduite dans Internet Explorer sous la forme d'un objet ActiveX appelé <code>XMLHTTP</code>. Par la suite, Mozilla, Safari et d'autres navigateurs ont suivi en implémentant une classe <code>XMLHttpRequest</code> qui fournit les mêmes méthodes et propriétés que l'objet ActiveX original de Microsoft.
</p><p>Par conséquent, pour créer une instance de la classe (un objet) fonctionnant sur plusieurs navigateurs, vous pouvez utiliser :
</p>
<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
</pre>
<p>(À des fins d'illustration, le code ci-dessus est une version un peu simplifiée de ce qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus concret, voir la troisième étape de cet article.)
</p><p>Certaines versions de certains navigateurs Mozilla ne fonctionneront pas correctement si la réponse du serveur n'a pas un en-tête de type mime XML. Pour les satisfaire, vous pouvez utiliser un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de <code>text/xml</code>.
</p>
<pre class="eval">http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
</pre>
<p>La chose suivante à faire est décider ce que vous voulez faire après avoir reçu la réponse du serveur. À ce stade, vous devez juste dire à l'objet de requête HTTP quelle fonction JavaScript devra effectuer le travail d'analyse de la réponse. Cela se réalise en assignant à la propriété <code>onreadystatechange</code> de l'objet le nom de la fonction JavaScript que vous envisagez d'utiliser, comme ceci :
</p>
<pre class="eval">http_request.onreadystatechange = nomDeLaFonction;
</pre>
<p>Notez qu'il n'y a pas de parenthèses après le nom de la fonction, ni de paramètres fournis. Par ailleurs, au lieu de donner un nom de fonction, vous pouvez également utiliser la technique JavaScript de définition de fonctions au vol, et spécifier directement les actions à effectuer sur la réponse, comme ceci :
</p>
<pre>http_request.onreadystatechange = function() {
    // instructions de traitement de la réponse
};
</pre>
<p>Ensuite, après avoir déclaré ce qui se passera lorsque la réponse sera reçue, il s'agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes <code>open()</code> et <code>send()</code> de la classe de requête HTTP, comme ceci :
</p>
<pre class="eval">http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
</pre>
<ul><li> Le premier paramètre de l'appel à <code>open()</code> est la méthode de requête HTTP – GET, POST, HEAD ou toute autre méthode que vous voulez utiliser et est gérée par le serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas procéder à la requête. Pour plus d'informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">spécifications du W3C</a> 
</li><li> Le second paramètre est l'URL de la page dont vous faites la requête. Pour des raisons de sécurité, il n'est pas possible d'appeler des pages se situant sur un autre domaine. Veuillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur 'permission denied' à l'appel d'<code>open()</code>. Une erreur courante est de charger le site via domaine.tld, mais d'essayer d'appeler des pages avec www.domain.tld.
</li><li> Le troisième paramètre précise si la requête est asynchrone. Si mis à <code>TRUE</code>, l'exécution de la fonction JavaScript se poursuivra en attendant l'arrivée de la réponse du serveur. C'est le A d'AJAX.
</li></ul>
<p>Le paramètre de la méthode <code>send()</code> peut être n'importe quelle donnée que vous voulez envoyer au serveur en cas d'utilisation de la méthode POST. Les données doivent être sous la forme d'une chaîne de requête, comme :
</p><p><code>nom=valeur&amp;autrenom=autrevaleur&amp;ainsi=desuite</code>
</p><p>Notez que si vous voulez envoyer des données avec la méthode POST, vous devrez changer le type MIME de la requête à l'aide de la ligne suivante :
</p>
<pre class="eval">http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
</pre>
<p>Autrement, le serveur ignorera les données envoyées.
</p>
<h3 name=".C3.89tape_2_-_Gestion_de_la_r.C3.A9ponse_du_serveur"> Étape 2 - Gestion de la réponse du serveur </h3>
<p>Souvenez-vous que lors de l'envoi de la requête, vous aviez fourni le nom d'une fonction JavaScript conçue pour traiter la réponse. 
</p><p><code>http_request.onreadystatechange = nomDeLaFonction;</code>
</p><p>Voyons maintenant ce que cette fonction doit faire. Tout d'abord, elle doit vérifier l'état de la requête. Si cet état a une valeur de 4, cela signifie que la réponse du serveur a été reçue dans son intégralité et qu'elle peut maintenant être traitée. 
</p>
<pre>if (http_request.readyState == 4) {
    // tout va bien, la réponse a été reçue
} else {
    // pas encore prête
}
</pre>
<p>Voici la liste complète des valeurs de <code>readyState</code> :
</p>
<ul><li> 0 (non initialisée)
</li><li> 1 (en cours de chargement)
</li><li> 2 (chargée)
</li><li> 3 (en cours d'interaction)
</li><li> 4 (terminée)
</li></ul>
<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Source</a>)
</p><p>La seconde chose à vérifier est le code d'état HTTP de la réponse du serveur. Tous les codes possibles sont listés sur le <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">site du W3C</a>. Dans notre cas, nous sommes seulement intéressés par une réponse <code>200 OK</code>.
</p>
<pre>if (http_request.status == 200) {
    // parfait !
} else {
    // il y a eu un problème avec la requête,
    // par exemple la réponse peut être un code 404 (Non trouvée) 
    // ou 500 (Erreur interne du serveur)
}
</pre>
<p>Maintenant que vous avez vérifié l'état de la requête et le code d'état HTTP de la réponse, vous pouvez faire ce que vous voulez des données envoyées par le serveur. Il existe deux manières d'accéder à ces données :
</p>
<ul><li> <code>http_request.responseText</code> – renvoie la réponse du serveur sous la forme d'une chaîne de texte
</li><li> <code>http_request.responseXML</code> – renvoie la réponse sous la forme d'un objet <code>XMLDocument</code> que vous pouvez parcourir à l'aide des fonctions DOM de JavaScript
</li></ul>
<h3 name=".C3.89tape_3_-_Un_exemple_simple"> Étape 3 - Un exemple simple </h3>
<p>Mettons tout cela ensemble et effectuons une requête HTTP simple. Notre JavaScript demandera un document HTML, <code>test.html</code>, qui contiendra le texte « Je suis un test. », et nous afficherons le contenu de ce fichier <code>test.html</code> dans un message <code>alert()</code>.
</p>
<pre>&lt;script type="text/javascript" language="javascript"&gt;

    function makeRequest(url) {

        var http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // Voir la note ci-dessous à propos de cette ligne
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { alertContents(http_request); };
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertContents(http_request) {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('Un problème est survenu avec la requête.');
            }
        }

    }
&lt;/script&gt;
&lt;span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')"&gt;
        Effectuer une requête
&lt;/span&gt;
</pre>
<p>Dans cet exemple :
</p>
<ul><li> L'utilisateur clique sur le lien « Effectuer une requête » dans le navigateur ;
</li><li> ceci appelle la fonction <code>makeRequest()</code> avec un paramètre – le nom <code>test.html</code> d'un fichier HTML situé dans le même répertoire ;
</li><li> la requête est faite et ensuite (<code>onreadystatechange</code>) l'exécution est passée à <code>alertContents()</code>;
</li><li> <code>alertContents()</code> vérifie si la réponse a été reçue et porte un code OK et affiche ensuite la contenu du fichier <code>test.html</code> dans un message <code>alert()</code>.
</li></ul>
<p>Vous pouvez <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">tester l'exemple</a> et <a class="external" href="http://www.w3clubs.com/mozdev/test.html">consulter le fichier de test</a>.
</p><p><b>Note</b> : La ligne <code>http_request.overrideMimeType('text/xml');</code> ci-dessus provoquera des erreurs dans la console JavaScript de Firefox 1.5b (comme documenté dans <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724">le bug 311724</a>) si la page appelée par XMLHttpRequest n'est pas du XML valide (par exemple s'il s'agit de texte simple).
</p><p>Si vous obtenez des erreurs de syntaxe ou de fichier mal formé sur ce navigateur, et que vous n'essayez pas de charger du contenu XML avec XMLHttpRequest, retirez simplement cette ligne de votre code.
</p><p><b>Note 2</b> : Si vous envoyez une requête vers un bout de code dynamique qui renvoie du XML, plutôt que vers un fichier XML statique, vous devez positionner certains en-têtes de réponse pour que votre page fonctionne non seulement avec Mozilla, mais aussi avec Internet Explorer. Si vous ne spécifiez pas l'en-tête <code>Content-Type: application/xml</code>, IE produira une erreur JavaScript 'Objet attendu' après la ligne à laquelle vous tenterez d'accéder à un élémentXML. Si vous ne spécifiez pas l'en-tête <code>Cache-Control: no-cache</code>, le navigateur mettra la réponse en cache et n'effectuera plus jamais la requête ultérieurement, ce qui peut faire du débogage un véritable défi
</p><p><b>Note 3</b> : Si la variable <code>http_request</code> est utilisée globalement, des appels concurrents à <code>makeRequest()</code> peuvent s'écraser l'un l'autre, provoquant un effet de <i>race condition</i>. On peut s'en prémunir en rendant la variable <code>http_request</code> locale à la fonction et en la passant en paramètre à la fonction <code>alertContent()</code>.
</p><p><b>Note 4</b> : Pour procéder à l'enregistrement de la fonction de callback <code>onreadystatechange</code>, aucun paramètre n'est permis :
</p>
<pre class="eval">http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (requêtes simultanées)
http_request.onreadystatechange = alertContents(http_request); //2 (ne fonctionne pas)
http_request.onreadystatechange = alertContents; //3 (variable globale)
</pre>
<p>La méthode 1 permet d'avoir plusieurs requêtes lancées simultanément, la méthode 2 ne fonctionnera pas, et la méthode 3 est utilisée si <code>http_request</code> est une variable globale.
</p>
<h3 name=".C3.89tape_4_-_Travailler_avec_des_r.C3.A9ponses_XML"> Étape 4 - Travailler avec des réponses XML </h3>
<p>Dans l'exemple précédent, après que la réponse à la requête HTTP ait été reçue, nous avons utilisé la propriété <code>reponseText</code> de l'objet de requête, et celle-ci renvoyait le contenu du fichier <code>test.html</code>. Essayons maintenant la propriété <code>responseXML</code>.
</p><p>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 :
</p>
<pre>&lt;?xml version="1.0" ?&gt;
&lt;root&gt;
    Je suis un test.
&lt;/root&gt;
</pre>
<p>Dans le script, il est juste nécessaire de remplacer la ligne de requête par :
</p>
<pre>...
onclick="makeRequest('test.xml')"&gt;
...
</pre>
<p>Ensuite, dans <code>alertContents()</code>, il faut remplacer la ligne affichant un message <code>alert(http_request.responseText);</code> par :
</p>
<pre>var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
</pre>
<p>De cette façon, nous avons pris l'objet <code>XMLDocument</code> donné par <code>responseXML</code> et nous avons utilisé des méthodes DOM pour accéder à certaines données contenues dans le document XML. Vous pouvez <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">consulter le fichier <code>test.xml</code></a> et  <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">le script mis à jour</a>.
</p><p>Pour plus d'information sur les méthodes DOM, consultez les documents sur <a class="external" href="http://www.mozilla.org/docs/dom/">l'implémentation de DOM dans Mozilla</a>.
</p><p><span class="comment">Catégories</span>
</p><p><span class="comment">Interwiki</span>
</p>{{ wiki.languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "zh-cn": "cn/AJAX/Getting_Started" } ) }}
Revenir à cette révision