diff options
Diffstat (limited to 'files/fr/web/guide/ajax/getting_started/index.html')
| -rw-r--r-- | files/fr/web/guide/ajax/getting_started/index.html | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/files/fr/web/guide/ajax/getting_started/index.html b/files/fr/web/guide/ajax/getting_started/index.html index 703af2bb55..9aa61def8d 100644 --- a/files/fr/web/guide/ajax/getting_started/index.html +++ b/files/fr/web/guide/ajax/getting_started/index.html @@ -8,7 +8,7 @@ original_slug: Web/Guide/AJAX/Premiers_pas --- <p>Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.</p> -<h3 id="Pr.C3.A9sentation_d.27AJAX" name="Pr.C3.A9sentation_d.27AJAX">Présentation d’AJAX</h3> +<h3 id="Pr.C3.A9sentation_d.27AJAX">Présentation d’AJAX</h3> <p>AJAX est un raccourci pour <em><strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML</em> (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet <code><a href="/fr/XMLHttpRequest" title="fr/XMLHttpRequest">XMLHttpRequest</a></code> 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.</p> @@ -19,7 +19,7 @@ original_slug: Web/Guide/AJAX/Premiers_pas <li>recevoir et travailler avec des données provenant du serveur.</li> </ul> -<h3 id=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP" name=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Étape 1 — Lancement d’une requête HTTP</h3> +<h3 id=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Étape 1 — Lancement d’une requête HTTP</h3> <p>Pour faire une requête <a href="/HTTP">HTTP</a> vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que <code>XMLHttpRequest</code> intervient. Son prédécesseur est originaire de 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 un objet <code>XMLHttpRequest</code> 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.</p> @@ -31,8 +31,8 @@ else if (window.ActiveXObject) { // IE 6 et antérieurs httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }</pre> -<div class="blockIndicator note"> -<p><strong>Note :</strong> 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.</p> +<div class="note"> +<p><strong>Note :</strong> 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.</p> </div> <p>Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet <code>httpRequest</code> le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété <code>onreadystatechange</code> de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :</p> @@ -68,7 +68,7 @@ httpRequest.send();</pre> <pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); </pre> -<h3 id=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur" name=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur">Étape 2 — Gestion de la réponse du serveur</h3> +<h3 id=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur">Étape 2 — Gestion de la réponse du serveur</h3> <p>Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.</p> @@ -112,7 +112,7 @@ httpRequest.send();</pre> <p>Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’<code>open()</code> n’a pas été spécifié, ou a été défini à <code>true</code>). Si vous utilisez une requête <strong>synchrone,</strong> 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.</p> -<h3 id=".C3.89tape_3_.E2.80.94_Un_exemple_simple" name=".C3.89tape_3_.E2.80.94_Un_exemple_simple">Étape 3 — Un exemple simple</h3> +<h3 id=".C3.89tape_3_.E2.80.94_Un_exemple_simple">Étape 3 — Un exemple simple</h3> <p>Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, <code>test.html</code>, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message <code>alert()</code>. 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.</p> @@ -156,16 +156,16 @@ httpRequest.send();</pre> <li><code>alertContents()</code> vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier <code>test.html</code> dans un message <code>alert()</code>.</li> </ul> -<div class="blockIndicator note"> -<p><strong>Note :</strong> 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 <code>Content-Type: application/xml</code>, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.</p> +<div class="note"> +<p><strong>Note :</strong> 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 <code>Content-Type: application/xml</code>, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note 2 :</strong> 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 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 <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache">contourner le cache</a>).</p> +<div class="note"> +<p><strong>Note :</strong> 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 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 <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache">contourner le cache</a>).</p> </div> -<div class="blockIndicator note"> -<p><strong>Note 3 :</strong> Si la variable <code>httpRequest</code> est utilisée globalement, des appels concurrents à <code>makeRequest()</code> peuvent s’écraser l’un l’autre, provoquant une situation de compétition <em>(race condition</em>). On peut s’en prémunir en déclarant la variable <code>httpRequest</code> locale à une <a href="/fr/docs/Web/JavaScript/Closures">closure</a> contenant les fonctions AJAX.</p> +<div class="note"> +<p><strong>Note :</strong> Si la variable <code>httpRequest</code> est utilisée globalement, des appels concurrents à <code>makeRequest()</code> peuvent s’écraser l’un l’autre, provoquant une situation de compétition <em>(race condition</em>). On peut s’en prémunir en déclarant la variable <code>httpRequest</code> locale à une <a href="/fr/docs/Web/JavaScript/Closures">closure</a> contenant les fonctions AJAX.</p> </div> <p>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 <code>onreadystatechange</code> lors de l’accès à la propriété <code>status</code>. Pour atténuer ce problème, vous pouvez entourer votre bloc <code>if...then</code> dans un <code>try...catch</code> :</p> @@ -185,9 +185,9 @@ httpRequest.send();</pre> } }</pre> -<h3 id=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML" name=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML">Étape 4 — Travailler avec des réponses XML</h3> +<h3 id=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML">Étape 4 — Travailler avec des réponses XML</h3> -<p class="brush: xml">Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété <code>responseText</code> de l’objet, qui contenait le contenu du fichier <code>test.html</code>. Essayons maintenant la propriété <code>responseXML</code>.</p> +<p>Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété <code>responseText</code> de l’objet, qui contenait 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 (<code>test.xml</code>) contient ce qui suit :</p> @@ -213,9 +213,9 @@ alert(root_node.firstChild.data); <p>Ce code prend l’objet <code>XMLDocument</code> donné par <code>responseXML</code> et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.</p> -<p><span class="comment">Catégories</span></p> +<p>Catégories</p> -<p><span class="comment">Interwiki</span></p> +<p>Interwiki</p> <h3 id="Étape_5_–_Manipuler_les_données">Étape 5 – Manipuler les données</h3> @@ -226,7 +226,7 @@ alert(root_node.firstChild.data); <pre class="brush: html"><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></pre> |