diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-16 17:52:18 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-16 17:52:18 +0100 |
commit | 500f444d23a7a758da229ebe6b9691cc5d4fe731 (patch) | |
tree | ca277561f7f3c5f2c9c3e80a895ac32f30852238 /files/fr/web/api/xmlhttprequest | |
parent | de831e4687986c3a60b9ced69ce9faefda8df4b9 (diff) | |
download | translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.gz translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.bz2 translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.zip |
Fix #4269 - Removes empty/special characters (#4270)
* Remove ufeff
* Remove u2064
* Remove u2062
* Replace u202f followed by : with :
* Replace u202f next to « or » with and « or »
* Replace u202f followed by ; with ;
* Replace u202f followed by ! with
* Replace u202f followed by ? with ?
* Replace remaining u202f with classical space
* Replace u200b surrounded by space with classical space
* Replace u200b surrounded by space with classical space - again (repeated)
* Remove remaining u200b
* Remove u200a
* Replace u2009 with
* Remove u00ad
* Replace u00a0 followed by : ! or ? with and punctuation
* Replace u00a0 surrounded « or » with and punctuation
* Replace u00a0 followed by whitespaces
* Replace u00a0 preceded by whitespaces
* Replace u00a0 followed by a newline with a newline
* Replace u00a0 followed by a newline with a newline - Take2
* Replace u00a0 followed by a ; and punctuation
* Remove u00a0 followed by ,
* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)
* Manual replacement of ([\u00a0])([ ]+)
* Replace remaining ([\u00a0]+) by a space
* cleaning empty elements
* remove ufe0f
* Remove u00a0 and u202f after merging against updated main
* remove double whitespace using (\w)( )(\w)
Diffstat (limited to 'files/fr/web/api/xmlhttprequest')
12 files changed, 361 insertions, 361 deletions
diff --git a/files/fr/web/api/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/index.md index ef2a2c8481..bbf78ebcb6 100644 --- a/files/fr/web/api/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/index.md @@ -83,7 +83,7 @@ Le gestionnaire `onreadystatechange`, comme propriété des instances `XMLHttpRe 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*`). +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 diff --git a/files/fr/web/api/xmlhttprequest/load_event/index.md b/files/fr/web/api/xmlhttprequest/load_event/index.md index 8d314127c3..1b9875fcef 100644 --- a/files/fr/web/api/xmlhttprequest/load_event/index.md +++ b/files/fr/web/api/xmlhttprequest/load_event/index.md @@ -14,7 +14,7 @@ The **`XMLHttpRequestEventTarget.onload`** is the function called when an {{domx ### Values -- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. +- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. ## Example diff --git a/files/fr/web/api/xmlhttprequest/open/index.md b/files/fr/web/api/xmlhttprequest/open/index.md index 0622599286..60f69ba432 100644 --- a/files/fr/web/api/xmlhttprequest/open/index.md +++ b/files/fr/web/api/xmlhttprequest/open/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/XMLHttpRequest/open La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante. -> **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()")}}. +> **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()")}}. ## Syntaxe @@ -24,9 +24,9 @@ La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle - : Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête. - `async` {{optional_inline}} - - : 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. + - : 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. - > **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")}}. + > **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")}}. - `user` {{optional_inline}} - : Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`. diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.md b/files/fr/web/api/xmlhttprequest/readystate/index.md index f453f7aa74..5564c8b433 100644 --- a/files/fr/web/api/xmlhttprequest/readystate/index.md +++ b/files/fr/web/api/xmlhttprequest/readystate/index.md @@ -51,11 +51,11 @@ La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve u - 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. + - : 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. + - : 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é. diff --git a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md index c9cf4293db..7f3216a653 100644 --- a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md +++ b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/XMLHttpRequest/onreadystatechange --- {{APIRef}} -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. +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. > **Attention :** Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif. @@ -28,8 +28,8 @@ var xhr = new XMLHttpRequest(), xhr.open(method, url, true); xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { - console.log(xhr.responseText); - } + console.log(xhr.responseText); + } }; xhr.send(); ``` diff --git a/files/fr/web/api/xmlhttprequest/response/index.md b/files/fr/web/api/xmlhttprequest/response/index.md index d07b064c06..89ff616f78 100644 --- a/files/fr/web/api/xmlhttprequest/response/index.md +++ b/files/fr/web/api/xmlhttprequest/response/index.md @@ -107,7 +107,7 @@ translation_of: Web/API/XMLHttpRequest/response </tbody> </table> -> **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é. +> **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é. ## Example @@ -115,16 +115,16 @@ translation_of: Web/API/XMLHttpRequest/response var url = 'somePage.html'; // une page locale function load(url, callback) { - var xhr = new XMLHttpRequest(); + var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - console.log(xhr.response); // Par défault une DOMString - } - } + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + console.log(xhr.response); // Par défault une DOMString + } + } xhr.open('GET', url, true); - xhr.send(''); + xhr.send(''); } ``` diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.md b/files/fr/web/api/xmlhttprequest/responsetext/index.md index 5b78aee1da..183f096c1a 100644 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.md +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.md @@ -13,7 +13,7 @@ La lecture seule {{domxref("XMLHttpRequest")}} propriété **`responseText`** re ### Value -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()")}}. +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()")}}. 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. diff --git a/files/fr/web/api/xmlhttprequest/send/index.md b/files/fr/web/api/xmlhttprequest/send/index.md index 1261f8a9b3..81d150e4ee 100644 --- a/files/fr/web/api/xmlhttprequest/send/index.md +++ b/files/fr/web/api/xmlhttprequest/send/index.md @@ -17,9 +17,9 @@ translation_of: Web/API/XMLHttpRequest/send --- {{APIRef('XMLHttpRequest')}} -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. +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. -`send()` accepte un paramètre optionnel 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`. +`send()` accepte un paramètre optionnel 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`. 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é. @@ -39,7 +39,7 @@ Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref(" Si la valeur du corps n'est pas spécifiée, la valeur par défaut `null` est employée. -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()`. +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()`. ### Valeur de retour diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md index 14381808cd..4b5b525ba4 100644 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/XMLHttpRequest/setRequestHeader --- {{APIRef('XMLHttpRequest')}} -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. +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. -A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. +A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. -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. +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. -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)}}. +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)}}. -> **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. +> **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. ## Syntax diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md index ef65aa1245..9c366f23af 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -14,11 +14,11 @@ 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. +[`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. ```js function reqListener () { - console.log(this.responseText); + console.log(this.responseText); } var oReq = new XMLHttpRequest(); @@ -29,37 +29,37 @@ oReq.send(); ## Types de requêtes -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. +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. > **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. ## Gérer les réponses -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. +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. -### Analyser et manipuler la propriété `responseXML` +### Analyser et manipuler la propriété `responseXML` Si vous utilisez `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 quatre moyens principaux d'analyser ce document XML : -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.** +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`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `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. -### Analyser et manipuler une propriété `responseText` contenant un document HTML +### Analyser et manipuler une propriété `responseText` contenant un document HTML -> **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. +> **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. -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 : +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 : -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. +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`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `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. ## Gérer les données binaires -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. +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. ```js var oReq = new XMLHttpRequest(); @@ -69,7 +69,7 @@ oReq.overrideMimeType("text/plain; charset=x-user-defined"); /* ... */ ``` -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. +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. ```js var oReq = new XMLHttpRequest(); @@ -77,19 +77,19 @@ var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; oReq.onload = function(e) { - var arraybuffer = oReq.response; // n'est pas responseText - /* ... */ + var arraybuffer = oReq.response; // n'est pas responseText + /* ... */ } oReq.send(); ``` -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) +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) ## Surveiller la progression -`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. +`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. -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")}}. +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")}}. ```js var oReq = new XMLHttpRequest(); @@ -105,12 +105,12 @@ oReq.open(); // progression des transferts depuis le serveur jusqu'au client (téléchargement) function updateProgress (oEvent) { - if (oEvent.lengthComputable) { - var percentComplete = oEvent.loaded / oEvent.total; - // ... - } else { - // Impossible de calculer la progression puisque la taille totale est inconnue - } + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total; + // ... + } else { + // Impossible de calculer la progression puisque la taille totale est inconnue + } } function transferComplete(evt) { @@ -126,13 +126,13 @@ function transferCanceled(evt) { } ``` -Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. +Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. -> **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. +> **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. -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. +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. -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: +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: ```js var oReq = new XMLHttpRequest(); @@ -145,15 +145,15 @@ oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open(); ``` -> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. +> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. -> **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). +> **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). -> **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. +> **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. -> **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. +> **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. -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` : +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` : ```js req.addEventListener("loadend", loadEnd, false); @@ -163,32 +163,32 @@ function loadEnd(e) { } ``` -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é. +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é. ## Envoyer des formulaires et uploader des fichiers -Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : +Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : - n'utiliser rien de plus qu'AJAX -- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) +- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) -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. +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. -### Rien de plus que `XMLHttpRequest` +### Rien de plus que `XMLHttpRequest` -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**. +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**. #### Une brève introduction au méthodes de submission Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières : -- 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é). +- 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é). -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 : +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 : - Méthode: `POST`; Encodage: `application/x-www-form-urlencoded` (par défaut): @@ -220,13 +220,13 @@ Maintenant, considérons qu'on envoie un formulaire contenant seulement deux cha -----------------------------314911788813839-- -Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : +Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line. #### Un petit framework vanilla -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**: +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> @@ -240,140 +240,140 @@ Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTML /*\ |*| -|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() \*/ 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; - } - /* send as ArrayBufferView...: */ - this.send(ui8Data); - /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ - }; + 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; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; } /*\ |*| -|*| :: AJAX Form Submit Framework :: +|*| :: AJAX Form Submit Framework :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest |*| |*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| -|*| Syntax: +|*| Syntax: |*| -|*| AJAXSubmit(HTMLFormElement); +|*| AJAXSubmit(HTMLFormElement); \*/ var AJAXSubmit = (function () { - function ajaxSuccess () { - /* console.log("AJAXSubmit - Success!"); */ - alert(this.responseText); - /* you can get the serialized data through the "submittedData" custom property: */ - /* alert(JSON.stringify(this.submittedData)); */ - } - - function submitData (oData) { - /* the AJAX request... */ - var oAjaxReq = new XMLHttpRequest(); - oAjaxReq.submittedData = oData; - 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.send(null); - } else { - /* method is POST */ - oAjaxReq.open("post", oData.receiver, true); - if (oData.technique === 3) { - /* enctype is multipart/form-data */ - var sBoundary = "---------------------------" + Date.now().toString(16); - oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); - oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); - } 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" : "&")); - } - } - } - - function processStatus (oData) { - 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..."); */ - submitData (oData); - } - - function pushSegment (oFREvt) { - this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; - this.owner.status--; - processStatus(this.owner); - } - - 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, "\\$&"); - } - - 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.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++) { - 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 (this.technique === 3) { - /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { - oFile = oField.files[nFile]; - oSegmReq = new FileReader(); - /* (custom properties:) */ - oSegmReq.segmentIdx = this.segments.length; - oSegmReq.owner = this; - /* (end of custom properties) */ - oSegmReq.onload = pushSegment; - this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); - this.status++; - oSegmReq.readAsBinaryString(oFile); - } - } 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))); - } - } 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 */ - "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" - : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ - fFilter(oField.name) + "=" + fFilter(oField.value) - ); - } - } - processStatus(this); - } - - return function (oFormElement) { - if (!oFormElement.action) { return; } - new SubmitRequest(oFormElement); - }; + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + alert(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* alert(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + 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.send(null); + else { + /* method is POST */ + oAjaxReq.open("post", oData. + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxR + oAjaxR + } 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" : "&")); + } + } + } + + function processStatus (oData) { + 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..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + 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, "\\$&"); + } + + 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.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++) { + 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 (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + 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))); + } + else if ((sFieldTyp + /* field type is no + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField + * enctype is application/x-www-form-urlencoded or + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; })(); @@ -386,94 +386,94 @@ var AJAXSubmit = (function () { <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> + <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> + <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> + <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 /> - What do you prefer: - <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> + <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 /> + What do you prefer: + <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> ``` -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*: +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 @@ -504,15 +504,15 @@ La syntaxe de ce script est la suivante: AJAXSubmit(myForm); -> **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. +> **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. -> **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). +> **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). > **Note :** La méthode non-standard `sendAsBinary` est dépréciée à partir de Gecko 31 et sera prochainement supprimée. La méthode standard `send(Blob data)` peut être utilisée à la place. ### Utiliser les objets FormData -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 : +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 : ```html <!doctype html> @@ -524,31 +524,31 @@ Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous p "use strict"; function ajaxSuccess () { - alert(this.responseText); + alert(this.responseText); } function AJAXSubmit (oFormElement) { - if (!oFormElement.action) { return; } - var oReq = new XMLHttpRequest(); - oReq.onload = ajaxSuccess; - if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action, true); - oReq.send(new FormData(oFormElement)); - } else { - var oField, sFieldType, nFile, sSearch = ""; - 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); - } - } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); - oReq.send(null); - } + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action, true); + oReq.send(new FormData(oFormElement)); + else { + var oField, sFieldType, nFile, sSearch = + for (var nItem = 0; nItem < oFormElement + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("na + sFieldType = oField.nodeName + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + esca + } + + + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } } </script> </head> @@ -559,32 +559,32 @@ function AJAXSubmit (oFormElement) { <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> + <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> + <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> @@ -594,51 +594,51 @@ function AJAXSubmit (oFormElement) { <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 /> - What do you prefer: - <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> + <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 /> + What do you prefer: + <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> ``` -> **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. +> **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 */ + alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ } var oReq = new XMLHttpRequest(); @@ -654,24 +654,24 @@ Créons deux fonctions: ```js function getHeaderTime () { - var - nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), - nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + 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); + } } function ifHasChanged(sURL, fCallback) { - var oReq = new XMLHttpRequest(); - oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); - oReq.callback = fCallback; - oReq.filepath = sURL; - oReq.onload = getHeaderTime; - oReq.send(); + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); } ``` @@ -681,15 +681,15 @@ Test: /* 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() + "!"); + alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); }); ``` -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). +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). ## Cross-site XMLHttpRequest -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. +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. ## Contourner le cache @@ -711,9 +711,9 @@ oReq.send(null); ## Sécurité -{{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.")}} +{{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.")}} -{{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.")}} +{{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.")}} La manière recommandée d'activer les requêtes intersites est d'utiliser l'en-tête HTTP `Access-Control-Allow-Origin` dans la réponse du `XMLHttpRequest`. @@ -723,7 +723,7 @@ Si vous vous retrouvez avec une `XMLHttpRequest` ayant `status=0` et `statusText ## Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM -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. +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. ```js const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.md b/files/fr/web/api/xmlhttprequest/withcredentials/index.md index ec22be411b..e7cb522304 100644 --- a/files/fr/web/api/xmlhttprequest/withcredentials/index.md +++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/XMLHttpRequest/withCredentials --- {{APIRef('XMLHttpRequest')}} -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. +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. -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. +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. 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. @@ -34,7 +34,7 @@ xhr.send(null); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | +| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md index 58857af3a9..df589c5b4d 100644 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md @@ -35,7 +35,7 @@ Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum ini ## La syntaxe de Firefox non-standard -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. +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. const request = new XMLHttpRequest(paramsDictionary); |