Envoyez des données, comment ça marche ?
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.
Envoyez des données avec une requête POST
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.
À vous de jouer !
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.
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'IDvalue
). 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 IDresult
.Maintenant nous voulons envoyer notre requête, et donc appeler notre fonction
send
dès que nous soumettons le formulaire ayant pour IDform
.
En résumé
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".