Écrivez du JavaScript pour le web

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.

var request = new XMLHttpRequest();
request.open("POST", "http://url-service-web.com/api/users");
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify(jsonBody));

Comme vous pouvez le voir, nous avons passé le contenu à envoyer au service web à notre fonction  send() . É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 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. Le header en question est  Content-Type , avec la valeur  application/json . Ainsi, il faut ajouter cette ligne :  request.setRequestHeader("Content-Type", "application/json");

Pratiquez !

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 objet AJAX.

   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.

   N'oubliez pas d'annuler le comportement par défaut de la soumission du formulaire, sinon votre page va se recharger

En résumé

Dans ce chapitre, vous avez appris :

• Que l'envoi de données en HTTP se fait via certains verbs ;

• À 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".