diff options
Diffstat (limited to 'files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html')
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html | 98 |
1 files changed, 56 insertions, 42 deletions
diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 3590d71a4c..a2d850ed5d 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -14,9 +14,8 @@ tags: translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest original_slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest --- -<p> </p> -<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">status HTTP</a> du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.</p> +<p><a href="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le <a href="/en-US/docs/HTTP/HTTP_response_codes">status HTTP</a> du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.</p> <pre class="brush: js">function reqListener () { console.log(this.responseText); @@ -29,36 +28,40 @@ oReq.send();</pre> <h2 id="Types_de_requêtes">Types de requêtes</h2> -<p>Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel <span style="font-family: courier new,andale mono,monospace; line-height: normal;">async</span> (le troisième argument) qui est mis sur la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> XMLHttpRequest (). Si cet argument est <span style="font-family: courier new,andale mono,monospace; line-height: normal;">true</span> ou non spécifié, l'objet <span style="font-family: courier new,andale mono,monospace; line-height: normal;">XMLHttpRequest</span> est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" style="text-decoration: underline;" title="Synchronous and Asynchronous Requests">requêtes synchrones et asynchrones</a>. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.</p> +<p>Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#open()">open()</a> XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">requêtes synchrones et asynchrones</a>. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.</p> -<div class="note"><strong>Note:</strong> A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.</div> +<div class="note"> + <p><strong>Note :</strong> A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.</p> +</div> <h2 id="Gérer_les_réponses">Gérer les réponses</h2> -<p><span style="line-height: 1.5;">Il existe plusieurs types </span><a href="http://www.w3.org/TR/XMLHttpRequest2/#response">d'attributs de réponse</a><span style="line-height: 1.5;"> définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.</span></p> +<p>Il existe plusieurs types <a href="http://www.w3.org/TR/XMLHttpRequest2/#response">d'attributs de réponse</a> définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.</p> <h3 id="Analyser_et_manipuler_la_propriété_responseXML">Analyser et manipuler la propriété <code>responseXML</code></h3> <p>Si vous utlisez <code>XMLHttpRequest </code>pour obtenir le contenu d'un fichier XML distant, la propriété <code>responseXML </code>sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :</p> <ol> - <li>Utiliser <a href="/en-US/docs/XPath" title="XPath">XPath</a> pour localiser des parties.</li> - <li>Utiliser <a href="/en-US/docs/JXON" title="JXON">JXON</a> pour le convertir en Objet structuré JavaScript.</li> - <li>Manuellement <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">parser et serializer le XML</a> en chaînes de caractères ou en objets.</li> - <li>Utiliser <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> pour serializer <strong>le DOM en chaînes ou en fichiers.</strong></li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> + <li>Utiliser <a href="/en-US/docs/XPath">XPath</a> pour localiser des parties.</li> + <li>Utiliser <a href="/en-US/docs/JXON">JXON</a> pour le convertir en Objet structuré JavaScript.</li> + <li>Manuellement <a href="/en-US/docs/Parsing_and_serializing_XML">parser et serializer le XML</a> en chaînes de caractères ou en objets.</li> + <li>Utiliser <a href="/en-US/docs/XMLSerializer">XMLSerializer</a> pour serializer <strong>le DOM en chaînes ou en fichiers.</strong></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> </ol> <h3 id="Analyser_et_manipuler_une_propriété_responseText_contenant_un_document_HTML">Analyser et manipuler une propriété <code>responseText</code> contenant un document HTML</h3> -<div class="note"><strong>Note:</strong> La spécification W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> autorise le HTML a être parsé via la propritété <code>XMLHttpRequest.responseXML</code>. Lisez l'article à propos du <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a> pour plus de détails.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> autorise le HTML a être parsé via la propritété <code>XMLHttpRequest.responseXML</code>. Lisez l'article à propos du <a href="/en-US/docs/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a> pour plus de détails.</p> +</div> <p>Si vous utilisez <code>XMLHttpRequest</code> pour récupérer le contenu d'une page HTML distante, la propriété <code>responseText</code> est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :</p> <ol> <li>Utiliser la propriété <code>XMLHttpRequest.responseXML</code>.</li> <li>Injecter le contenu dans le body d'un <a href="/en-US/docs/Web/API/DocumentFragment">fragment de document</a> via <code>fragment.body.innerHTML</code> et traverser le DOM du fragment.</li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans <span style="font-family: courier new,andale mono,monospace; line-height: normal;">responseText</span>. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans responseText. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> </ol> <h2 id="Gérer_les_données_binaires">Gérer les données binaires</h2> @@ -85,7 +88,7 @@ oReq.onload = function(e) { oReq.send(); </pre> -<p>Pour plus d'exemples, jettez un oeil à la page <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Envoyer et recevoir des données binaires</a></p> +<p>Pour plus d'exemples, jettez un oeil à la page <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Envoyer et recevoir des données binaires</a></p> <h2 id="Surveiller_la_progression">Surveiller la progression</h2> @@ -128,7 +131,9 @@ function transferCanceled(evt) { <p>Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une <code>XMLHttpRequest</code>.</p> -<div class="note"><strong>Note:</strong> Vous devez ajouter les écouteurs avant d'appeler <code>open()</code> sur la requête. Sinon, les évènements de progression ne seront pas lancés.</div> +<div class="note"> + <p><strong>Note :</strong> Vous devez ajouter les écouteurs avant d'appeler <code>open()</code> sur la requête. Sinon, les évènements de progression ne seront pas lancés.</p> +</div> <p>Le gestionnaire de progression, spécifié par la fonction <code>updateProgress()</code> dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs <code>total</code> et <code>loaded</code>. Cependant, si le champ <code>lengthComputable</code> est false, la taille totale est inconnue et sera zéro.</p> @@ -144,16 +149,20 @@ oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open(); </pre> -<div class="note"><strong>Note:</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</p> +</div> -<div class="note"><strong>Note</strong>: Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</p> +</div> <div class="note"> -<p><strong>Note:</strong> A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.</p> +<p><strong>Note :</strong> A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.</p> </div> <div class="note"> -<p><strong>Note:</strong> Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un <code>responseType</code> "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.</p> +<p><strong>Note :</strong> Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un <code>responseType</code> "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.</p> </div> <p>Une fonction peut aussi être appelée peu importe le status de fin de la requête (<code>abort</code>, <code>load</code>, ou <code>error</code>) en utilisant l'évènement <code>loadend</code> :</p> @@ -173,15 +182,15 @@ function loadEnd(e) { <ul> <li>n'utiliser rien de plus qu'AJAX</li> - <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li> + <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li> </ul> -<p>La <strong>seconde solution</strong> (utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiées</a>.<br> +<p>La <strong>seconde solution</strong> (utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiées</a>.<br> La <strong>première solution</strong> est plutôt la plus complexe, mais se prête à être plus flexible et puissante.</p> <h3 id="Rien_de_plus_que_XMLHttpRequest">Rien de plus que <code>XMLHttpRequest</code></h3> -<p>Envoyer des formulaires sans l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> ne demande rien de plus, si ce n'est l'API <a href="/en-US/docs/DOM/FileReader" style="line-height: 1.5;" title="/en-US/docs/DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.5;">, mais seulement </span><strong style="line-height: 1.5;">si vous voulez envoyer un fichier ou plus</strong><span style="line-height: 1.5;">.</span></p> +<p>Envoyer des formulaires sans l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> ne demande rien de plus, si ce n'est l'API <a href="/en-US/docs/DOM/FileReader"><code >FileReader</code></a>, mais seulement <strong>si vous voulez envoyer un fichier ou plus</strong>.</p> <h4 id="Une_brève_introduction_au_méthodes_de_submission">Une brève introduction au méthodes de submission</h4> @@ -194,7 +203,7 @@ function loadEnd(e) { <li>en utilisant la méthode <code>GET</code> (dans ce cas, l'attribut <code>enctype</code> sera ignoré).</li> </ul> -<p>Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">foo</code><span style="line-height: 1.5;"> et </span><code style="font-size: 14px;">baz</code><span style="line-height: 1.5;">. Si vous utilisez la méthode </span><code style="font-size: 14px;">POST</code><span style="line-height: 1.5;">, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :</span></p> +<p>Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées <code >foo</code> et <code >baz</code>. Si vous utilisez la méthode <code >POST</code>, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :</p> <ul> <li> @@ -216,7 +225,7 @@ The second line.</pre> <li> <p>Méthode: <code>POST</code>; Encodage: <code>multipart/form-data</code>:</p> - <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + <pre>Content-Type: multipart/form-data; boundary=---------------------------314911788813839 -----------------------------314911788813839 Content-Disposition: form-data; name="foo" @@ -240,7 +249,7 @@ The second line. <p>Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez <em>tout</em> dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en <em>pure</em> AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un <strong>framework complet (mais tout de même didactique)</strong>, qui est capable d'utiliser les quatres méthodes de <em>submit</em> , et aussi de <strong>transférer des fichiers</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> + <pre class="brush: html"><!doctype html> <html> <head> @@ -483,9 +492,8 @@ var AJAXSubmit = (function () { </body> </html></pre> -</div> -<p>Pour le tester, créez une page nommée <strong>register.php</strong> (qui est l'attribut <code>action</code> des formulaires d'exemple) et mettez y ce contenu <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimaliste</span></span></em>:</p> +<p>Pour le tester, créez une page nommée <strong>register.php</strong> (qui est l'attribut <code>action</code> des formulaires d'exemple) et mettez y ce contenu <em>minimaliste</em>:</p> <pre class="brush: php"><?php /* register.php */ @@ -516,17 +524,22 @@ print_r($_FILES); <pre class="syntaxbox">AJAXSubmit(myForm);</pre> -<div class="note"><strong>Note:</strong> Ce framework utilise l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement <strong>est une technique expérimentale</strong>. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.</div> +<div class="note"> + <p><strong>Note :</strong> Ce framework utilise l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement <strong>est une technique expérimentale</strong>. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.</p> +</div> -<div class="note"><strong>Note:</strong> La meilleure façon d'envoyer du contenu binaire est de passer par <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> en conjonction avec la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> et possiblement avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Mais dans la mesure où le but de ce script est de fonctionner avec des données <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chaînifiable</a>, nous avons utilisé la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> en conjonction avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</div> +<div class="note"> + <p><strong>Note :</strong> La meilleure façon d'envoyer du contenu binaire est de passer par <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob">Blobs</a> en conjonction avec la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29"><code>send()</code></a> et possiblement avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Mais dans la mesure où le but de ce script est de fonctionner avec des données <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chaînifiable</a>, nous avons utilisé la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29"><code>sendAsBinary()</code></a> en conjonction avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29"><code>readAsBinaryString()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</p> +</div> -<div class="note"><strong>Note:</strong> La méthode non-strandard <code>sendAsBinary </code>est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard <code>send(Blob data)</code> peut être utilisée à la place.</div> +<div class="note"> + <p><strong>Note :</strong> La méthode non-strandard <code>sendAsBinary </code>est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard <code>send(Blob data)</code> peut être utilisée à la place.</p> +</div> <h3 id="Utiliser_les_objets_FormData">Utiliser les objets FormData</h3> -<p>Le constructeur de <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de compiler des paires de clé/valeur à envoyer via <code>XMLHttpRequest</code>. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode <code>submit()</code> d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Utiliser les Objets FormData</a>. Pour des raisons didactiques seulement, nous postons ici <strong>une</strong> <strong>traduction</strong> <strong><a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">du précédent exemple</a> transformé pour utiliser l'API <code>FormData</code></strong>. Notez la brièveté du code :</p> +<p>Le constructeur de <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de compiler des paires de clé/valeur à envoyer via <code>XMLHttpRequest</code>. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode <code>submit()</code> d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utiliser les Objets FormData</a>. Pour des raisons didactiques seulement, nous postons ici <strong>une</strong> <strong>traduction</strong> <strong><a href="#A_little_vanilla_framework">du précédent exemple</a> transformé pour utiliser l'API <code>FormData</code></strong>. Notez la brièveté du code :</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> <pre class="brush: html"><!doctype html> <html> <head> @@ -642,9 +655,10 @@ function AJAXSubmit (oFormElement) { </body> </html></pre> -</div> -<div class="note"><strong>Note:</strong> Comme déjà dit, les objets<strong> {{domxref("FormData")}} ne sont pas des objets <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiables</a></strong>. Si vous voulez chainifier les données soumises, utilisez <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">l'exemple précédent en <em>pure</em>-AJAX</a>. Notez également que, bien que dans cet exemple il y a quelques champs <code>file</code> {{ HTMLElement("input") }}, <strong>quand vous soumettez un formulaire via l'API <code>FormData</code> vous n'avez pas besoin d'utiliser l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> également </strong>: les fichiers sont automatiquement chargés et transférés.</div> +<div class="note"> + <p><strong>Note :</strong> Comme déjà dit, les objets<strong> {{domxref("FormData")}} ne sont pas des objets <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiables</a></strong>. Si vous voulez chainifier les données soumises, utilisez <a href="#A_little_vanilla_framework">l'exemple précédent en <em>pure</em>-AJAX</a>. Notez également que, bien que dans cet exemple il y a quelques champs <code>file</code> {{ HTMLElement("input") }}, <strong>quand vous soumettez un formulaire via l'API <code>FormData</code> vous n'avez pas besoin d'utiliser l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> également </strong>: les fichiers sont automatiquement chargés et transférés.</p> +</div> <h2 id="Récupérer_la_date_de_modification">Récupérer la date de modification</h2> @@ -691,15 +705,15 @@ ifHasChanged("mapage.html", function (nModif, nVisit) { alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); });</pre> -<p>Si vous voulez savoir <strong>si la <em>page courante</em> a changée</strong>, lisez l'article à propos de la propriété <a href="/en-US/docs/Web/API/document.lastModified" style="line-height: 1.5;" title="/en-US/docs/Web/API/document.lastModified"><code style="font-size: 14px;">document.lastModified</code></a><span style="line-height: 1.5;">.</span></p> +<p>Si vous voulez savoir <strong>si la <em>page courante</em> a changée</strong>, lisez l'article à propos de la propriété <a href="/en-US/docs/Web/API/document.lastModified"><code >document.lastModified</code></a>.</p> <h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> -<p>Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, <code>XMLHttpRequest</code> fonctionnera. Sinon, une exception <code>INVALID_ACCESS_ERR</code> sera lancée.</p> +<p>Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard <a href="/en-US/docs/HTTP_access_control">Access Control for Cross-Site Requests</a> (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, <code>XMLHttpRequest</code> fonctionnera. Sinon, une exception <code>INVALID_ACCESS_ERR</code> sera lancée.</p> <h2 id="Contourner_le_cache">Contourner le cache</h2> -<p><span style="line-height: 1.572;">Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&" selon les cas. Par exemple :</span></p> +<p>Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&" selon les cas. Par exemple :</p> <pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 @@ -724,11 +738,11 @@ oReq.send(null);</pre> <h3 id="XMLHttpRequests_stoppées">XMLHttpRequests stoppées</h3> -<p>Si vous vous retrouvez avec une XMLHttpRequest ayant <code style="font-size: 14px;">status=0</code> et <code style="font-size: 14px;">statusText=null</code>, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été <code style="font-size: 14px;"><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. Une cause probable est lorsque <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="line-height: 1.5; text-decoration: underline; outline: dotted 1px; outline-offset: 0pt;">l'origine <code style="font-size: 14px;">XMLHttpRequest</code> </a><span style="line-height: 1.5;"> (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">. Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement </span><span style="line-height: 1.5;">"activate" </span><span style="line-height: 1.5;">de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.</span></p> +<p>Si vous vous retrouvez avec une XMLHttpRequest ayant <code >status=0</code> et <code >statusText=null</code>, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été <code ><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. Une cause probable est lorsque <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin">l'origine <code >XMLHttpRequest</code> </a> (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà open(). Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire open()) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement "activate" de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.</p> <h2 id="Utiliser_XMLHttpRequest_depuis_un_module_JavaScript_un_composant_XPCOM">Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM</h2> -<p>Instancier une <code>XMLHttpRequest</code> depuis un <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">module JavaScript</a> ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur <code>XMLHttpRequest()</code>. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.</p> +<p>Instancier une <code>XMLHttpRequest</code> depuis un <a href="/en-US/docs/JavaScript_code_modules/Using">module JavaScript</a> ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur <code>XMLHttpRequest()</code>. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.</p> <pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); </pre> @@ -743,14 +757,14 @@ var oReq = new XMLHttpRequest();</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ol> - <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li> - <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li> - <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> + <li><a href="/en-US/docs/AJAX/Getting_Started">MDN AJAX introduction</a></li> + <li><a href="/en-US/docs/HTTP_access_control">HTTP access control</a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li> <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li> <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li> </ol> |