AJAX-02-l'API Fetch

ajax

ajax l'API Fetch

Sommaire

1 - introduction

2 - Pourquoi utiliser Fetch ?

3 - Syntaxe de base

4 - Exemples

1- introduction

L'API Fetch est une interface moderne introduite dans ES6 (ECMAScript 2015) qui permet d'effectuer des requêtes réseau de manière asynchrone dans JavaScript. Contrairement à l'ancienne méthode XMLHttpRequest, Fetch est plus simple à utiliser, exploite les Promises, et permet de travailler avec des requêtes HTTP/HTTPS (GET, POST, PUT, DELETE, etc.). Fetch est devenu la norme pour la communication client-serveur dans les applications web modernes.

ajax

2 - Pourquoi utiliser Fetch ?

2- Pourquoi utiliser Fetch ?

L'API Fetch apporte plusieurs avantages :

• Syntaxe simplifiée : Fetch repose sur les Promises, ce qui rend le code plus clair et plus lisible.

• Flexibilité : Fetch supporte toutes les méthodes HTTP.

• Traitement des réponses : Fetch permet de travailler facilement avec différents formats de réponse (JSON, Blob, Text, etc.).

• Gestion des erreurs : Fetch ne lève pas d’erreurs réseau pour les codes de réponse HTTP comme 404 ou 500, ce qui offre plus de contrôle sur la gestion des erreurs.

ajax

3 - syntaxe de base

3- syntaxe de base

La méthode fetch() prend deux arguments : L'URL de la ressource à récupérer. Un objet optionnel pour configurer la requête (méthode, en-têtes, corps, etc.). Exemple de syntaxe basique d'une requête GET :

ajax

4 - exemples

4- exemples

Format texte brut :

Nous allons mettre en place quelques exemples simples d'utilisation pour chaque type de données reçues. Nous créons 3 fichiers que nous déposons sur un serveur (local ou distant) :

1. data.txt Dans ce fichier nous renseignons donc du texte :

4- exemples

2. index.html

Nous créons dans celui-ci un simple bouton suivi d'un élément vide destiné à recevoir les données du fichier txt, sans oublier de faire appel au script :

4- exemples

3. script.js

4- exemples

3. script.js

Nous avons ici tout d'abord placé l'écouteur d'événement sur le bouton afin d'exécuter la requete en sollicitant l'API Fetch. Par le biais d'une première "Promesse", nous récupèrons les données. Puis, via une seconde "Promesse", nous intégrons les données dans la page. Et enfin, on capte si nécessaire une erreur de traitement de la requête.

4- exemples

N'hésitez pas à consulter l'inspecteur du navigateur, onglet « Console » afin de visualiser d'éventuelles erreurs et onglet « Network » pour visualiser les données reçues :

Dans le cadre d'un échange de données avec un fichier PHP, c'est aussi à cet endroit que vous pourrez visualiser les erreurs PHP ainsi que le résultat des var_dump() !

4- exemples

Nous supprimons maintenant le fichier data.txt et nous créons un nouveau fichier data.php dans lequel nous créons le code suivant :

Nous modifions ensuite l'URL du fichier dans la méthode fetch() du script :

Le résultat est alors identique au précédent puisque le fichier PHP renvoie du texte simple.

4- exemples

Format XML :

Nous créons tout d'abord un fichier data.xml dans lequel nous créons une liste de language (il serait là aussi possible d'insérer ce code dans un fichier PHP au sein d'un echo) :

Nous afficherons chaque langage au sein d'une liste dans le fichier HTML que nous modifions alors ainsi :

4- exemples

4- exemples

Format JSON :

Nous reprenons le même exemple mais cette fois-ci à partir d'un fichier JSON nommé data.json :

4- exemples

Puis nous modifions le script afin de l'adapter au type de données reçues :

4- exemples

Format JSON suite à une requête SQL :

Nous terminons nos exemples en stockant nos informations dans une base de données (sur serveur local ici). Pour cela, nous créons une table languages que nous remplissons avec nos données de la façon suivante :

4- exemples

Puis nous paramétrons le fichier data.php ainsi :

Le point important de ce script est la ligne 11 dans laquelle nous encodons les données récupérées depuis la base de données au format JSON. Le fichier script.js reste identique à celui de l'exemple précédent et l'application est fonctionnelle.

4- exemples

Pour aller plus loin, nous créons 3 boutons dans le fichier HTML qui nous permettront de récupérer respectivement :

• tous les langages (comme précédemment)
• les langages front uniquement
• les langages back uniquement

4- exemples

Le but sera de récupérer l'id du bouton lors du clic puis de passer cette valeur via la méthode POST au fichier PHP afin d'effectuer la requête SQL adéquate. Voici un nouveau fichier data.php :

4- exemples

Enfin nous modifions notre fichier JS afin d'ajouter le clic sur chaque bouton et de modifier la requete Fetch pour passer notre variable en POST. Cette variable aura pour valeur l'id du bouton cliqué.Attention : pour pouvoir utiliser cette méthode, nous devons modifier l'en-tête HTTP.

L'explication sur l'API Fetch JavaScript est maintenant terminée ! Rendez-vous dans le prochain module de votre parcours de formation ! Si vous souhaitez partager vos reflexions ou si vous avez des questions, n'oubliez pas d'utiliser les forums !

En choisissant un fond foncé, nous visons à dissuader l'impression et à promouvoir une utilisation 100% numérique. Cette approche encourage une utilisation plus responsable et durable des technologies numériques, contribuant ainsi à la protection de notre environnement.

En savoir +

Au clic sur le bouton, le contenu du fichier txt est chargé puis affiché dans la page.

Nous avons opté pour des supports de cours sur fond foncé pour plusieurs raisons, voici lesquelles et pourquoi : Écologie et économie de ressourcesRéduction de l'utilisation d'encre : Les écrans OLED, présents dans de nombreux smartphones, tablettes et ordinateurs portables modernes, éteignent les pixels pour afficher du noir. Un fond foncé consomme moins d'énergie et n'utilise pas d'encre numérique, contrairement aux écrans LCD qui nécessitent un rétroéclairage constant, quelle que soit la couleur affichée.Prévention de l'impression inutile : En choisissant un fond foncé, nous encourageons l'utilisation numérique de ces supports. L'impression de pages à fond foncé consomme non seulement beaucoup d'encre, mais elle est aussi coûteuse et moins respectueuse de l'environnement. En insistant sur le fait que ces supports ne sont pas destinés à être imprimés, nous contribuons à la préservation des ressources naturelles.Numérique Responsable Optimisation de la lecture écranLes fonds foncés peuvent être plus confortables pour les yeux lorsqu'ils sont lus sur des écrans, surtout dans des environnements peu éclairés. Cela réduit la fatigue oculaire et encourage une lecture prolongée sans inconfort. Réduction de la consommation énergétique : Pour les appareils équipés d'écrans OLED, les fonds foncés consomment moins d'énergie. Cela aide non seulement à prolonger la durée de vie de la batterie des appareils mobiles mais aussi à réduire l'empreinte énergétique globale de l'utilisation numérique. Conscience écologique : En choisissant de ne pas imprimer ces supports de cours, nous faisons un pas vers une utilisation plus responsable des ressources naturelles. Économie de papier et réduction des déchets : Moins d'impression signifie moins de papier utilisé, ce qui contribue directement à la réduction de la déforestation et à la conservation de la biodiversité. Cela signifie également moins de déchets à gérer.

Au clic sur le bouton, le contenu du fichier xml est chargé et nous affichons bien notre liste. Pour récupérer des données XML, vous devez parser le DOM (Document Object Model) pour traiter ces données, car les données XML sont structurées de manière hiérarchique et doivent être interprétées comme un arbre de nœuds.

Nous obtenons alors le même résultat que dans l'exemple précédent. Nous avons dû pour cela définir le type de réponse, puis utiliser un for of afin de parcourir l'objet récupéré.

Nous obtenons bien au clic sur les boutons les résultats suivants :