DD

Accueil > Cours > Créez des pages web dynamiques avec JavaScript > Envoyez une requête depuis le navigateur

Créez des pages web dynamiques avec JavaScript

12 heures  Moyenne

Mis à jour le 28/08/2024

 

Envoyez une requête depuis le navigateur

02:24

Votre site commence à prendre forme ! Vous avez réussi à générer automatiquement les fiches produits
sur votre page web. Vous l’avez également rendue interactive en utilisant des filtres pour réordonner les
fiches.

Nous souhaitons à présent afficher les avis déposés sur les produits par les utilisateurs du site. Dans la
première partie du cours, nous avions récupéré les produits sous la forme d’un fichier JSON. À présent,
nous allons récupérer les avis à l’aide d’une API en ligne. Grâce à ce service web, nous serons en mesure
d’afficher en continu des données actualisées.
Dans cette partie du cours, votre page web aura donc besoin de communiquer avec une API en ligne
disponible sur l’adresse http://localhost:8081. Vous devrez héberger cette API en clonant ce dépôt
GitHub. Avec un terminal, placez-vous dans le dossier parent du projet de votre page web et lancez les
commandes :
text

1 git clone https://github.com/OpenClassrooms-Student-Center/7697016-Back-End.git api-http

2 cd api-http
3 npm install
4 npm start

Et voilà, nous sommes prêts à récupérer les données ! Mais avant de rentrer dans le vif du sujet,
découvrons ensemble en quoi consiste une API HTTP, et comment elle s’utilise.

Utilisez un service web pour persister vos données


La persistance de la donnée
Dans les deux premières parties de ce cours, nous récupérions les données depuis le fichier JSON
pieces-autos.json :
javascript

1 const reponse = await fetch("pieces-autos.json");

2 const pieces = await reponse.json();

Cependant, cette méthode a ses limites : le fichier JSON est présent sur votre disque dur, il ne peut pas
recevoir de mise à jour des fiches produits. Heureusement, en utilisant un service web, grâce à son API
en ligne, nous allons changer la donne. 😉

Comme je vous l’expliquais dans le 2ème chapitre de la première partie de ce cours, un service web
permet de manipuler les données qu’il expose à travers son API en ligne. Il peut les créer, les récupérer,
les mettre à jour et les supprimer. Ces quatre opérations permettent de persister vos données, c’est-à-
dire de les stocker durablement. Ainsi, lorsque mon application web communique avec le service web,
ces manipulations sont sauvegardées jusqu’à la prochaine utilisation.

En abandonnant l’utilisation d’un fichier JSON au profit d’un service web via son API en ligne, on
rend notre application “vivante”. On récupère des données qui ont été mises à jour en arrière-plan
par le service, et les modifications que l’on apporte aux données sont sauvegardées et mises à
disposition des autres utilisateurs de l’API en ligne.

L’API HTTP
Une API est, pour faire simple, un moyen de communication entre deux logiciels, que ce soit entre
différents composants d’une application ou entre deux applications différentes. C’est ce qu’on appelle
une abstraction : une façade qui simplifie des mécanismes complexes permettant de fournir un service
demandé.
Si je reprends mon exemple de la météo pour illustrer cela : je n’ai pas besoin de savoir comment calculer
la vitesse du vent pour avoir cette information, l’API me la fournit directement.

On parle d’API HTTP lorsqu’un service web offre une façade à travers le protocole HTTP. Ce
terme ne vous est peut-être pas encore familier mais n’ayez crainte, je vous en dis plus dans la
section suivante. 😉

Le fonctionnement d’un serveur web

Pour récupérer les avis des clients, nous utiliserons un service web qui exposera ses fonctionnalités de
stockage de l’information via une API HTTP. Jusqu’à présent, nous n’utilisions qu’un seul programme pour
exécuter notre application : le navigateur. En utilisant un service web, un deuxième programme intervient
: le serveur web.

Le serveur web est un programme informatique qui met les services web à disposition des autres
programmes. Le serveur est joignable à une adresse, par exemple : les-bonnes-pieces.fr. Pour
que cette mise à disposition fonctionne, le navigateur et le serveur doivent donc communiquer
entre eux grâce au protocole HTTP.

Le protocole HTTP est un ensemble de règles qui régissent la façon de communiquer de deux
programmes à travers le réseau informatique. Votre navigateur web utilisera le protocole HTTP
pour envoyer des requêtes à destination du serveur.

Ouh là là… Mais ça part dans tous les sens, cette histoire de serveur web.

Pas d'inquiétude ! 😉 Le schéma ci-dessous vous aidera à mieux comprendre comment cela fonctionne :
 Le serveur peut traiter différents types de requêtes. Les quatre types les plus courants sont : la
création, la récupération, la modification et la suppression. Pour que le serveur identifie quel type
de requête il doit traiter, nous devons utiliser les verbes HTTP ci-dessous :

POST pour la création ;

GET pour la récupération ;
PUT pour la modification ;
DELETE pour la suppression.

Dans ce cours, nous n’utiliserons que les verbes GET et POST pour récupérer les avis et en créer de
nouveaux.

Une requête HTTP concerne toujours une ressource. Il s’agit d’un type de donnée que le service web
gère, par exemple :

la ressource “pièces automobiles” ;

la ressource “avis utilisateur”.

Les ressources sont accessibles à travers des chemins. Il s’agit d’une partie de l’URL qui identifie la
ressource concernée par la requête. Voici les chemins correspondant aux ressources précédentes :

/pieces

/avis

L’association de la ressource et du verbe permet de décrire l’opération demandée par le navigateur et qui
sera traitée par le service web. Par exemple :

GET /pieces permet de récupérer toutes les pièces automobiles ;

POST /avis permet de créer un nouvel avis ;

DELETE /avis/42 permet de supprimer l’avis numéro 42.

Utilisez la fonction fetch pour envoyer une requête


La fonction fetch
Le navigateur vous offre un moyen simple d’envoyer des requêtes HTTP, avec la fonction fetch. Cette
dernière prend en argument d’appel une chaîne de caractères comprenant l’adresse du serveur web et le
chemin qui décrit la ressource que nous souhaitons manipuler. Le verbe utilisé par défaut par la fonction
fetch est GET.

Par exemple, l’appel à la fonction fetch ci-dessous permettra d’envoyer une requête GET sur le
serveur localhost:8081 pour demander la ressource /pieces.
javascript

1 fetch("http://localhost:8081/pieces");

Récupérez les avis des autres utilisateurs sur les pièces automobiles
Revenons à notre site web pour ajouter la récupération des avis avec la fonction fetch. Mais avant,
passez sur la branche P3C1-Debut du dépôt GitHub.

J’y ai ajouté un bouton sur chaque fiche produit, intitulé “Afficher les avis”. Chaque bouton est créé avec
un attribut “data-id” qui contient l’identifiant de la pièce automobile. Cet attribut permettra de faire le lien
entre un bouton sur la page web et une pièce automobile lorsque l’on réagira au clic de ce bouton.

Pour ajouter le code vous-même, insérez le code ci-dessous dans avis.js :

javascript

1 export function ajoutListenersAvis() {

2 const piecesElements = document.querySelectorAll(".fiches article button");
3
4 for (let i = 0; i < piecesElements.length; i++) {
5 piecesElements[i].addEventListener("click", async function (event) {
6 /* ... */
7 });
8 }
9 }
 Peut-être avez-vous remarqué le mot clé async juste devant la déclaration de la fonction
anonyme ? Pas d'inquiétude, nous reviendrons là-dessus dans la section suivante.

Dans un deuxième temps, nous appelons cette fonction ajoutListenersAvis dans le fichier pieces.js après
la boucle for de génération des éléments du DOM qui se trouve dans la fonction genererPieces. Comme
ceci :
javascript

1 function genererPieces(pieces){
2 for (let i = 0; i < pieces.length; i++) {
3 //...
4 }
5 // Ajout de la fonction ajoutListenersAvis
6 ajoutListenersAvis();
7 }

Pour que l’ajout de cette fonction ne génère pas d’erreur dans notre code, nous devons l’importer avant
de l’utiliser. Cet import doit être réalisé à la première ligne du fichier pieces.js :
javascript

1 import { ajoutListenersAvis } from "./avis.js";

Cette syntaxe moderne de JavaScript permet d’importer des variables et des fonctions dans nos fichiers
sans rajouter d’autres balises script dans notre HTML. Pour cela, il nous suffit d’ajouter la propriété type à
notre balise script avec la valeur module, comme ceci :
javascript

1 <script type="module" src="pieces.js"></script>

Enfin, dans l’event listener du fichier avis.js, nous récupérons l’identifiant de la pièce automobile pour
laquelle l’utilisateur a cliqué sur le bouton “Afficher les avis”. Nous récupérons la valeur de l’attribut data-
id grâce à la propriété “dataset.id”. Nous utilisons ensuite cet identifiant pour construire le chemin de la
ressource sur laquelle créer la requête HTTP avec la fonction fetch.
javascript

1 const id = event.target.dataset.id;
2 fetch(`http://localhost:8081/pieces/${id}/avis`);

L’attribut data-id que nous avons utilisé sur la balise button n’est pas spécifique aux identifiants.
En réalité, nous pouvons créer n’importe quelle balise data-xxx et récupérer sa valeur en
JavaScript avec dataset.xxx. Pour plus d’informations, n’hésitez pas à consulter cette page sur le
site MDN.

Si je clique sur le bouton “Afficher les avis” de la pièce Liquide de frein, je vois dans la console de l’API
HTTP, qui se trouve dans le terminal avec lequel vous avez lancé votre serveur, qu’une requête est
arrivée avec l’identifiant 4.
Félicitations, vous avez réussi à envoyer une requête depuis le navigateur ! 🥳 Vous pouvez retrouver le
code développé dans ce chapitre sur la branche P3C1-Fin.

Récapitulons en vidéo
Vous pouvez revoir les différentes étapes de cette démonstration dans la vidéo ci-dessous :

01:41

En résumé
Utilisez les API en ligne pour persister vos données :

Les services web permettent de stocker durablement les données grâce à leur API en ligne.
Un navigateur web utilise le protocole HTTP pour envoyer des requêtes à destination du
serveur.
Pour que le serveur identifie le type de requête envoyé, vous devez utiliser des verbes HTTP
(POST, GET, PUT, DELETE).
Utilisez la fonction fetch pour envoyer des requêtes au service web :
Les requêtes permettent de manipuler les données.
Elle utilise le verbe HTTP GET par défaut.

Vous avez envoyé votre première requête depuis votre navigateur. Il vous faut maintenant traiter la
réponse du serveur. Suivez-moi dans le chapitre suivant pour découvrir comment faire.

J'ai terminé ce chapitre et je passe au suivant

 Et si vous obteniez un diplôme OpenClassrooms ?
Formations jusqu’à 100 % financées

Date de début flexible

Projets professionnalisants

Mentorat individuel

Trouvez la formation et le financement faits pour vous

Être orienté Comparez nos types de formation

 Quiz : Rendre une page web interactive Traitez la réponse du serveur 

Les professeurs
Aurélien Antonio
Développeur Web et Mobile Freelance 100% remote, Mentor passionné. J'aime à découvrir
d'autres cultures. Expatrié en Amérique latine.

Pierre-Eric Garcia
Senior Front-End Engineer, passionné de React et de JavaScript ❤️

Thomas Kerbrat
Entrepreneur, enseignant et développeur en informatique. Expert en ingénierie logicielle,
diplômé de l'école INTECHINFO.

POUR LES ÉTUDIANTS

POUR LES EMPLOYEURS

OPENCLASSROOMS

AIDE
LANGUE

Français

NOUS SUIVRE

Mentions légales Conditions générales d'utilisation Politique de protection des données personnelles

Cookies Accessibilité