From d88cec5fa72a8863e6a457549f7d7e708a88a9ec Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 08:14:14 +0100 Subject: convert content to md --- files/fr/web/guide/ajax/community/index.md | 10 +- files/fr/web/guide/ajax/getting_started/index.md | 260 +++++----- files/fr/web/guide/ajax/index.md | 346 ++++++++++---- files/fr/web/guide/api/index.md | 18 +- .../index.md | 54 +-- .../buffering_seeking_time_ranges/index.md | 191 ++++---- .../fr/web/guide/audio_and_video_delivery/index.md | 532 +++++++++++---------- .../live_streaming_web_audio_and_video/index.md | 395 ++++++--------- .../guide/audio_and_video_manipulation/index.md | 346 +++++++------- .../guide/css/block_formatting_context/index.md | 46 +- files/fr/web/guide/graphics/index.md | 39 +- .../fr/web/guide/html/content_categories/index.md | 200 ++++---- files/fr/web/guide/html/editable_content/index.md | 73 +-- files/fr/web/guide/index.md | 87 ++-- .../guide/introduction_to_web_development/index.md | 51 +- files/fr/web/guide/mobile/index.md | 100 ++-- files/fr/web/guide/performance/index.md | 14 +- files/fr/web/guide/user_input_methods/index.md | 228 +++++---- .../writing_forward-compatible_websites/index.md | 141 +++--- 19 files changed, 1587 insertions(+), 1544 deletions(-) (limited to 'files/fr') diff --git a/files/fr/web/guide/ajax/community/index.md b/files/fr/web/guide/ajax/community/index.md index 935a72879e..1ae269ca2f 100644 --- a/files/fr/web/guide/ajax/community/index.md +++ b/files/fr/web/guide/ajax/community/index.md @@ -6,8 +6,8 @@ tags: translation_of: Web/Guide/AJAX/Community original_slug: Web/Guide/AJAX/Communauté --- -

-

Si vous connaissez d'autres listes de diffusion, newsgroups, forums ou d'autres communautés ayant trait à AJAX, n'hésitez pas à ajouter un lien ci-dessous. -

http://www.ajaxlines.com (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet. -

http://www.ajaxmatters.com - Portail d'informations sur AJAX et les technologies Web associées (anglais). -

\ No newline at end of file +Si vous connaissez d'autres listes de diffusion, newsgroups, forums ou d'autres communautés ayant trait à AJAX, n'hésitez pas à ajouter un lien ci-dessous. + + (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet. + + - Portail d'informations sur AJAX et les technologies Web associées (anglais). diff --git a/files/fr/web/guide/ajax/getting_started/index.md b/files/fr/web/guide/ajax/getting_started/index.md index 9aa61def8d..8a3e7228ec 100644 --- a/files/fr/web/guide/ajax/getting_started/index.md +++ b/files/fr/web/guide/ajax/getting_started/index.md @@ -6,119 +6,125 @@ tags: translation_of: Web/Guide/AJAX/Getting_Started original_slug: Web/Guide/AJAX/Premiers_pas --- -

Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.

+Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter. -

Présentation d’AJAX

+### Présentation d’AJAX -

AJAX est un raccourci pour Asynchronous JavaScript And XML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet XMLHttpRequest pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger.

+AJAX est un raccourci pour **\*A**synchronous **J**avaScript **A**nd **X**ML\* (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet [`XMLHttpRequest`](/fr/XMLHttpRequest "fr/XMLHttpRequest") pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger. -

Les deux principales fonctionnalités d’AJAX permettent de :

+Les deux principales fonctionnalités d’AJAX permettent de : -
    -
  • faire des requêtes vers le serveur sans recharger la page ;
    • -
  • recevoir et travailler avec des données provenant du serveur.
    • -
+- faire des requêtes vers le serveur sans recharger la page ; +- recevoir et travailler avec des données provenant du serveur. -

Étape 1 — Lancement d’une requête HTTP

+### Étape 1 — Lancement d’une requête HTTP -

Pour faire une requête HTTP vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que XMLHttpRequest intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé XMLHTTP. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Entre temps, Microsoft a également implémenté XMLHttpRequest.

+Pour faire une requête [HTTP](/HTTP) vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que `XMLHttpRequest` intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé `XMLHTTP`. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet `XMLHttpRequest` qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Entre temps, Microsoft a également implémenté XMLHttpRequest. -
// ancien code de compatibilité, aujourd’hui inutile
+```js
+// ancien code de compatibilité, aujourd’hui inutile
 if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
     httpRequest = new XMLHttpRequest();
 }
 else if (window.ActiveXObject) { // IE 6 et antérieurs
     httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
-}
+} +``` -
-

Note : Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.

-
+> **Note :** Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article. -

Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet httpRequest le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété onreadystatechange de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :

+Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet `httpRequest` le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété `onreadystatechange` de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci : -
httpRequest.onreadystatechange = nomDeLaFonction;
+```js +httpRequest.onreadystatechange = nomDeLaFonction; +``` -

Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci :

+Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci : -
httpRequest.onreadystatechange = function() {
+```js
+httpRequest.onreadystatechange = function() {
     // instructions de traitement de la réponse
 };
-
+``` -

Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes open() et send() de l’objet httpRequest, comme ceci :

+Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes `open()` et `send()` de l’objet `httpRequest`, comme ceci : -
httpRequest.open('GET', 'http://www.example.org/some.file', true);
-httpRequest.send();
+```js +httpRequest.open('GET', 'http://www.example.org/some.file', true); +httpRequest.send(); +``` -
    -
  • Le premier paramètre de l’appel à open() est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les spécifications du W3C.
    • -
  • Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à open(). Une erreur courante est de charger le site via domaine.tld, mais d’essayer d’appeler des pages avec www.domain.tld. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter Cross-Origin Resource Sharing (CORS).
    • -
  • Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à true (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ».
    • -
+- Le premier paramètre de l’appel à `open()` est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les [spécifications du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). +- Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à `open()`. Une erreur courante est de charger le site via `domaine.tld`, mais d’essayer d’appeler des pages avec `www.domain.tld`. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter [Cross-Origin Resource Sharing (CORS)](/fr/docs/Web/HTTP/CORS). +- Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à `true` (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ». -

Le paramètre de la méthode send() peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme :

+Le paramètre de la méthode `send()` peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme : -
"nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite"
+```js +"nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite" +``` -

Ou d’autres formats tels que multipart/form-data, JSON, XML, etc.

+Ou d’autres formats tels que `multipart/form-data`, JSON, XML, etc. -

Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler send() pour envoyer des données de formulaire en tant que chaîne de requête :

+Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler `send()` pour envoyer des données de formulaire en tant que chaîne de requête : -
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
+```js +httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +``` -

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

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

Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.

+Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse. -
httpRequest.onreadystatechange = nomDeLaFonction;
+```js +httpRequest.onreadystatechange = nomDeLaFonction; +``` -

Voyons maintenant ce que cette fonction doit faire. Tout d’abord, elle doit vérifier l’état de la requête. Si cet état a la valeur de XMLHttpRequest.DONE (ce qui correspond à 4), cela signifie que la réponse du serveur a été reçue dans son intégralité et qu’elle peut maintenant être traitée.

+Voyons maintenant ce que cette fonction doit faire. Tout d’abord, elle doit vérifier l’état de la requête. Si cet état a la valeur de `XMLHttpRequest.DONE` (ce qui correspond à 4), cela signifie que la réponse du serveur a été reçue dans son intégralité et qu’elle peut maintenant être traitée. -
if (httpRequest.readyState === XMLHttpRequest.DONE) {
+```js
+if (httpRequest.readyState === XMLHttpRequest.DONE) {
     // tout va bien, la réponse a été reçue
 } else {
     // pas encore prête
-}
+} +``` -

La liste complète des valeurs de readyState est documentée sur XMLHttpRequest.readyState et se résume de cette façon :

+La liste complète des valeurs de `readyState` est documentée sur [XMLHttpRequest.readyState](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) et se résume de cette façon : -
    -
  • 0 (non initialisée) ou (requête non initialisée)
    • -
  • 1 (en cours de chargement) ou (connexion établie avec le serveur)
    • -
  • 2 (chargée) ou (requête reçue)
    • -
  • 3 (en cours d’interaction) ou (requête en cours de traitement)
    • -
  • 4 (terminée) ou (requête terminée et réponse prête)
    • -
+- 0 (non initialisée) ou (requête non initialisée) +- 1 (en cours de chargement) ou (connexion établie avec le serveur) +- 2 (chargée) ou (requête reçue) +- 3 (en cours d’interaction) ou (requête en cours de traitement) +- 4 (terminée) ou (requête terminée et réponse prête) -

Ensuite, vérifiez le code de statut HTTP de la réponse du serveur. Tous les codes possibles sont listés sur le site du W3C. Dans l’exemple qui suit, nous différencions un appel réussi ou échoué en vérifiant la réception d’un code 200 OK.

+Ensuite, vérifiez le [code de statut HTTP](/fr/docs/Web/HTTP/Status) de la réponse du serveur. Tous les codes possibles sont listés sur le [site du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html). Dans l’exemple qui suit, nous différencions un appel réussi ou échoué en vérifiant la réception d’un code [`200 OK`](/fr/docs/Web/HTTP/Status#R%C3%A9ponses_de_succ%C3%A8s). -
if (httpRequest.status === 200) {
+```js
+if (httpRequest.status === 200) {
     // parfait !
 } else {
     // il y a eu un problème avec la requête,
     // par exemple la réponse peut être un code 404 (Non trouvée)
     // ou 500 (Erreur interne au serveur)
 }
-
+``` -

Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données :

+Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données : -
    -
  • httpRequest.responseText — renvoie la réponse du serveur sous la forme d’une chaîne de texte ;
    • -
  • httpRequest.responseXML — renvoie la réponse sous la forme d’un objet XMLDocument que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript.
    • -
+- `httpRequest.responseText` — renvoie la réponse du serveur sous la forme d’une chaîne de texte ; +- `httpRequest.responseXML` — renvoie la réponse sous la forme d’un objet `XMLDocument` que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript. -

Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’open() n’a pas été spécifié, ou a été défini à true). Si vous utilisez une requête synchrone, vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur.

+Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’`open()` n’a pas été spécifié, ou a été défini à `true`). Si vous utilisez une requête **synchrone,** vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur. -

Étape 3 — Un exemple simple

+### Étape 3 — Un exemple simple -

Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, test.html, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message alert(). Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier.

+Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, `test.html`, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message `alert()`. Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier. -
<button id="ajaxButton" type="button">Faire une requête</button>
+```html
+
 
-<script>
+
+```
 
-
Dans cet exemple :

+Dans cet exemple :
 
-
    
- 
  • L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ;
    • 
- 
  • Le gestionnaire d’évènement appelle la fonction makeRequest() ;
    • 
- 
  • la requête est faite, puis l’exécution est passée à alertContents() (via onreadystatechange);
    • 
- 
  • alertContents() vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier test.html dans un message alert().
    • 
-

+- L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ;
+- Le gestionnaire d’évènement appelle la fonction `makeRequest()` ;
+- la requête est faite, puis l’exécution est passée à `alertContents()` (via `onreadystatechange`);
+- `alertContents()` vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier `test.html` dans un message `alert()`.
 
-

-
Note : Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête Content-Type: application/xml, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.

-

+> **Note :** Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête `Content-Type: application/xml`, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.
 
-

-
Note : Si vous ne spécifiez pas l’en-tête Cache-Control: no-cache, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir contourner le cache).

-

+> **Note :** Si vous ne spécifiez pas l’en-tête `Cache-Control: no-cache`, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir [contourner le cache](https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache)).
 
-

-
Note : Si la variable httpRequest est utilisée globalement, des appels concurrents à makeRequest() peuvent s’écraser l’un l’autre, provoquant une situation de compétition (race condition). On peut s’en prémunir en déclarant la variable httpRequest locale à une closure contenant les fonctions AJAX.

-

+> **Note :** Si la variable `httpRequest` est utilisée globalement, des appels concurrents à `makeRequest()` peuvent s’écraser l’un l’autre, provoquant une situation de compétition _(race condition_). On peut s’en prémunir en déclarant la variable `httpRequest` locale à une [closure](/fr/docs/Web/JavaScript/Closures) contenant les fonctions AJAX.
 
-
Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode onreadystatechange lors de l’accès à la propriété status. Pour atténuer ce problème, vous pouvez entourer votre bloc if...then dans un try...catch :

+Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode `onreadystatechange` lors de l’accès à la propriété `status`. Pour atténuer ce problème, vous pouvez entourer votre bloc `if...then` dans un `try...catch` :
 
-
function alertContents(httpRequest) {
+```js
+function alertContents(httpRequest) {
   try {
     if (httpRequest.readyState === XMLHttpRequest.DONE) {
       if (httpRequest.status === 200) {
@@ -183,63 +183,72 @@ httpRequest.send();

   catch( e ) {
     alert("Une exception s’est produite : " + e.description);
   }
-}
+} +``` -

Étape 4 — Travailler avec des réponses XML

+### Étape 4 — Travailler avec des réponses XML -

Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété responseText de l’objet, qui contenait le contenu du fichier test.html. Essayons maintenant la propriété responseXML.

+Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété `responseText` de l’objet, qui contenait le contenu du fichier `test.html`. Essayons maintenant la propriété `responseXML`. -

Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (test.xml) contient ce qui suit :

+Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (`test.xml`) contient ce qui suit : -
<?xml version="1.0" ?>
-<root>
+```xml
+
+
     Je suis un test.
-</root>
-
+ +``` -

Dans le script, il est seulement nécessaire de remplacer la ligne de requête par :

+Dans le script, il est seulement nécessaire de remplacer la ligne de requête par : -
...
-onclick="makeRequest('test.xml')">
+```html
 ...
-
+onclick="makeRequest('test.xml')"> +... +``` -

Ensuite, dans alertContents(), il faut remplacer la ligne alert(httpRequest.responseText); par :

+Ensuite, dans `alertContents()`, il faut remplacer la ligne `alert(httpRequest.responseText);` par : -
var xmldoc = httpRequest.responseXML;
+```js
+var xmldoc = httpRequest.responseXML;
 var root_node = xmldoc.getElementsByTagName('root').item(0);
 alert(root_node.firstChild.data);
-
+``` -

Ce code prend l’objet XMLDocument donné par responseXML et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.

+Ce code prend l’objet `XMLDocument` donné par `responseXML` et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML. -

Catégories

+Catégories -

Interwiki

+Interwiki -

Étape 5 – Manipuler les données

+### Étape 5 – Manipuler les données -

Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, test.php, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, [user data] !" – que nous afficherons via alert().

+Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, `test.php`, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, \[user data] !" – que nous afficherons via `alert()`. -

D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom :

+D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom : -
<label>Vore nom :
-  <input type="text" id="ajaxTextbox" />
-</label>
-<span id="ajaxButton">
+```html
+
+
   Lancer une requête
-</span>
+ +``` -

Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction makeRequest(), ainsi que l’URL de notre script côté serveur :

+Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction `makeRequest()`, ainsi que l’URL de notre script côté serveur : -
  document.getElementById("ajaxButton").onclick = function() {
+```js
+  document.getElementById("ajaxButton").onclick = function() {
       var userName = document.getElementById("ajaxTextbox").value;
       makeRequest('test.php', userName);
-  };
+ }; +``` -

Nous devons modifier makeRequest() afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à httpRequest.send() :

+Nous devons modifier `makeRequest()` afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à `httpRequest.send()` : -
  function makeRequest(url, userName) {
+```js
+  function makeRequest(url, userName) {
 
     ...
 
@@ -247,15 +256,19 @@ alert(root_node.firstChild.data);
     httpRequest.open('POST', url);
     httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     httpRequest.send('userName=' + encodeURIComponent(userName));
-  }
+ } +``` -

La fonction alertContents() peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à :

+La fonction `alertContents()` peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à : -
{"userData":"Dorothée","computedString":"Bonjour, Dorothée !"}
+```json +{"userData":"Dorothée","computedString":"Bonjour, Dorothée !"} +``` -

Pour utiliser cette phrase dans alertContents(), nous ne pouvons pas simplement afficher une alerte avec le contenu de responseText, nous devons l’analyser et afficher computedString, la propriété que nous souhaitons :

+Pour utiliser cette phrase dans `alertContents()`, nous ne pouvons pas simplement afficher une alerte avec le contenu de `responseText`, nous devons l’analyser et afficher `computedString`, la propriété que nous souhaitons : -
function alertContents() {
+```js
+function alertContents() {
   if (httpRequest.readyState === XMLHttpRequest.DONE) {
     if (httpRequest.status === 200) {
       var response = JSON.parse(httpRequest.responseText);
@@ -264,13 +277,16 @@ alert(root_node.firstChild.data);
       alert('Un problème est survenu avec la requête.');
     }
   }
-}
+} +``` -

Le fichier test.php devrait contenir ce qui suit :

+Le fichier `test.php` devrait contenir ce qui suit : -
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme';
+```php
+$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme';
 $computedString = 'Bonjour, ' . $name . ' !';
-$array = ['userName' => $name, 'computedString' => $computedString];
-echo json_encode($array);
+$array = ['userName' => $name, 'computedString' => $computedString]; +echo json_encode($array); +``` -

Pour en savoir sur les méthodes DOM, pensez à lire la Référence du DOM de Mozilla.

+Pour en savoir sur les méthodes DOM, pensez à lire la [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) de Mozilla. diff --git a/files/fr/web/guide/ajax/index.md b/files/fr/web/guide/ajax/index.md index 1cfc6f249b..9341969376 100644 --- a/files/fr/web/guide/ajax/index.md +++ b/files/fr/web/guide/ajax/index.md @@ -3,105 +3,259 @@ title: AJAX slug: Web/Guide/AJAX translation_of: Web/Guide/AJAX --- +**AJAX (Asynchronous JavaScript + XML)** n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : [HTML](/fr/HTML "fr/HTML") ou [XHTML](/fr/XHTML "fr/XHTML"), [les feuilles de styles CSS](/fr/CSS "fr/CSS"), [JavaScript](/fr/JavaScript "fr/JavaScript"), [le modèle objet de document](/fr/DOM "fr/DOM") (DOM), [XML](/fr/XML "fr/XML"), [XSLT](/fr/XSLT "fr/XSLT"), et l'[objet XMLHttpRequest](/fr/XMLHttpRequest "fr/XMLHttpRequest"). Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur. -

AJAX (Asynchronous JavaScript + XML) n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : HTML ou XHTML, les feuilles de styles CSS, JavaScript, le modèle objet de document (DOM), XML, XSLT, et l'objet XMLHttpRequest. Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur.

+#### **Quand utiliser (ou non) AJAX ?**  -

Quand utiliser (ou non) AJAX ? 

+S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : -

S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : 

- -
    -
  • La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais n'autorise pas davantage que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur doit envoyer des entêtes et négocier la transaction. 
    - La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les WebSockets). 
    • -
  • La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est totalement transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage.
    - Ne pas confondre possible et souhaitable : AJAX peut négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des raisons de sécurité les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. 
    • -
  • La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme JQuery, dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. 
    - Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc in fine des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (voir le principe de dégradation élégante) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. 
    • -
+- La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais **n'autorise pas davantage** que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur **doit** envoyer des entêtes et négocier la transaction.  + La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (_le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les [WebSockets](https://developer.mozilla.org/fr/docs/WebSockets)_). +- La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est **totalement** transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage. + Ne pas confondre *possible* et *souhaitable* : AJAX **peut** négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des [raisons de sécurité](https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS) les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. +- La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme [JQuery](https://fr.wikipedia.org/wiki/JQuery), dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations.  + Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc _in fine_ des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (_voir le principe de [dégradation élégante](https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive)_) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. - - - - - - + + + + + +
-

Documentation

- -
-
AJAX:Premiers pas
-
Cet article vous guide à travers les bases d'AJAX et vous donne deux exemples simples pour commencer.
-
- -
-
Techniques AJAX alternatives
-
La plupart des articles sur AJAX se concentrent sur l'utilisation de XMLHttp comme moyen de communication, mais les techniques AJAX ne s'arrêtent pas à XMLHttp. Il y en a bien d'autres.
-
- -
-
Ajax: A New Approach to Web Applications (en)
-
Jesse James Garrett, du site adaptive path, a écrit cet article en février 2005, introduisant le terme AJAX et les concepts liés.
-
- -
-
A Simpler Ajax Path
-
« Comme on le remarquera, il est assez facile de tirer parti de l'objet XMLHttpRequest pour faire se comporter une application Web un peu plus comme une application traditionnelle, tout en continuant à utiliser des outils comme des formulaires Web pour collecter les entrées de l'utilisateur. »
-
- -
-
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
-
Cet article rédigé par Mike Stenhouse détaille certaines méthodes utilisables pour rendre fonctionnel le bouton Précédent et réparer les problèmes causés au marquage des pages lorsque des applications sont développées avec les outils AJAX.
-
- -
-
Ajax Mistakes
-
Cet article d'Alex Bosworth attire l'attention sur certaines erreurs que les développeurs d'applications AJAX peuvent faire.
-
- -
-
Tutoriel avec des exemples.
-
- -
-
La spécification XMLHttpRequest-  (Traduction française)
-
Brouillon de travail du W3C
-
- - 		-

Communauté

- -
    -
  • Voir les forums de Mozilla… {{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}
    • -
- -

Outils

- - - -

Exemples

- - - - - -
-
HTML, XHTML, Feuilles de style (CSS), Modèle objet de document (DOM), JavaScript, XML, XSLT , DHTML, Canvas
-
-
+

Documentation

+
+
+ AJAX:Premiers pas +
+
+ Cet article vous guide à travers les bases d'AJAX et vous donne + deux exemples simples pour commencer. +
+
+
+
+ Techniques AJAX alternatives +
+
+ La plupart des articles sur AJAX se concentrent sur l'utilisation + de XMLHttp comme moyen de communication, mais les techniques AJAX + ne s'arrêtent pas à XMLHttp. Il y en a bien d'autres. +
+
+
+
+ Ajax: A New Approach to Web Applications (en) +
+
+ Jesse James Garrett, du site + adaptive path, a écrit cet article en février 2005, introduisant le terme AJAX + et les concepts liés. +
+
+
+
+ A Simpler Ajax Path +
+
+ « Comme on le remarquera, il est assez facile de tirer parti de + l'objet XMLHttpRequest pour faire se comporter une application Web + un peu plus comme une application traditionnelle, tout en + continuant à utiliser des outils comme des formulaires Web pour + collecter les entrées de l'utilisateur. » +
+
+
+
+ Fixing the Back Button and Enabling Bookmarking for AJAX Apps +
+
+ Cet article rédigé par Mike Stenhouse détaille certaines méthodes + utilisables pour rendre fonctionnel le bouton Précédent et réparer + les problèmes causés au marquage des pages lorsque des + applications sont développées avec les outils AJAX. +
+
+
+
+ Ajax Mistakes +
+
+ Cet article d'Alex Bosworth attire l'attention sur certaines + erreurs que les développeurs d'applications AJAX peuvent + faire. +
+
+
+
+ Tutoriel + avec des exemples. +
+
+
+
+ La spécification XMLHttpRequest-  + (Traduction française) +
+
Brouillon de travail du W3C
+
+ 		+

Communauté

+
    +
  • + Voir les forums de Mozilla… + {{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} +
    • +
+

Outils

+ +

Exemples

+ + +
+
+ HTML, + XHTML, + Feuilles de style (CSS), + Modèle objet de document (DOM), + JavaScript, + XML, + XSLT , + DHTML, + Canvas +
+
+
diff --git a/files/fr/web/guide/api/index.md b/files/fr/web/guide/api/index.md index 9dbd8867c5..93a1973792 100644 --- a/files/fr/web/guide/api/index.md +++ b/files/fr/web/guide/api/index.md @@ -8,17 +8,15 @@ tags: - Web translation_of: Web/Guide/API --- -

Le Web peut être utilisé avec de nombreuses API, accessibles en JavaScript, qui permettent de construire des applications puissantes, sur le Web, localement ou sur un serveur grâce à Node.js. Sur cette page, vous pourrez trouver une liste complète de l'ensemble des API utilisables avec les technologies web.

+Le Web peut être utilisé avec de nombreuses API, accessibles en JavaScript, qui permettent de construire des applications puissantes, sur le Web, localement ou sur un serveur grâce à [Node.js](https://nodejs.org/). Sur cette page, vous pourrez trouver une liste complète de l'ensemble des API utilisables avec les technologies web. -

Index des API Web (A à Z)

+## Index des API Web (A à Z) -

{{ListGroups}}

+{{ListGroups}} -

Voir aussi

+## Voir aussi - +- [Référence des interfaces des API Web ](/fr/docs/Web/API)(un index de l'ensemble des interfaces qui composent ces API) +- [Le _Document Object Model_](/fr/docs/Web/API/Document_Object_Model) (DOM ou modèle objet de document) +- [Référence des évènements associés aux API Web](/fr/docs/Web/Events) +- [Apprendre le développement web](/fr/docs/Apprendre) diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md index 5e20228556..df597ef6ad 100644 --- a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md @@ -4,35 +4,25 @@ slug: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC original_slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC --- -

{{SeeCompatTable}}

-

Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi navigator.mozGetUserMedia() à accéder au microphone et à la webcam (getUserMedia() est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).

-

La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C WebRTC et getUserMedia, ainsi que différents brouillons de IETF, principalement du groupe de travail rtcweb, mais aussi mmusic, rmcat et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à webrtc.org.

-

NOTE:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <video> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.

-

Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur HTML5 Rocks. On pourra trouver sur le site webrtc-landing une série de page de test basique.

-

Il est possible de faire un appel simple de personne à personne  (y compris à ceux utilisant Chrome) à apprtc.appspot.com.

-

Un article de Hacks décrit avec précision ce qu'il se passe dans une connexion RTCPeerConnecion (lien) :

-

Basics of RTCPeerConnection call setup

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Media Capture")}}{{Spec2("Media Capture")}}Définition de getUserMedia API.
{{SpecName("WebRTC 1.0")}}{{Spec2("WebRTC 1.0")}}Définition initiale.
+{{SeeCompatTable}} + +Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi `navigator.mozGetUserMedia()` à accéder au microphone et à la webcam (`getUserMedia()` est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording). + +La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C [WebRTC](http://dev.w3.org/2011/webrtc/editor/webrtc.html) et [getUserMedia](http://dev.w3.org/2011/webrtc/editor/getusermedia.html), ainsi que différents brouillons de IETF, principalement du [groupe de travail rtcweb](http://tools.ietf.org/wg/rtcweb/), mais aussi [mmusic](http://tools.ietf.org/wg/mmusic/), [rmcat](http://tools.ietf.org/wg/rmcat/) et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à [webrtc.org](http://www.webrtc.org/reference). + +**NOTE**:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 ` +``` -

Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une vignette jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en autoplay (jouer automatiquement) mais d'être muted (en sourdine) par défaut.

+Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une vignette jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en `autoplay` (jouer automatiquement) mais d'être `muted` (en sourdine) par défaut. -
-

Note : l'attribut autoplay peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire le guide à ce sujet pour savoir comment l'utiliser pertinemment.

-
+> **Note :** l'attribut `autoplay` peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire [le guide à ce sujet](/fr/docs/Web/Media/Autoplay_guide) pour savoir comment l'utiliser pertinemment. -

Pour plus d'informations voir l'article de référence sur l'élément <video> et la page sur la création d'un lecteur vidéo multi-navigateur.

+Pour plus d'informations voir [l'article de référence sur l'élément `