Révision 12992 sur Premiers pas

  • Raccourci de la révision : AJAX/Premiers_pas
  • Titre de la révision : Premiers pas
  • ID de la révision : 12992
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire /* Qu'est-ce qu'AJAX ? */ nicer quotes
Étiquettes : 

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 de JavaScript qui existent depuis plusieurs 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 de JavaScript 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.
  • 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

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

Remember that when you were sending the request, you provided the name of a JavaScript function that is designed to handle the response.

http_request.onreadystatechange = nameOfTheFunction;

Let's see what this function should do. First, the function needs to check for the state of the request. If the state has the value of 4, that means that the full server response is received and it's OK for you to continue processing it.

if (http_request.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

The full list of the readyState values is as follows:

  • 0 (uninitialized)
  • 1 (loading)
  • 2 (loaded)
  • 3 (interactive)
  • 4 (complete)

(Source)

The next thing to check is the status code of the HTTP server response. All the possible codes are listed on the W3C site. For our purposes we are only interested in 200 OK response.

if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}

Now after you've checked the state of the request and the HTTP status code of the response, it's up to you to do whatever you want with the data the server has sent to you. You have two options to access that data:

  • http_request.responseText – will return the server response as a string of text
  • http_request.responseXML – will return the response as an XMLDocument object you can traverse using the JavaScript DOM functions

Étape 3 - Un exemple simple (à traduire)

Let's put it all together and do a simple HTTP request. Our JavaScript will request an HTML document, test.html, which contains the text "I'm a test." and then we'll alert() the contents of the test.html file.

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

    var http_request = false;

    function makeRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } 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('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = alertContents;
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertContents() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }

    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Make a request
</span>

In this example:

  • The user clicks the link "Make a request" in the browser;
  • This calls the makeRequest() function with a parameter – the name test.html of an HTML file in the same directory;
  • The request is made and then (onreadystatechange) the execution is passed to alertContents();
  • alertContents() checks if the response was received and it's an OK and then alert()s the contents of the test.html file.

You can test the example here and you can see the test file here.

Étape 4 - Travailler avec des réponses XML (à traduire)

In the previous example, after the response to the HTTP request was received, we used the reponseText property of the request object and it contained the contents of the test.html file. Now let's try the responseXML property.

First off, let's create a valid XML document that we'll request later on. The document (test.xml) contains the following:

<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

In the script we only need to change the request line with:

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

Then in alertContents() we need to replace the alert()-ing line alert(http_request.responseText); with:

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

This way we took the XMLDocument object given by responseXML and we used DOM methods to access some data contained in the XML document. You can see the test.xml here and the updated test script here.

For more on the DOM methods, be sure to check Mozilla's DOM implementation documents.

interwiki

catégorie

{{ wiki.languages( { "en": "en/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek" } ) }}

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 de JavaScript qui existent depuis plusieurs 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 de JavaScript 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>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><p><code>http_request.onreadystatechange = nomDeLaFonction;</code>
</p><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>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.
</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>
<h3 name=".C3.89tape_2_-_Gestion_de_la_r.C3.A9ponse_du_serveur"> Étape 2 - Gestion de la réponse du serveur </h3>
<p>Remember that when you were sending the request, you provided the name of a JavaScript function that is designed to handle the response. 
</p><p><code>http_request.onreadystatechange = nameOfTheFunction;</code>
</p><p>Let's see what this function should do. First, the function needs to check for the state of the request. If the state has the value of 4, that means that the full server response is received and it's OK for you to continue processing it. 
</p>
<pre>if (http_request.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}
</pre>
<p>The full list of the <code>readyState</code> values is as follows:
</p>
<ul><li> 0 (uninitialized)
</li><li> 1 (loading)
</li><li> 2 (loaded)
</li><li> 3 (interactive)
</li><li> 4 (complete)
</li></ul>
<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Source</a>)
</p><p>The next thing to check is the status code of the HTTP server response. All the possible codes are listed on the <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C site</a>. For our purposes we are only interested in <code>200 OK</code> response.
</p>
<pre>if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}
</pre>
<p>Now after you've checked the state of the request and the HTTP status code of the response, it's up to you to do whatever you want with the data the server has sent to you. You have two options to access that data:
</p>
<ul><li> <code>http_request.responseText</code> – will return the server response as a string of text
</li><li> <code>http_request.responseXML</code> – will return the response as an <code>XMLDocument</code> object you can traverse using the JavaScript DOM functions
</li></ul>
<h3 name=".C3.89tape_3_-_Un_exemple_simple_.28.C3.A0_traduire.29"> Étape 3 - Un exemple simple (à traduire) </h3>
<p>Let's put it all together and do a simple HTTP request. Our JavaScript will request an HTML document, <code>test.html</code>, which contains the text "I'm a test." and then we'll <code>alert()</code> the contents of the <code>test.html</code> file.
</p>
<pre>&lt;script type="text/javascript" language="javascript"&gt;

    var http_request = false;

    function makeRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } 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('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = alertContents;
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertContents() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }

    }
&lt;/script&gt;
&lt;span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')"&gt;
        Make a request
&lt;/span&gt;
</pre>
<p>In this example:
</p>
<ul><li> The user clicks the link "Make a request" in the browser;
</li><li> This calls the <code>makeRequest()</code> function with a parameter – the name <code>test.html</code> of an HTML file in the same directory;
</li><li> The request is made and then (<code>onreadystatechange</code>) the execution is passed to <code>alertContents()</code>;
</li><li> <code>alertContents()</code> checks if the response was received and it's an OK and then <code>alert()</code>s the contents of the <code>test.html</code> file.
</li></ul>
<p>You can test the example <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">here</a> and you can see the test file <a class="external" href="http://www.w3clubs.com/mozdev/test.html">here</a>. 
</p>
<h3 name=".C3.89tape_4_-_Travailler_avec_des_r.C3.A9ponses_XML_.28.C3.A0_traduire.29"> Étape 4 - Travailler avec des réponses XML (à traduire) </h3>
<p>In the previous example, after the response to the HTTP request was received, we used the <code>reponseText</code> property of the request object and it contained the contents of the <code>test.html</code> file. Now let's try the <code>responseXML</code> property.
</p><p>First off, let's create a valid XML document that we'll request later on. The document (test.xml) contains the following:
</p>
<pre>&lt;?xml version="1.0" ?&gt;
&lt;root&gt;
    I'm a test.
&lt;/root&gt;
</pre>
<p>In the script we only need to change the request line with:
</p>
<pre>...
onclick="makeRequest('test.xml)"&gt;
...
</pre>
<p>Then in <code>alertContents()</code> we need to replace the <code>alert()</code>-ing line <code>alert(http_request.responseText);</code> with:
</p>
<pre>var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
</pre>
<p>This way we took the <code>XMLDocument</code> object given by <code>responseXML</code> and we used DOM methods to access some data contained in the XML document. You can see the <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">here</a> and the updated test script <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">here</a>.
</p><p>For more on the DOM methods, be sure to check <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> documents.
</p><p><span class="comment">interwiki</span>
</p><p><span class="comment">catégorie</span>
</p>{{ wiki.languages( { "en": "en/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek" } ) }}
Revenir à cette révision