Écrivez du JavaScript pour le web

Nous avons vu précédemment que grâce au protocole HTTP,  nous pouvions demander à récupérer des données de notre service web.

Eh bien, c'est aussi possible d'en envoyer au service web en les ajoutant à notre requête !

Cependant, cela ne se fait pas avec toutes les méthodes (qu'on appelle aussi des verbs) HTTP.  En effet, la méthode GET est  seulement faite pour récupérer des données, alors que des méthodes comme POST et PUT sont faites pour en envoyer et en recevoir.

Le fonctionnement d'un verb à l'autre est très similaire. Avec les verbs POST et PUT, nous allons simplement ajouter des données dans le corps de notre requête.

Afin d'envoyer des données à un service web avec la méthode POST via AJAX, nous allons devoir passer par la méthode   send()   en lui passant en paramètres les données à envoyer.

fetch("http://url-service-web.com/api/users", {
    method: “POST”,
    headers: { 
'Accept': 'application/json', 
'Content-Type': 'application/json' 
},
    body: JSON.stringify(jsonBody)
});

Comme vous pouvez le voir, nous avons passé le contenu à envoyer au service web à notre fonction   fetch()  . Étant donné que l'on souhaite envoyer du JSON à notre service web, nous avons d'abord besoin de transformer notre objet JavaScript en JSON (qui, rappelons-le, est un format textuel, c'est-à-dire que c'est simplement du texte, contrairement à un objet JavaScript qui est une structure complexe du langage).

Pour faire cette transformation, nous utilisons la fonction   JSON.stringify(json)  . Toujours parce que l'on souhaite envoyer du JSON à notre service web, il faut alors le prévenir qu'il va recevoir du JSON. Cela se fait grâce à des headers, qui sont des en-têtes envoyés en même temps que la requête pour donner plus d'informations sur celle-ci. Les headers en question sont  :

• Content-Type, avec la valeur  application/json,

• Accept, avec la valeur application/json . 

Ces options sont envoyées avec la requête grâce au second paramètre de la fonction fetch(). Ce paramètre est un objet qui permet de définir : 

• la méthode HTTP, le body, c’est à dire les données qu’on souhaite envoyer,

• les headers qui donnent un peu plus d’information sur notre requête.

Voici un petit exercice, à réaliser sur cet éditeur CodePen.

Dans cet exercice nous voulons pouvoir entrer du texte dans le formulaire et l'envoyer vers un service web. Ce service web va simplement nous renvoyer notre contenu en plus d'autres informations et nous allons afficher le contenu renvoyé par le serveur.

1. Nous allons commencer par créer une fonction appelée send et qui va créer notre requête.

   Nous souhaitons créer une requête de type POST vers l'adresse suivante : https://mockbin.com/request, et y envoyer un contenu JSON ayant une propriété value qui contiendra la valeur du champ de saisie de la page (avec l'ID value). Par exemple : {value: document.getElementById("value").value}.

   Nous souhaitons aussi, lorsque la requête s'est bien envoyée, afficher le résulat renvoyé par le service web. Pour ce faire, nous allons afficher ce qui se trouve dans postData.text de la réponse dans le contenu HTML de l'élément ayant pour ID result.

2. Maintenant nous voulons envoyer notre requête, et donc appeler notre fonction send dès que nous soumettons le formulaire ayant pour ID form.

Dans ce chapitre, vous avez appris :

• Que l'envoi de données en HTTP se fait via certains verbs :  POST  ou  PUT

• À envoyer des données en HTTP.

Vous savez comment envoyer des requêtes à un service web pour lui demander des ressources ou en créer de nouvelles. Dans la partie suivante, nous aborderons l'asynchronisme en JavaScript afin d'exécuter du code en "parallèle".