Différences

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

--- web:js:ajax [2023/04/02 13:15] – [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 124: / Ligne 124: @@
 let response = await fetch('/lib/tpl/bootstrap3/images/logo.png');
-let blob = await response.blob(); // télécharger en tant qu'objet Blob
+let blob = await response.blob(); // téléchargement en tant qu'objet Blob
-// create <img> for it
+// Création d img
 let img = document.createElement('img');
 img.style = 'position:fixed;top:10px;left:10px;width:100px';
 document.body.append(img);
-// l'afficher
+// Affichage
 img.src = URL.createObjectURL(blob);
-setTimeout(() => { // le cacher après 3 secondes
+setTimeout(() => { // Effacement après 3 secondes
   img.remove();
   URL.revokeObjectURL(img.src);
@@ Ligne 148: / Ligne 148: @@
       let response = await fetch('/lib/tpl/bootstrap3/images/logo.png');
-      let blob = await response.blob(); // télécharger en tant qu'objet Blob
+      let blob = await response.blob();
-      // create <img> for it
       let img = document.createElement('img');
-      img.style = 'position:fixed;top:10px;left:10px;width:100px';
+      img.style = 'position:fixed;top:100px;left:100px;width:100px';
       document.body.append(img);
-      // l'afficher
       img.src = URL.createObjectURL(blob);
@@ Ligne 165: / 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>