diff options
Diffstat (limited to 'files/fr/web/api/xmlhttprequest')
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/abort_event/index.md | 125 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/index.md | 326 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/onreadystatechange/index.md | 55 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/open/index.md | 84 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/readystate/index.md | 130 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/response/index.md | 225 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/responsetext/index.md | 67 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/send/index.md | 133 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/setrequestheader/index.md | 66 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/status/index.md | 46 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/timeout/index.md | 47 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md | 766 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/withcredentials/index.md | 55 | ||||
| -rw-r--r-- | files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md | 54 |
14 files changed, 969 insertions, 1210 deletions
diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.md b/files/fr/web/api/xmlhttprequest/abort_event/index.md index 2c9738082e..ed306a8700 100644 --- a/files/fr/web/api/xmlhttprequest/abort_event/index.md +++ b/files/fr/web/api/xmlhttprequest/abort_event/index.md @@ -4,87 +4,44 @@ slug: Web/API/XMLHttpRequest/abort_event translation_of: Web/API/XMLHttpRequest/abort_event original_slug: Web/Events/abort_(ProgressEvent) --- -<p>L'événement <strong>abort</strong> est déclenché lorsque la progression a été interompue (Non causé par une erreur)</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/progress-events/">Progress</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>lengthComputable </code>{{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Specifies whether or not the total size of the transfer is known. Read only.</td> - </tr> - <tr> - <td><code>loaded</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td> - </tr> - <tr> - <td><code>total</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td> - </tr> - </tbody> -</table> - -<h2 id="Evénements_liés">Evénements liés</h2> - -<ul> - <li>{{event("loadstart")}}</li> - <li>{{event("progress")}}</li> - <li>{{event("error")}}</li> - <li>{{event("abort")}}</li> - <li>{{event("load")}}</li> - <li>{{event("loadend")}}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">Surveillance de la progression</a></li> -</ul> +L'événement **abort** est déclenché lorsque la progression a été interompue (Non causé par une erreur) + +## Informations générales + +- Spécification + - : [Progress](http://www.w3.org/TR/progress-events/) +- Interface + - : ProgressEvent +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : Element +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `lengthComputable `{{readonlyInline}} | {{jsxref("Boolean")}} | Specifies whether or not the total size of the transfer is known. Read only. | +| `loaded` {{readonlyInline}} | unsigned long (long) | The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only. | +| `total` {{readonlyInline}} | unsigned long (long) | The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only. | + +## Evénements liés + +- {{event("loadstart")}} +- {{event("progress")}} +- {{event("error")}} +- {{event("abort")}} +- {{event("load")}} +- {{event("loadend")}} + +## Voir aussi + +- [Surveillance de la progression](/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) diff --git a/files/fr/web/api/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/index.md index 3fed67ac6e..ef2a2c8481 100644 --- a/files/fr/web/api/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/index.md @@ -11,184 +11,148 @@ tags: - XMLHttpRequest translation_of: Web/API/XMLHttpRequest --- -<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div> - -<p>Les objets <code>XMLHttpRequest</code> (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.</p> - -<p><code>XMLHttpRequest</code> est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.</p> - -<p>{{InheritanceDiagram(650, 150)}}</p> - -<p>Malgré son nom, <code>XMLHttpRequest</code> peut être utilisé afin de récupérer tout type de données et pas uniquement du XML.</p> - -<p>Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveur</a> via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a> peuvent être une meilleure alternative.</p> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> - <dd>Le constructeur initialise un objet <code>XMLHttpRequest</code>. Il doit être appelé avant toute autre méthode.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> - <dd>Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) invoqué à chaque fois que l'attribut <code>readyState</code> change.</dd> - <dt>{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> - <dd>L'état de la requête sous la forme d'un <code>unsigned short</code>.</dd> - <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> - <dd>Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.</dd> - <dt>{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> - <dd>Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur <code>null</code> si la requête a échoué ou n'a pas encore été envoyée.</dd> - <dt>{{domxref("XMLHttpRequest.responseType")}}</dt> - <dd>Une valeur parmi une liste qui définit le type de réponse.</dd> - <dt>{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> - <dd>L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.</dd> - <dt>{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> - <dd>Un objet {{domxref("Document")}} qui contient la réponse de la requête ou <code>null</code> si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les <em>workers</em>.</dd> - <dt>{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> - <dd>Une valeur numérique <code>unsigned short</code> qui décrit le statut de la réponse à la requête.</dd> - <dt>{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> - <dd>Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("<code>200 OK</code>" plutôt que "<code>200</code>" par exemple).</dd> -</dl> - -<div class="note"> -<p><strong>Note :</strong> Selon la spécification HTTP/2 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">voir 8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1.</p> -</div> - -<dl> - <dt>{{domxref("XMLHttpRequest.timeout")}}</dt> - <dd>Un entier <code>unsigned long</code> qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.</dd> - <dt>{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> - <dd>Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}</dd> - <dt>{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> - <dd>Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'<em>upload</em>.</dd> - <dt>{{domxref("XMLHttpRequest.withCredentials")}}</dt> - <dd>Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes <code>Access-Control</code> d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.</dd> -</dl> - -<h3 id="Propriétés_non-standard">Propriétés non-standard</h3> - -<dl> - <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> - <dd>Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête.</dd> - <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> - <dd>Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation.</dd> - <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> - <dd>Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête.</dd> - <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> - <dd>Un booléen qui indique si l'objet représente une requête de service en arrière-plan.</dd> - <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> - <dd>Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript.</dd> - <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> - <dd><strong>Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22.</strong> Veuillez utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveurs</a> ou <a href="/fr/docs/Web/API/WebSockets_API">les web sockets</a> ou encore la propriété <code>responseText</code> des évènements de progression.</dd> -</dl> - -<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3> - -<p>Le gestionnaire <code>onreadystatechange</code>, comme propriété des instances <code>XMLHttpRequest</code>, est pris en charge par l'ensemble des navigateurs.</p> - -<p>D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). Voir le guide <a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Manipuler XMLHttpRequest</a>.</p> - -<p>La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes <code>on*</code>).</p> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("XMLHttpRequest.abort()")}}</dt> - <dd>Interrompt la requête si elle a déjà été envoyée.</dd> - <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> - <dd>Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur <code>null</code> si aucune réponse n'a été reçue.</dd> - <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> - <dd>Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou <code>null</code> si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse.</dd> - <dt>{{domxref("XMLHttpRequest.open()")}}</dt> - <dd>Initialise une requête. Cette méthode doit être utilisée par du code JavaScript.</dd> - <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> - <dd>Surcharge le type MIME renvoyé par le serveur.</dd> - <dt>{{domxref("XMLHttpRequest.send()")}}</dt> - <dd>Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée.</dd> - <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> - <dd>Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après <code>open()</code> mais avant<code>send()</code>.</dd> -</dl> - -<h3 id="Méthodes_non-standard">Méthodes non-standard</h3> - -<dl> - <dt>{{domxref("XMLHttpRequest.init()")}}</dt> - <dd>Initialise l'objet depuis pour une utilisation depuis du code C++.</dd> -</dl> - -<div class="warning"> - <p><strong>Attention :</strong> Cette méthode ne doit pas être appelée depuis du code JavaScript.</p> -</div> - -<dl> - <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> - <dd>Initialise une requête depuis du code natif. Voir la méthode <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> ci-avant pour initialiser une requête de façon standard en JavaSCript.</dd> - <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> - <dd>Une variante de <code>send()</code> afin d'envoyer des données binaires.</dd> -</dl> - -<h2 id="Évènements">Évènements</h2> - -<dl> - <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt> - <dd>Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire<br> - {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible.</dd> - <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt> - <dd>Se déclenche lorsqu'une requête a rencontré une erreur.<br> - Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible.</dd> - <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt> - <dd>Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible.</dd> - <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt> - <dd>Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}).<br> - Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible.</dd> - <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt> - <dd>Se déclenche lorsqu'une requête commence à charger des données.<br> - Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible.</dd> - <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt> - <dd>Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible.</dd> - <dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt> - <dd>Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('XMLHttpRequest')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>Standard évolutif, version la plus récente.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.XMLHttpRequest")}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("XMLSerializer")}} : sérialiser un arbre DOM en XML</li> - <li>Les tutoriels MDN sur <code>XMLHttpRequest</code>: - <ul> - <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Introduction à AJAX</a></li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">Manipuler le HTML avec XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/Fetch_API">L'API Fetch</a></li> - </ul> - </li> - <li><a href="https://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)</a></li> -</ul> +{{DefaultAPISidebar("XMLHttpRequest")}} + +Les objets `XMLHttpRequest` (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur. + +`XMLHttpRequest` est beaucoup utilisé par l'approche {{Glossary("AJAX")}}. + +{{InheritanceDiagram(650, 150)}} + +Malgré son nom, `XMLHttpRequest` peut être utilisé afin de récupérer tout type de données et pas uniquement du XML. + +Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser [les évènements serveur](/fr/docs/Web/API/Server-sent_events) via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les [WebSockets](/fr/docs/Web/API/WebSockets_API) peuvent être une meilleure alternative. + +## Constructeur + +- {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} + - : Le constructeur initialise un objet `XMLHttpRequest`. Il doit être appelé avant toute autre méthode. + +## Propriétés + +_Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}._ + +- {{domxref("XMLHttpRequest.onreadystatechange")}} + - : Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) invoqué à chaque fois que l'attribut `readyState` change. +- {{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}} + - : L'état de la requête sous la forme d'un `unsigned short`. +- {{domxref("XMLHttpRequest.response")}} {{readonlyinline}} + - : Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse. +- {{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}} + - : Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur `null` si la requête a échoué ou n'a pas encore été envoyée. +- {{domxref("XMLHttpRequest.responseType")}} + - : Une valeur parmi une liste qui définit le type de réponse. +- {{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}} + - : L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle. +- {{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}} + - : Un objet {{domxref("Document")}} qui contient la réponse de la requête ou `null` si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les _workers_. +- {{domxref("XMLHttpRequest.status")}} {{readonlyinline}} + - : Une valeur numérique `unsigned short` qui décrit le statut de la réponse à la requête. +- {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}} + - : Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("`200 OK`" plutôt que "`200`" par exemple). + +> **Note :** Selon la spécification HTTP/2 ([voir 8.1.2.4](https://http2.github.io/http2-spec/#rfc.section.8.1.2.4) [Response Pseudo-Header Fields](https://http2.github.io/http2-spec/#HttpResponse)), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1. + +- {{domxref("XMLHttpRequest.timeout")}} + - : Un entier `unsigned long` qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement. +- {{domxref("XMLHttpRequestEventTarget.ontimeout")}} + - : Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}} +- {{domxref("XMLHttpRequest.upload")}} {{readonlyinline}} + - : Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'_upload_. +- {{domxref("XMLHttpRequest.withCredentials")}} + - : Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes `Access-Control` d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation. + +### Propriétés non-standard + +- {{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}} + - : Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête. +- {{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}} + - : Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation. +- {{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}} + - : Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête. +- {{domxref("XMLHttpRequest.mozBackgroundRequest")}} + - : Un booléen qui indique si l'objet représente une requête de service en arrière-plan. +- {{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}} + - : Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript. +- {{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}} + - : **Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22.** Veuillez utiliser [les évènements serveurs](/fr/docs/Web/API/Server-sent_events) ou [les web sockets](/fr/docs/Web/API/WebSockets_API) ou encore la propriété `responseText` des évènements de progression. + +### Gestionnaires d'évènement + +Le gestionnaire `onreadystatechange`, comme propriété des instances `XMLHttpRequest`, est pris en charge par l'ensemble des navigateurs. + +D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (`onload`, `onerror`, `onprogress`, etc.). Voir le guide [Manipuler XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest). + +La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes `on*`). + +## Méthodes + +- {{domxref("XMLHttpRequest.abort()")}} + - : Interrompt la requête si elle a déjà été envoyée. +- {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} + - : Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur `null` si aucune réponse n'a été reçue. +- {{domxref("XMLHttpRequest.getResponseHeader()")}} + - : Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou `null` si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse. +- {{domxref("XMLHttpRequest.open()")}} + - : Initialise une requête. Cette méthode doit être utilisée par du code JavaScript. +- {{domxref("XMLHttpRequest.overrideMimeType()")}} + - : Surcharge le type MIME renvoyé par le serveur. +- {{domxref("XMLHttpRequest.send()")}} + - : Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée. +- {{domxref("XMLHttpRequest.setRequestHeader()")}} + - : Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après `open()` mais avant`send()`. + +### Méthodes non-standard + +- {{domxref("XMLHttpRequest.init()")}} + - : Initialise l'objet depuis pour une utilisation depuis du code C++. + +> **Attention :** Cette méthode ne doit pas être appelée depuis du code JavaScript. + +- {{domxref("XMLHttpRequest.openRequest()")}} + - : Initialise une requête depuis du code natif. Voir la méthode [`open()`](</en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()>) ci-avant pour initialiser une requête de façon standard en JavaSCript. +- {{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}} + - : Une variante de `send()` afin d'envoyer des données binaires. + +## Évènements + +- {{domxref("XMLHttpRequest/abort_event", "abort")}} + - : Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire + {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible. +- {{domxref("XMLHttpRequest/error_event", "error")}} + - : Se déclenche lorsqu'une requête a rencontré une erreur. + Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible. +- {{domxref("XMLHttpRequest/load_event", "load")}} + - : Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible. +- {{domxref("XMLHttpRequest/loadend_event", "loadend")}} + - : Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}). + Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible. +- {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}} + - : Se déclenche lorsqu'une requête commence à charger des données. + Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible. +- {{domxref("XMLHttpRequest/progress_event", "progress")}} + - : Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible. +- {{domxref("XMLHttpRequest/timeout_event", "timeout")}} + - : Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------- | ------------------------------------ | ------------------------------------------- | +| {{SpecName('XMLHttpRequest')}} | {{Spec2('XMLHttpRequest')}} | Standard évolutif, version la plus récente. | + +## Compatibilité des navigateurs + +{{Compat("api.XMLHttpRequest")}} + +## Voir aussi + +- {{domxref("XMLSerializer")}} : sérialiser un arbre DOM en XML +- Les tutoriels MDN sur `XMLHttpRequest`: + + - [Introduction à AJAX](/fr/docs/Web/Guide/AJAX/Premiers_pas) + - [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest) + - [Manipuler le HTML avec XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) + - [L'API Fetch](/fr/docs/Web/API/Fetch_API) + +- [HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)](https://www.html5rocks.com/en/tutorials/file/xhr2/) diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md index f1b8c7a69d..cafc71025b 100644 --- a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md +++ b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md @@ -3,57 +3,42 @@ title: XMLHttpRequest.onreadystatechange slug: Web/API/XMLHttpRequest/onreadystatechange translation_of: Web/API/XMLHttpRequest/onreadystatechange --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>Un <a href="/en-US/docs/Web/API/EventHandler"><code>EventHandler</code></a> qui réagit aux changements de <code>readyState</code>. Le callback est appelé dans le contexte du thread de rendu. La propriété <strong><code>XMLHttpRequest.onreadystatechange</code></strong> contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.</p> +Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`** contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée. -<div class="warning"> -<p><strong>Attention :</strong> Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.</p> -</div> +> **Attention :** Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre> + XMLHttpRequest.onreadystatechange = callback; -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<ul> - <li><code><em>callback</em></code> est la fonction exécutée lorsque <code>readyState</code> change.</li> -</ul> +- `callback` est la fonction exécutée lorsque `readyState` change. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">var xhr = new XMLHttpRequest(), +```js +var xhr = new XMLHttpRequest(), method = "GET", url = "https://developer.mozilla.org/"; -xhr.open(<em>method</em>, <em>url</em>, true); +xhr.open(method, url, true); xhr.onreadystatechange = function () { - if(xhr.readyState === 4 && xhr.status === 200) { + if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; -xhr.send();</pre> +xhr.send(); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | -<h2 id="Compatibilité_des_fureteurs">Compatibilité des fureteurs</h2> +## Compatibilité des fureteurs - - -<p>{{Compat("api.XMLHttpRequest.onreadystatechange")}}</p> +{{Compat("api.XMLHttpRequest.onreadystatechange")}} diff --git a/files/fr/web/api/xmlhttprequest/open/index.md b/files/fr/web/api/xmlhttprequest/open/index.md index 567982586c..dd8cb68bd5 100644 --- a/files/fr/web/api/xmlhttprequest/open/index.md +++ b/files/fr/web/api/xmlhttprequest/open/index.md @@ -3,67 +3,47 @@ title: XMLHttpRequest.open() slug: Web/API/XMLHttpRequest/open translation_of: Web/API/XMLHttpRequest/open --- -<div>{{APIRef('XMLHttpRequest')}}</div> +{{APIRef('XMLHttpRequest')}} -<p>La méthode <code><strong>open()</strong></code> de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.</p> +La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante. -<div class="note"> - <p><strong>Note :</strong> Appeler cette méthode pour une requête déjà active (pour laquelle une méthode <code>open()</code> a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}.</p> -</div> +> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>) -<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async)</var> -<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>) -<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>,<var> password</var>) -</pre> + XMLHttpRequest.open(method, url) + XMLHttpRequest.open(method, url, async) + XMLHttpRequest.open(method, url, async, user) + XMLHttpRequest.open(method, url, async, user, password) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>method</code></dt> - <dd>La méthode <a href="/en-US/docs/Web/HTTP/Methods">HTTP request </a> à utiliser telles que : <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, etc. Ignorée pour les URL non-HTTP(S).</dd> - <dt><code>url</code></dt> - <dd>Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.</dd> - <dt><code>async</code> {{optional_inline}}</dt> - <dd>Un booléen optionnel par défaut à <code>true</code>, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à <code>false</code>, la méthode <code>send()</code> ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à <code>true</code>, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut <code>multipart</code> est sur "true" aussi ou une exception sera levée. - <div class="note"> - <p><strong>Note :</strong> Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}.</p> - </div> - </dd> - <dt><code>user</code> {{optional_inline}}</dt> - <dd>Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd> - <dt><code>password</code> {{optional_inline}}</dt> - <dd>Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd> -</dl> +- `method` + - : La méthode [HTTP request ](/en-US/docs/Web/HTTP/Methods) à utiliser telles que : `"GET"`, `"POST"`, `"PUT"`, `"DELETE"`, etc. Ignorée pour les URL non-HTTP(S). +- `url` + - : Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête. +- `async` {{optional_inline}} -<h2 id="Spécificités">Spécificités</h2> + - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à `true`, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut `multipart` est sur "true" aussi ou une exception sera levée. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> + > **Note :** Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +- `user` {{optional_inline}} + - : Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`. +- `password` {{optional_inline}} + - : Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`. -<p>{{Compat("api.XMLHttpRequest.open")}}</p> +## Spécificités -<h2 id="Voir_aussi">Voir aussi</h2> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | -<ul> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li>Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}}</li> -</ul> +## Compatibilité des navigateurs + +{{Compat("api.XMLHttpRequest.open")}} + +## Voir aussi + +- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest) +- Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}} diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.md b/files/fr/web/api/xmlhttprequest/readystate/index.md index c500f0ede1..1cad0b72e9 100644 --- a/files/fr/web/api/xmlhttprequest/readystate/index.md +++ b/files/fr/web/api/xmlhttprequest/readystate/index.md @@ -3,65 +3,68 @@ title: XMLHttpRequest.readyState slug: Web/API/XMLHttpRequest/readyState translation_of: Web/API/XMLHttpRequest/readyState --- -<p>{{APIRef('XMLHttpRequest')}}</p> +{{APIRef('XMLHttpRequest')}} -<p>La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client <abbr>XHR</abbr> existe dans l'un des états suivants :</p> +La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client XHR existe dans l'un des états suivants : <table class="standard-table"> - <tbody> - <tr> - <td class="header">Value</td> - <td class="header">State</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>UNSENT</code></td> - <td>Le client a été créé. open() n'a pas encore été appelé.</td> - </tr> - <tr> - <td><code>1</code></td> - <td><code>OPENED</code></td> - <td><code>open()</code>a été appelé.</td> - </tr> - <tr> - <td><code>2</code></td> - <td><code>HEADERS_RECEIVED</code></td> - <td><code>send()</code> a été appelé, et les en-têtes et le statut sont disponibles.</td> - </tr> - <tr> - <td><code>3</code></td> - <td><code>LOADING</code></td> - <td>Téléchargement; <code>responseText</code> contient des données partielles.</td> - </tr> - <tr> - <td><code>4</code></td> - <td><code>DONE</code></td> - <td>L'opération est terminée.</td> - </tr> - </tbody> + <tbody> + <tr> + <td class="header">Value</td> + <td class="header">State</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td>Le client a été créé. open() n'a pas encore été appelé.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td><code>open()</code>a été appelé.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td> + <code>send()</code> a été appelé, et les en-têtes et le statut sont + disponibles. + </td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td> + Téléchargement; <code>responseText</code> contient des données + partielles. + </td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>L'opération est terminée.</td> + </tr> + </tbody> </table> -<dl> - <dt>UNSENT</dt> - <dd>Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée.</dd> - <dt>OPENED</dt> - <dd>La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a> et la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a> peut être appelée, ce qui lancera la récupération.</dd> - <dt>HEADERS_RECEIVED</dt> - <dd>send() a été appelé et les en-têtes de réponse ont été reçus</dd> - <dt>LOADING</dt> - <dd>Le corps de la réponse est en cours de réception. Si <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> is "text" ou une chaîne vide, <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> aura la réponse textuelle partielle au fur et à mesure de son chargement.</dd> - <dt>DONE</dt> - <dd>L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué.</dd> -</dl> +- UNSENT + - : Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée. +- OPENED + - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader) et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send) peut être appelée, ce qui lancera la récupération. +- HEADERS_RECEIVED + - : send() a été appelé et les en-têtes de réponse ont été reçus +- LOADING + - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text" ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement. +- DONE + - : L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué. -<div class="note"> -<p><strong>Note :</strong> Les noms des états sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE</code>, the names <code>READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) et <code>READYSTATE_COMPLETE</code> (4) sont utilisés.</p> -</div> +> **Note :** Les noms des états sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de `UNSENT`, `OPENED`,` HEADERS_RECEIVED`,` LOADING` and `DONE`, the names `READYSTATE_UNINITIALIZED` (0), `READYSTATE_LOADING` (1), `READYSTATE_LOADED` (2), `READYSTATE_INTERACTIVE` (3) et `READYSTATE_COMPLETE` (4) sont utilisés. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var xhr = new XMLHttpRequest(); +```js +var xhr = new XMLHttpRequest(); console.log('UNSENT', xhr.readyState); // readyState will be 0 xhr.open('GET', '/api', true); @@ -76,25 +79,14 @@ xhr.onload = function () { }; xhr.send(null); -</pre> +``` -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Statut</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest', '#states')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> +| Specification | Statut | Comment | +| -------------------------------------------------------- | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#states')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.XMLHttpRequest.readyState")}}</p> +{{Compat("api.XMLHttpRequest.readyState")}} diff --git a/files/fr/web/api/xmlhttprequest/response/index.md b/files/fr/web/api/xmlhttprequest/response/index.md index afbad2c4f1..d07b064c06 100644 --- a/files/fr/web/api/xmlhttprequest/response/index.md +++ b/files/fr/web/api/xmlhttprequest/response/index.md @@ -7,88 +7,112 @@ tags: - XMLHttpRequest translation_of: Web/API/XMLHttpRequest/response --- -<div>{{draft}}</div> - -<div>{{APIRef('XMLHttpRequest')}}</div> - -<div>La propriété <code>XMLHttpRequest.response</code> contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété <code>XMLHttpRequest.responseType</code>. La réponse ( <code>Value of response</code> ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si <code>responseType</code> est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état <em>loading</em> ), <code>response</code> peut contenir la réponse partielle.</div> - -<div> </div> +{{draft}}{{APIRef('XMLHttpRequest')}}La propriété `XMLHttpRequest.response` contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété `XMLHttpRequest.responseType`. La réponse ( `Value of response` ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si `responseType` est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état _loading_ ), `response` peut contenir la réponse partielle. <table class="standard-table"> - <tbody> - <tr> - <td class="header">Valeur de <code>responseType</code></td> - <td class="header">Type de donnée de la propriété <code>response</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td>{{domxref("DOMString")}} (valeur par défaut)</td> - </tr> - <tr> - <td><code>"arraybuffer"</code></td> - <td>{{domxref("ArrayBuffer")}}</td> - </tr> - <tr> - <td><code>"blob"</code></td> - <td>{{domxref("Blob")}}</td> - </tr> - <tr> - <td><code>"document"</code></td> - <td>{{domxref("Document")}}</td> - </tr> - <tr> - <td><code>"json"</code></td> - <td> - <p>Objet JavaScript depuis une réponse JSON.</p> - </td> - </tr> - <tr> - <td><code>"text"</code></td> - <td>{{domxref("DOMString")}}</td> - </tr> - <tr> - <td><code>"moz-blob"</code> {{non-standard_inline}}</td> - <td> - <p>Used by Firefox to allow retrieving partial {{domxref("Blob")}} data from progress events. This lets your progress event handler start processing data while it's still being received. {{gecko_minversion_inline("12.0")}}</p> - </td> - </tr> - <tr> - <td><code>"moz-chunked-text"</code>{{non-standard_inline}}</td> - <td> - <p>Similar to <code>"text"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p> - - <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p> - - <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p> - </td> - </tr> - <tr> - <td><code>"moz-chunked-arraybuffer"</code>{{non-standard_inline}}</td> - <td> - <p>Similar to <code>"arraybuffer"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p> - - <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p> - - <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p> - </td> - </tr> - <tr> - <td>"ms-stream"{{non-standard_inline}}</td> - <td> - <p>Indique que la réponse est une partie d'un téléchargement d'un flux (?). Supporté uniquement pour les requêtes des téléchargements et disponible uniquement dans Internet Explorer.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <td class="header">Valeur de <code>responseType</code></td> + <td class="header"> + Type de donnée de la propriété <code>response</code> + </td> + </tr> + <tr> + <td><code>""</code></td> + <td>{{domxref("DOMString")}} (valeur par défaut)</td> + </tr> + <tr> + <td><code>"arraybuffer"</code></td> + <td>{{domxref("ArrayBuffer")}}</td> + </tr> + <tr> + <td><code>"blob"</code></td> + <td>{{domxref("Blob")}}</td> + </tr> + <tr> + <td><code>"document"</code></td> + <td>{{domxref("Document")}}</td> + </tr> + <tr> + <td><code>"json"</code></td> + <td><p>Objet JavaScript depuis une réponse JSON.</p></td> + </tr> + <tr> + <td><code>"text"</code></td> + <td>{{domxref("DOMString")}}</td> + </tr> + <tr> + <td><code>"moz-blob"</code> {{non-standard_inline}}</td> + <td> + <p> + Used by Firefox to allow retrieving partial {{domxref("Blob")}} + data from progress events. This lets your progress event handler start + processing data while it's still being received. + {{gecko_minversion_inline("12.0")}} + </p> + </td> + </tr> + <tr> + <td><code>"moz-chunked-text"</code>{{non-standard_inline}}</td> + <td> + <p> + Similar to <code>"text"</code>, but is streaming. This means that the + value in <code>response</code> is only available during dispatch of + the <code>"progress"</code> event and only contains the data received + since the last <code>"progress"</code> event. + </p> + <p> + When <code>response</code> is accessed during a + <code>"progress"</code> event it contains a string with the data. + Otherwise it returns <code>null</code>. + </p> + <p> + This mode currently only works in Firefox. + {{gecko_minversion_inline("9.0")}} + </p> + </td> + </tr> + <tr> + <td> + <code>"moz-chunked-arraybuffer"</code>{{non-standard_inline}} + </td> + <td> + <p> + Similar to <code>"arraybuffer"</code>, but is streaming. This means + that the value in <code>response</code> is only available during + dispatch of the <code>"progress"</code> event and only contains the + data received since the last <code>"progress"</code> event. + </p> + <p> + When <code>response</code> is accessed during a + <code>"progress"</code> event it contains a string with the data. + Otherwise it returns <code>null</code>. + </p> + <p> + This mode currently only works in Firefox. + {{gecko_minversion_inline("9.0")}} + </p> + </td> + </tr> + <tr> + <td>"ms-stream"{{non-standard_inline}}</td> + <td> + <p> + Indique que la réponse est une partie d'un téléchargement d'un flux + (?). Supporté uniquement pour les requêtes des téléchargements et + disponible uniquement dans Internet Explorer. + </p> + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note:</strong> À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut <code>responseType</code> lors des requêtes synchrones. Cela renvoi l'erreur <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code>. Ce changement a été proposé au W3C afin d'être standardisé. </p> -</div> +> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé. -<h2 id="Example">Example</h2> +## Example -<pre class="brush: js">var url = 'somePage.html'; // une page locale +```js +var url = 'somePage.html'; // une page locale function load(url, callback) { var xhr = new XMLHttpRequest(); @@ -102,42 +126,27 @@ function load(url, callback) { xhr.open('GET', url, true); xhr.send(''); } +``` -</pre> +## Specifications -<h2 id="Specifications">Specifications</h2> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------- | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#the-response-attribute')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs + +{{Compat("api.XMLHttpRequest")}} -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Voir aussi -<div>{{Compat("api.XMLHttpRequest")}}</div> +- {{domxref("XMLSerializer")}} : Sérialisation d'un arbre DOM en XML +- Tutoriels MDN couvrant le `XMLHttpRequest` : -<h2 id="See_also">Voir aussi</h2> + - [Ajax — Pour commencer](/fr/docs/Web/Guide/AJAX/Getting_Started) + - [Utilisation de XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) + - [HTML dans XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) + - [Fetch API](/fr/docs/Web/API/Fetch_API) -<ul> - <li>{{domxref("XMLSerializer")}} : Sérialisation d'un arbre DOM en XML</li> - <li>Tutoriels MDN couvrant le <code>XMLHttpRequest</code> : - <ul> - <li><a href="/fr/docs/Web/Guide/AJAX/Getting_Started">Ajax — Pour commencer</a></li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/Fetch_API">Fetch API</a></li> - </ul> - </li> - <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> - <li>Directive Feature-Policy {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}}</li> -</ul> +- [HTML5 Rocks — New Tricks in XMLHttpRequest2](http://www.html5rocks.com/en/tutorials/file/xhr2/) +- Directive Feature-Policy {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}} diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.md b/files/fr/web/api/xmlhttprequest/responsetext/index.md index e9df4fd81a..5b78aee1da 100644 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.md +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.md @@ -3,34 +3,31 @@ title: XMLHttpRequest.responseText slug: Web/API/XMLHttpRequest/responseText translation_of: Web/API/XMLHttpRequest/responseText --- -<div>{{draft}}</div> +{{draft}}{{APIRef('XMLHttpRequest')}} -<div>{{APIRef('XMLHttpRequest')}}</div> +La lecture seule {{domxref("XMLHttpRequest")}} propriété **`responseText`** renvoie le texte reçu d'un serveur suite à l'envoi d'une requête. -<p>La lecture seule {{domxref("XMLHttpRequest")}} propriété <strong><code>responseText</code></strong> renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.</p> +## Syntax -<h2 id="Syntax">Syntax</h2> + var resultText = XMLHttpRequest.responseText; -<pre class="syntaxbox">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre> +### Value -<h3 id="Value">Value</h3> +A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}. -<p>A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du<code>XMLHttpRequest</code> ou <code>null</code> si la demande a échoué ou <code>""</code> si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}.</p> +Lors du traitement d'une requête asynchrone, la valeur de `responseText` reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues. -<p>Lors du traitement d'une requête asynchrone, la valeur de <code>responseText</code> reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues.</p> +Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (`4`), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 (`"OK"`). -<p>Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 (<code>"OK"</code>).</p> +### Exceptions -<h3 id="Exceptions">Exceptions</h3> +- `InvalidStateError` + - : Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur. -<dl> - <dt><code>InvalidStateError</code></dt> - <dd>Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur.</dd> -</dl> +## Example -<h2 id="Example">Example</h2> - -<pre class="brush: js">var xhr = new XMLHttpRequest(); +```js +var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); // If specified, responseType must be empty string or "text" @@ -45,27 +42,15 @@ xhr.onload = function () { } }; -xhr.send(null);</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.XMLHttpRequest.responseText")}}</p> +xhr.send(null); +``` + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------- | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | + +## Browser compatibility + +{{Compat("api.XMLHttpRequest.responseText")}} diff --git a/files/fr/web/api/xmlhttprequest/send/index.md b/files/fr/web/api/xmlhttprequest/send/index.md index 26f77bf14a..55257c79e2 100644 --- a/files/fr/web/api/xmlhttprequest/send/index.md +++ b/files/fr/web/api/xmlhttprequest/send/index.md @@ -15,62 +15,47 @@ tags: - send translation_of: Web/API/XMLHttpRequest/send --- -<div>{{APIRef('XMLHttpRequest')}}</div> +{{APIRef('XMLHttpRequest')}} -<p>La méthode {{domxref("XMLHttpRequest")}} <code><strong>send()</strong></code> envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.</p> +La méthode {{domxref("XMLHttpRequest")}} **`send()`** envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée. -<p><code>send()</code> accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre <code>body</code> est ignoré et le corps de la requête est fixé à <code>null</code>.</p> +`send()` accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre `body` est ignoré et le corps de la requête est fixé à `null`. -<p>Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" <code>Accept</code> avec le type <code>"*/*"</code> (tous types) est envoyé.</p> +Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" `Accept` avec le type `"*/*"` (tous types) est envoyé. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>XMLHttpRequest</var>.send(<var>body</var>) -</pre> + XMLHttpRequest.send(body) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>body</code> {{optional_inline}}</dt> - <dd>Le corps des données à envoyer dans la requête XHR. Cela peut être : - <ul> - <li>Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé.</li> - <li>Un <code>XMLHttpRequestBodyInit</code> , dont le which <a href="https://fetch.spec.whatwg.org/#bodyinit">standard </a><a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch</a> peut être un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet {{domxref("USVString")}} .</li> - <li><code>null</code></li> - </ul> - Si la valeur du corps n'est pas spécifiée, la valeur par défaut <code>null</code> est employée.</dd> -</dl> +- `body` {{optional_inline}} -<p>La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode <code>send()</code>.</p> + - : Le corps des données à envoyer dans la requête XHR. Cela peut être : -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé. + - Un `XMLHttpRequestBodyInit` , dont le which [standard ](https://fetch.spec.whatwg.org/#bodyinit)[Fetch](https://fetch.spec.whatwg.org/#bodyinit) peut être un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet {{domxref("USVString")}} . + - `null` -<p><code>undefined</code>.</p> + Si la valeur du corps n'est pas spécifiée, la valeur par défaut `null` est employée. -<h3 id="Exceptions">Exceptions</h3> +La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode `send()`. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Exception</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>InvalidStateError</code></td> - <td><code>send()</code> a déjà été invoquée pour la requête, et/ou celle-ci est incomplète.</td> - </tr> - <tr> - <td><code>NetworkError</code></td> - <td>Le type de ressource à récupérer est un <strong>BLOB</strong>, <em>(binary large object</em>) , et la méthode n'est pas <code>GET</code>.</td> - </tr> - </tbody> -</table> +### Valeur de retour -<h2 id="Exemple_GET">Exemple: GET</h2> +`undefined`. -<pre class="brush: js"><code>var xhr = new XMLHttpRequest(); +### Exceptions + +| Exception | Description | +| ------------------- | ---------------------------------------------------------------------------------------------------------- | +| `InvalidStateError` | `send()` a déjà été invoquée pour la requête, et/ou celle-ci est incomplète. | +| `NetworkError` | Le type de ressource à récupérer est un **BLOB**, _(binary large object_) , et la méthode n'est pas `GET`. | + +## Exemple: GET + +```js +var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); xhr.onload = function () { @@ -79,55 +64,41 @@ xhr.onload = function () { xhr.send(null); // xhr.send('string'); -</code>// <code>xhr.send(new Blob()); +// xhr.send(new Blob()); // xhr.send(new Int8Array()); -// xhr.send(document);</code> -</pre> +// xhr.send(document); +``` -<h2 id="Example_POST">Example: POST</h2> +## Example: POST -<pre class="brush: js"><code>var xhr = new XMLHttpRequest(); +```js +var xhr = new XMLHttpRequest(); xhr.open("POST", '/server', true); //Envoie les informations du header adaptées avec la requête xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { //Appelle une fonction au changement d'état. - if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { + if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { // Requête finie, traitement ici. } } -xhr.send("foo=bar&lorem=ipsum"); +xhr.send("foo=bar&lorem=ipsum"); // xhr.send(new Int8Array()); -// xhr.send(document);</code> -</pre> - -<h2 id="Spécificités">Spécificités</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specificité</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> - -<div>{{Compat("api.XMLHttpRequest.send")}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">L'utilisation de XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li> -</ul> +// xhr.send(document); +``` + +## Spécificités + +| Specificité | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | + +## Compatibilité navigateur + +{{Compat("api.XMLHttpRequest.send")}} + +## Voir aussi + +- [L'utilisation de XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest) +- [HTML dans XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md index ed3689fd8d..14381808cd 100644 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md @@ -3,62 +3,44 @@ title: XMLHttpRequest.setRequestHeader() slug: Web/API/XMLHttpRequest/setRequestHeader translation_of: Web/API/XMLHttpRequest/setRequestHeader --- -<div>{{APIRef('XMLHttpRequest')}}</div> +{{APIRef('XMLHttpRequest')}} -<p>La méthode <code><strong>setRequestHeader()</strong></code> de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode <code>setRequestHeader()</code>, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à <code>setRequestHeader()</code> dans une même requête, tout sera combiné au sein d'un même header.</p> +La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header. -<p>A chaque fois que vous appellez <code>setRequestHeader()</code>, son contenu est ajouté à la fin du header existant.</p> +A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. -<p>Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un <code>Accept</code> header avec le type <code>"*/*"</code> sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée.</p> +Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée. -<p>Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p> +Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. -<div class="note"> -<p><strong>Note:</strong> Dans certain cas, vous pourrez rencontrer l'erreur / exception "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur.</p> -</div> +> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur. -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox"><em>XMLHttpRequest</em>.setRequestHeader(<var>header</var>, <var>value</var>) -</pre> + XMLHttpRequest.setRequestHeader(header, value) -<h3 id="Paramètre">Paramètre</h3> +### Paramètre -<dl> - <dt><code>header</code></dt> - <dd>Le paramètre du header.</dd> - <dt><code>value</code></dt> - <dd>La valeur de ce paramètre.</dd> -</dl> +- `header` + - : Le paramètre du header. +- `value` + - : La valeur de ce paramètre. -<h3 id="Valeurs_de_retour">Valeurs de retour</h3> +### Valeurs de retour -<p><code>undefined</code>.</p> +`undefined`. -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | -<h2 id="Compatibilitée_avec_les_navigateurs">Compatibilitée avec les navigateurs</h2> +## Compatibilitée avec les navigateurs -<p>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</p> +{{Compat("api.XMLHttpRequest.setRequestHeader")}} -<h2 id="A_voir_aussi">A voir aussi</h2> +## A voir aussi -<ul> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> -</ul> +- [Using XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- [HTML in XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) diff --git a/files/fr/web/api/xmlhttprequest/status/index.md b/files/fr/web/api/xmlhttprequest/status/index.md index a6fe81eda6..9505f4cdf8 100644 --- a/files/fr/web/api/xmlhttprequest/status/index.md +++ b/files/fr/web/api/xmlhttprequest/status/index.md @@ -3,15 +3,16 @@ title: XMLHttpRequest.status slug: Web/API/XMLHttpRequest/status translation_of: Web/API/XMLHttpRequest/status --- -<div>{{APIRef('XMLHttpRequest')}}</div> +{{APIRef('XMLHttpRequest')}} -<p>La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest.</p> +La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest. -<p>Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest.</p> +Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var xhr = new XMLHttpRequest(); +```js +var xhr = new XMLHttpRequest(); console.log('UNSENT: ', xhr.status); xhr.open('GET', '/server'); @@ -35,34 +36,19 @@ xhr.send(); * LOADING: 200 * DONE: 200 */ -</pre> +``` -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Statut</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> +| Specification | Statut | Comment | +| ------------------------------------------------------------------------ | ------------------------------------ | ---------------------- | +| {{SpecName('XMLHttpRequest', '#the-status-attribute')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.XMLHttpRequest.status")}}</p> +{{Compat("api.XMLHttpRequest.status")}} -<p>Voir aussi</p> +Voir aussi -<ul> - <li>Liste des <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> +- Liste des [HTTP response codes](/en-US/docs/Web/HTTP/Response_codes) +- [HTTP](/en-US/docs/Web/HTTP) diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.md b/files/fr/web/api/xmlhttprequest/timeout/index.md index e3dc91ab6b..0303ef2825 100644 --- a/files/fr/web/api/xmlhttprequest/timeout/index.md +++ b/files/fr/web/api/xmlhttprequest/timeout/index.md @@ -10,21 +10,18 @@ tags: - XMLHttpRequest translation_of: Web/API/XMLHttpRequest/timeout --- -<div>{{APIRef('XMLHttpRequest')}}</div> +{{APIRef('XMLHttpRequest')}} -<p>La propriété <code><strong>XMLHttpRequest.timeout</strong></code> est un <code>unsigned long</code> (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de <em>timeout</em>. Lorsqu'une requête expire, un évènement <code><a href="/fr/docs/Web/API/XMLHttpRequest/timeout_event">timeout</a></code> est déclenché.</p> +La propriété **`XMLHttpRequest.timeout`** est un `unsigned long` (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de _timeout_. Lorsqu'une requête expire, un évènement [`timeout`](/fr/docs/Web/API/XMLHttpRequest/timeout_event) est déclenché. -<div class="note"> - <p><strong>Note :</strong> Pour un exemple, voir <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Utiliser la propriété <code>timeout</code> avec une requête asynchrone</a>.</p> -</div> +> **Note :** Pour un exemple, voir [Utiliser la propriété `timeout` avec une requête asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout). -<div class="note"> - <p><strong>Note :</strong> Ces délais d'expiration ne devraient pas être utilisés pour les requêtes <code>XMLHttpRequest</code> synchrones dans <a href="/fr/docs/Glossaire/Environnement_de_document">un environnement de document</a> : ils déclencheront une exception <code>InvalidAccessError</code>. On ne peut donc pas utiliser de <em>timeout</em> pour les requêtes synchrones avec une fenêtre parente.</p> -</div> +> **Note :** Ces délais d'expiration ne devraient pas être utilisés pour les requêtes `XMLHttpRequest` synchrones dans [un environnement de document](/fr/docs/Glossaire/Environnement_de_document) : ils déclencheront une exception `InvalidAccessError`. On ne peut donc pas utiliser de _timeout_ pour les requêtes synchrones avec une fenêtre parente. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">var xhr = new XMLHttpRequest(); +```js +var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); xhr.timeout = 2000; // durée en millisecondes @@ -37,29 +34,17 @@ xhr.ontimeout = function (e) { // Requête qui a expiré. On traite ce cas. }; -xhr.send(null);</pre> +xhr.send(null); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>Standard évolutif WHATWG</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------------ | +| {{SpecName('XMLHttpRequest', '#the-timeout-attribute')}} | {{Spec2('XMLHttpRequest')}} | Standard évolutif WHATWG | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.XMLHttpRequest.timeout")}}</p> +{{Compat("api.XMLHttpRequest.timeout")}} -<p>Pour Internet Explorer, la propriété <code>timeout</code> ne peut être définie qu'après avoir appelé la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/open">open()</a></code> et avant d'appeler la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/send">send()</a></code>.</p> +Pour Internet Explorer, la propriété `timeout` ne peut être définie qu'après avoir appelé la méthode [`open()`](/fr/docs/Web/API/XMLHttpRequest/open) et avant d'appeler la méthode [`send()`](/fr/docs/Web/API/XMLHttpRequest/send). diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md index a2d850ed5d..58391c951a 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -14,70 +14,65 @@ tags: translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest original_slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest --- +[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) 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 [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) 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><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 () { +```js +function reqListener () { console.log(this.responseText); } var oReq = new XMLHttpRequest(); oReq.onload = reqListener; oReq.open("get", "yourFile.txt", true); -oReq.send();</pre> +oReq.send(); +``` -<h2 id="Types_de_requêtes">Types de requêtes</h2> +## Types de requêtes -<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> +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 [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) 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 [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones. -<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> +> **Note :** 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. -<h2 id="Gérer_les_réponses">Gérer les réponses</h2> +## Gérer les réponses -<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> +Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) 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. -<h3 id="Analyser_et_manipuler_la_propriété_responseXML">Analyser et manipuler la propriété <code>responseXML</code></h3> +### Analyser et manipuler la propriété `responseXML` -<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> +Si vous utlisez `XMLHttpRequest `pour obtenir le contenu d'un fichier XML distant, la propriété `responseXML `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 : -<ol> - <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> +1. Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties. +2. Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript. +3. Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets. +4. Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.** +5. [RegExp ](/en-US/docs/JavaScript/Reference/Global_Objects/RegExp)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. -<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> +### Analyser et manipuler une propriété `responseText` contenant un document HTML -<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> +> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails. -<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> +Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` 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 : -<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">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> +1. Utiliser la propriété `XMLHttpRequest.responseXML`. +2. Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment. +3. [RegExp ](/en-US/docs/JavaScript/Reference/Global_Objects/RegExp)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. -<h2 id="Gérer_les_données_binaires">Gérer les données binaires</h2> +## Gérer les données binaires -<p>Bien que <code>XMLHttpRequest</code> est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable.</p> +Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable. -<pre class="brush:js">var oReq = new XMLHttpRequest(); +```js +var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); // récupérer les données non traitées comme une chaîne binaire oReq.overrideMimeType("text/plain; charset=x-user-defined"); /* ... */ -</pre> +``` -<p>La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">attributs responseType</a> qui permettent d'envoyer et de recevoir des données binaires plus facilement.</p> +La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement. -<pre class="brush:js">var oReq = new XMLHttpRequest(); +```js +var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; @@ -86,17 +81,18 @@ 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">Envoyer et recevoir des données binaires</a></p> +Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) -<h2 id="Surveiller_la_progression">Surveiller la progression</h2> +## Surveiller la progression -<p><code>XMLHttpRequest</code> fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite.</p> +`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite. -<p>Le support des évènements de progression DOM de <code>XMLHttpRequest</code> suit l'API web <a href="http://dev.w3.org/2006/webapi/progress/Progress.html">de spécifications des évènements de progression</a>: ils implémentent l'interface {{domxref("ProgressEvent")}}.</p> +Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}. -<pre class="brush:js">var oReq = new XMLHttpRequest(); +```js +var oReq = new XMLHttpRequest(); oReq.addEventListener("progress", updateProgress, false); oReq.addEventListener("load", transferComplete, false); @@ -127,19 +123,19 @@ function transferFailed(evt) { function transferCanceled(evt) { alert("Le transfert a été annulé par l'utilisateur."); -}</pre> +} +``` -<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> +Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. -<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> +> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés. -<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> +Le gestionnaire de progression, spécifié par la fonction `updateProgress()` 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 `total` et `loaded`. Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro. -<p>Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet <code>XMLHttpRequest</code> lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet <code>XMLHttpRequest.upload</code>, comme montré ci-dessous:</p> +Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous: -<pre class="brush:js">var oReq = new XMLHttpRequest(); +```js +var oReq = new XMLHttpRequest(); oReq.upload.addEventListener("progress", updateProgress, false); oReq.upload.addEventListener("load", transferComplete, false); @@ -147,115 +143,98 @@ oReq.upload.addEventListener("error", transferFailed, false); oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open(); -</pre> +``` -<div class="note"> - <p><strong>Note :</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</p> -</div> +> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. -<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> +> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953). -<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> -</div> +> **Note :** 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. -<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> -</div> +> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent. -<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> +Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` : -<pre class="brush:js">req.addEventListener("loadend", loadEnd, false); +```js +req.addEventListener("loadend", loadEnd, false); function loadEnd(e) { alert("Le transfert est terminé (même si l'on ne sait pas si ça a fonctionné ou pas)."); } -</pre> +``` -<p>Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement <code>loadend</code> event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé.</p> +Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé. -<h2 id="Envoyer_des_formulaires_et_uploader_des_fichiers">Envoyer des formulaires et uploader des fichiers</h2> +## Envoyer des formulaires et uploader des fichiers -<p>Les instances de <code>XMLHttpRequest</code> peuvent être utilisées pour envoyer des formulaires de deux façons :</p> +Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : -<ul> - <li>n'utiliser rien de plus qu'AJAX</li> - <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li> -</ul> +- n'utiliser rien de plus qu'AJAX +- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) -<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> +La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify). +La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante. -<h3 id="Rien_de_plus_que_XMLHttpRequest">Rien de plus que <code>XMLHttpRequest</code></h3> +### Rien de plus que `XMLHttpRequest` -<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> +Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**. -<h4 id="Une_brève_introduction_au_méthodes_de_submission">Une brève introduction au méthodes de submission</h4> +#### Une brève introduction au méthodes de submission -<p>Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières :</p> +Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières : -<ul> - <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>application/x-www-form-urlencoded</code> (par défaut);</li> - <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>text/plain</code>;</li> - <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>multipart/form-data</code>;</li> - <li>en utilisant la méthode <code>GET</code> (dans ce cas, l'attribut <code>enctype</code> sera ignoré).</li> -</ul> +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut); +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`; +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`; +- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré). -<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> +Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez : -<ul> - <li> - <p>Méthode: <code>POST</code>; Encodage: <code>application/x-www-form-urlencoded</code> (par défaut):</p> +- Méthode: `POST`; Encodage: `application/x-www-form-urlencoded` (par défaut): - <pre>Content-Type: application/x-www-form-urlencoded + Content-Type: application/x-www-form-urlencoded -foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> - </li> - <li> - <p>Méthode: <code>POST</code>; Encodage: <code>text/plain</code>:</p> + foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A - <pre>Content-Type: text/plain +- Méthode: `POST`; Encodage: `text/plain`: -foo=bar -baz=The first line. -The second line.</pre> - </li> - <li> - <p>Méthode: <code>POST</code>; Encodage: <code>multipart/form-data</code>:</p> + Content-Type: text/plain - <pre>Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + foo=bar + baz=The first line. + The second line. ------------------------------314911788813839 -Content-Disposition: form-data; name="foo" +- Méthode: `POST`; Encodage: `multipart/form-data`: -bar ------------------------------314911788813839 -Content-Disposition: form-data; name="baz" + Content-Type: multipart/form-data; boundary=---------------------------314911788813839 -The first line. -The second line. + -----------------------------314911788813839 + Content-Disposition: form-data; name="foo" ------------------------------314911788813839--</pre> - </li> -</ul> + bar + -----------------------------314911788813839 + Content-Disposition: form-data; name="baz" -<p>Si vous utilisez la méthode <code>GET</code> à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL :</p> + The first line. + The second line. -<pre>?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + -----------------------------314911788813839-- -<h4 id="Un_petit_framework_vanilla">Un petit framework vanilla</h4> +Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : -<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> + ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line. +#### Un petit framework vanilla -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Sending forms with pure AJAX &ndash; MDN</title> -<script type="text/javascript"> +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 _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**: + +```html +<!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with pure AJAX – MDN</title> +<script type="text/javascript"> "use strict"; @@ -269,8 +248,8 @@ The second line. if (!XMLHttpRequest.prototype.sendAsBinary) { XMLHttpRequest.prototype.sendAsBinary = function(sData) { var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); - for (var nIdx = 0; nIdx < nBytes; nIdx++) { - ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; } /* send as ArrayBufferView...: */ this.send(ui8Data); @@ -308,7 +287,7 @@ var AJAXSubmit = (function () { oAjaxReq.onload = ajaxSuccess; if (oData.technique === 0) { /* method is GET */ - oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); oAjaxReq.send(null); } else { /* method is POST */ @@ -321,13 +300,13 @@ var AJAXSubmit = (function () { } else { /* enctype is application/x-www-form-urlencoded or text/plain */ oAjaxReq.setRequestHeader("Content-Type", oData.contentType); - oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); } } } function processStatus (oData) { - if (oData.status > 0) { return; } + if (oData.status > 0) { return; } /* the form is now totally serialized! do something before sending it to the server... */ /* doSomething(oData); */ /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ @@ -342,27 +321,27 @@ var AJAXSubmit = (function () { function plainEscape (sText) { /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ - /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ - return sText.replace(/[\s\=\\]/g, "\\$&"); + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); } function SubmitRequest (oTarget) { var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; /* console.log("AJAXSubmit - Serializing form..."); */ - this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; this.receiver = oTarget.action; this.status = 0; this.segments = []; var fFilter = this.technique === 2 ? plainEscape : escape; - for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { oField = oTarget.elements[nItem]; if (!oField.hasAttribute("name")) { continue; } sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE" && oField.files.length > 0) { + if (sFieldType === "FILE" && oField.files.length > 0) { if (this.technique === 3) { /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { + for (nFile = 0; nFile < oField.files.length; nFile++) { oFile = oField.files[nFile]; oSegmReq = new FileReader(); /* (custom properties:) */ @@ -376,9 +355,9 @@ var AJAXSubmit = (function () { } } else { /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ - for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); } - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { /* field type is not FILE or is FILE but is empty */ this.segments.push( this.technique === 3 ? /* enctype is multipart/form-data */ @@ -398,104 +377,106 @@ var AJAXSubmit = (function () { })(); -</script> -</head> -<body> - -<h1>Sending forms with pure AJAX</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - Your name: <input type="text" name="user" /> - </p> - <p> - Your message:<br /> - <textarea name="message" cols="40" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> +</script> +</head> +<body> + +<h1>Sending forms with pure AJAX</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -</body> -</html></pre> - -<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 + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html> +``` + +Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*: + +```php +<?php /* register.php */ header("Content-type: text/plain"); @@ -517,35 +498,29 @@ if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } echo "\n\n:: Files received ::\n\n"; print_r($_FILES); +``` -</pre> - -<p>La syntaxe de ce script est la suivante:</p> +La syntaxe de ce script est la suivante: -<pre class="syntaxbox">AJAXSubmit(myForm);</pre> + AJAXSubmit(myForm); -<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> +> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) 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 **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs. -<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> +> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). 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 [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData). -<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> +> **Note :** La méthode non-strandard `sendAsBinary `est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard `send(Blob data)` peut être utilisée à la place. -<h3 id="Utiliser_les_objets_FormData">Utiliser les objets FormData</h3> +### Utiliser les objets FormData -<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> +Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. 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 `submit()` 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 [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code : -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Sending forms with FormData &ndash; MDN</title> -<script type="text/javascript"> +```html +<!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with FormData – MDN</title> +<script type="text/javascript"> "use strict"; function ajaxSuccess () { @@ -561,129 +536,131 @@ function AJAXSubmit (oFormElement) { oReq.send(new FormData(oFormElement)); } else { var oField, sFieldType, nFile, sSearch = ""; - for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { oField = oFormElement.elements[nItem]; if (!oField.hasAttribute("name")) { continue; } sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); } } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); oReq.send(null); } } -</script> -</head> -<body> - -<h1>Sending forms with FormData</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<p>The text/plain encoding is not supported by the FormData API.</p> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> +</script> +</head> +<body> + +<h1>Sending forms with FormData</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<p>The text/plain encoding is not supported by the FormData API.</p> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -</body> -</html></pre> - -<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> - -<pre class="brush: js">function getHeaderTime () { + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html> +``` + +> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés. + +## Récupérer la date de modification + +```js +function getHeaderTime () { alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ } var oReq = new XMLHttpRequest(); oReq.open("HEAD" /* utilisez HEAD seulement si vous ne voulez que les headers ! */, "mapage.html", true); oReq.onload = getHeaderTime; -oReq.send();</pre> +oReq.send(); +``` -<h3 id="Faire_quelque_chose_quand_la_date_de_dernière_modification_change">Faire quelque chose quand la date de dernière modification change</h3> +### Faire quelque chose quand la date de dernière modification change -<p>Créons deux fonctions:</p> +Créons deux fonctions: -<pre class="brush: js">function getHeaderTime () { +```js +function getHeaderTime () { var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); - if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { window.localStorage.setItem('lm_' + this.filepath, Date.now()); - isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); } } @@ -695,76 +672,81 @@ function ifHasChanged(sURL, fCallback) { oReq.filepath = sURL; oReq.onload = getHeaderTime; oReq.send(); -}</pre> +} +``` -<p>Test:</p> +Test: -<pre class="brush: js">/* Testons le fichier "mapage.html"... */ +```js +/* Testons le fichier "mapage.html"... */ 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"><code >document.lastModified</code></a>.</p> +Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified). -<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> +## Cross-site XMLHttpRequest -<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> +Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée. -<h2 id="Contourner_le_cache">Contourner le cache</h2> +## Contourner le cache -<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> +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 : -<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 -</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 -<p>Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache.</p> +Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache. -<p>Vous pouvez automatiquement ajuster les URL en utilisant le code suivant :</p> +Vous pouvez automatiquement ajuster les URL en utilisant le code suivant : -<pre class="brush:js">var oReq = new XMLHttpRequest(); +```js +var oReq = new XMLHttpRequest(); -oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); -oReq.send(null);</pre> +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); +oReq.send(null); +``` -<h2 id="Sécurité">Sécurité</h2> +## Sécurité -<p>{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}}</p> +{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}} -<p>{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}}</p> +{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}} -<p>La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP <code>Access-Control-Allow-Origin </code> dans la réponse du XMLHttpRequest.</p> +La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP `Access-Control-Allow-Origin `dans la réponse du XMLHttpRequest. -<h3 id="XMLHttpRequests_stoppées">XMLHttpRequests stoppées</h3> +### XMLHttpRequests stoppées -<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> +Si vous vous retrouvez avec une XMLHttpRequest ayant `status=0` et `statusText=null`, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été [`UNSENT`](http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent). Une cause probable est lorsque [l'origine `XMLHttpRequest` ](http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin) (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é. -<h2 id="Utiliser_XMLHttpRequest_depuis_un_module_JavaScript_un_composant_XPCOM">Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM</h2> +## Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM -<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> +Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. 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. -<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); -</pre> +```js +const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); +``` -<p>Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci :</p> +Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci : -<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] +```js +const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] .getService(Components.interfaces.nsIAppShellService) .hiddenDOMWindow; -var oReq = new XMLHttpRequest();</pre> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ol> - <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="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li> -</ol> +var oReq = new XMLHttpRequest(); +``` + +## Voir aussi + +1. [MDN AJAX introduction](/en-US/docs/AJAX/Getting_Started) +2. [HTTP access control](/en-US/docs/HTTP_access_control) +3. [How to check the security state of an XMLHTTPRequest over SSL](/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL) +4. [XMLHttpRequest - REST and the Rich User Experience](http://www.peej.co.uk/articles/rich-user-experience.html) +5. [Microsoft documentation](http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp) +6. [Apple developers' reference](http://developer.apple.com/internet/webcontent/xmlhttpreq.html) +7. ["Using the XMLHttpRequest Object" (jibbering.com)](http://jibbering.com/2002/4/httprequest.html) +8. [The XMLHttpRequest Object: W3C Specification](http://www.w3.org/TR/XMLHttpRequest/) +9. [Web Progress Events specification](http://dev.w3.org/2006/webapi/progress/Progress.html) +10. [XMLHttpRequest (Référence Web API)](/fr/docs/Web/API/XMLHttpRequest) diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.md b/files/fr/web/api/xmlhttprequest/withcredentials/index.md index 62aa08feb7..5213b59e9d 100644 --- a/files/fr/web/api/xmlhttprequest/withcredentials/index.md +++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.md @@ -9,46 +9,33 @@ tags: - XMLHttpRequest translation_of: Web/API/XMLHttpRequest/withCredentials --- -<div>{{APIRef('XMLHttpRequest')}}</div> +{{APIRef('XMLHttpRequest')}} -<p>La propriété <code><strong>XMLHttpRequest.withCredentials</strong></code> est un booléen qui indique si une requête <code>Access-Control</code> entre plusieurs sites devrait être réalisée avec des informations d'authentification (<em>credentials</em>) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer <code>withCredentials</code> n'aura aucun impact sur les requêtes effectuées sur un même site.</p> +La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site. -<p>Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à <code>false</code>. Une requête <code>XMLHttpRequest</code> d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que <code>withCredentials</code> vaille <code>true</code> avant la requête.</p> +Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête. -<p>Les cookies tiers obtenus lorsque <code>withCredentials</code> vaut <code>true</code> continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via <code><a href="/fr/docs/Web/API/Document/cookie">document.cookie</a></code> ou depuis les en-têtes de la réponse.</p> +Les cookies tiers obtenus lorsque `withCredentials` vaut `true` continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via [`document.cookie`](/fr/docs/Web/API/Document/cookie) ou depuis les en-têtes de la réponse. -<div class="note"> -<p><strong>Note :</strong> Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site.</p> -</div> +> **Note :** Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site. -<div class="note"> -<p><strong>Note :</strong> Les réponses<strong> </strong><code>XMLHttpRequest</code> provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir <code>withCredentials</code> à <code>true</code> avant l'envoi de la requête (quelle que soit la valeur de l'en-tête <code>Access-Control-</code>).</p> -</div> +> **Note :** Les réponses\*\* \*\*`XMLHttpRequest` provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir `withCredentials` à `true` avant l'envoi de la requête (quelle que soit la valeur de l'en-tête `Access-Control-`). -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">var xhr = new XMLHttpRequest(); +```js +var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/', true); xhr.withCredentials = true; -xhr.send(null);</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.XMLHttpRequest.withCredentials")}}</p> +xhr.send(null); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | +| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.XMLHttpRequest.withCredentials")}} diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md index 0e708d3463..d41ee31f3a 100644 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md @@ -15,48 +15,42 @@ tags: - XMLHttpRequest translation_of: Web/API/XMLHttpRequest/XMLHttpRequest --- -<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div> +{{draft}}{{APIRef('XMLHttpRequest')}} -<p>Le constructeur <code><strong>XMLHttpRequest()</strong></code> crée une nouvelle instance {{domxref("XMLHttpRequest")}}.</p> +Le constructeur **`XMLHttpRequest()`** crée une nouvelle instance {{domxref("XMLHttpRequest")}}. -<p>Pour plus de détails sur l'utilisation de <code>XMLHttpRequest</code>, voir <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> +Pour plus de détails sur l'utilisation de `XMLHttpRequest`, voir [Using XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(); -</pre> + const request = new XMLHttpRequest(); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>Aucun.</p> +Aucun. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur.</p> +Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur. -<h2 id="La_syntaxe_de_Firefox_non-standard">La syntaxe de Firefox non-standard</h2> +## La syntaxe de Firefox non-standard -<p>Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau <code>mozAnon</code> à <code>true</code> revient à être identique au constructeur <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest"><code>AnonXMLHttpRequest()</code></a> décrit dans de vieilles versions des specifications de XMLHttpRequest.</p> +Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des specifications de XMLHttpRequest. -<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre> + const request = new XMLHttpRequest(paramsDictionary); -<h3 id="Paramètres_non_standard">Paramètres (non standard)</h3> +### Paramètres (non standard) -<dl> - <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt> - <dd>Il y a deux drapeaux qui peuvent être activés - <dl> - <dt><code>mozAnon</code></dt> - <dd>Booléen: Mettre ce drapeau à <code>true</code> évitera au navigateur d'exposer le {{Glossary("origin")}} and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials">credentials de l'utilisateur</a> lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.</dd> - <dt><code>mozSystem</code></dt> - <dd>Booléen: Mettre ce drapeau à <code>true</code> autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. <em>Paramètre requis </em>:<em> <code>mozAnon: true</code>, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox</em></dd> - </dl> - </dd> -</dl> +- `objParameters` {{gecko_minversion_inline("16.0")}} -<h2 id="Voir_aussi">Voir aussi</h2> + - : Il y a deux drapeaux qui peuvent être activés -<ul> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li> -</ul> + - `mozAnon` + - : Booléen: Mettre ce drapeau à `true` évitera au navigateur d'exposer le {{Glossary("origin")}} and [credentials de l'utilisateur](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials) lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader. + - `mozSystem` + - : Booléen: Mettre ce drapeau à `true` autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. _Paramètre requis_ :_ `mozAnon: true`, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox_ + +## Voir aussi + +- [Utiliser XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- [HTML dans XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) |