| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| web:js:ajax [2023/04/02 13:15] – [Exemples] jcheron | web:js:ajax [2023/10/12 11:11] (Version actuelle) – [API Fetch] jcheron |
|---|
| 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). | 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> | <sxh javascript;gutter:false> |
| let promise = fetch(url, [options]) | let promise = fetch(url, [options]) |
| let response = await fetch('/lib/tpl/bootstrap3/images/logo.png'); | 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'); | let img = document.createElement('img'); |
| img.style = 'position:fixed;top:10px;left:10px;width:100px'; | img.style = 'position:fixed;top:10px;left:10px;width:100px'; |
| document.body.append(img); | document.body.append(img); |
| |
| // l'afficher | // Affichage |
| img.src = URL.createObjectURL(blob); | img.src = URL.createObjectURL(blob); |
| |
| setTimeout(() => { // le cacher après 3 secondes | setTimeout(() => { // Effacement après 3 secondes |
| img.remove(); | img.remove(); |
| URL.revokeObjectURL(img.src); | URL.revokeObjectURL(img.src); |
| let response = await fetch('/lib/tpl/bootstrap3/images/logo.png'); | 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'); | 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); | document.body.append(img); |
| |
| // l'afficher | |
| img.src = URL.createObjectURL(blob); | img.src = URL.createObjectURL(blob); |
| |
| </script> | </script> |
| </html> | </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> |
| |
| |
| |
jcheron