Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:js:ajax [2023/04/02 13:18] – [Exemples] jcheron
+++ web:js:ajax [2023/10/12 11:11] (Version actuelle) – [API Fetch] jcheron
@@ Ligne 63: / Ligne 63: @@
 L'api fetch permet en javascript d'effectuer des requêtes partielles vers le serveur, sans changer de page, selon le mode AJAX (Asynchronous Javascript And XML).
-**feetch** fonctionne selon la syntaxe suivante :
+**fetch** fonctionne selon la syntaxe suivante :
 <sxh javascript;gutter:false>
 let promise = fetch(url, [options])
@@ Ligne 163: / Ligne 163: @@
 </script>
 </html>
+==== Headers ====
+=== Response ===
+L'objet **response** renvoyé contient un membre **headers** grace auquel il est possible dé récupérer les en-têtes :
+<sxh javascript>
+let response = await fetch('https://api.github.com/repos/cnam-dist/nfa085-2023/commits');
+// récupération d'un header
+alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
+// itération sur tous les headers
+for (let [key, value] of response.headers) {
+  alert(`${key} = ${value}`);
+}
+</sxh>
+=== Request ===
+Les headers de la requête sont envoyées au travers des options du fetch :
+<sxh javascript>
+let response = fetch(protectedUrl, {
+  headers: {
+    Authentication: 'secret'
+  }
+});
+</sxh>
+==== POST ====
+La méthode HTTP utilisée peut également être spécifiée au travers des options, comme les données envoyées dans le body :
+<sxh javascript>
+let user = {
+  name: 'John',
+  surname: 'DOE'
+};
+let response = await fetch('/post/user', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json;charset=utf-8'
+  },
+  body: JSON.stringify(user)
+});
+</sxh>