• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 22/07/2020

Récupérez des données d'un service web

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Maintenant que nous savons ce qu'est une requête HTTP, il ne nous reste plus qu'à apprendre à en créer une en JavaScript pour récupérer des données, comme la météo. C'est là qu'AJAX entre en jeu !

AJAX ? Le héros grec ? La marque de produits nettoyant ?

Aucun des deux 😃. AJAX signifie en fait Asynchronous JavaScript And XML. Il s'agit d'un ensemble d'objets et de fonctions mis à disposition par le langage JavaScript, afin d'exécuter des requêtes HTTP de manière asynchrone.

AJAX va nous permettre d'exécuter des requêtes HTTP sans avoir besoin de recharger la page du navigateur. Cela a plusieurs avantages :

  • Avoir un site plus réactif car on n'a pas besoin de recharger toute la page dès qu'on a besoin de mettre à jour une partie du contenu ;

  • Améliorer l'expérience utilisateur avec du nouveau contenu qui se charge au fur et à mesure qu'on le découvre, par exemple.

Envoyez une première requête

Voyons maintenant comment on peut construire et envoyer une requête HTTP avec AJAX.

Si vous vous souvenez du chapitre précédent, vous devez avoir deviné que nous allons créer une requête HTTP avec la méthode GET, afin de récupérer des données. C'est parti !

var request = new XMLHttpRequest();
request.open("GET", "http://url-service-web.com/api/users");
request.send();

Ce code nous permet d'envoyer une requête HTTP de type GET au service web se trouvant à l'adresse  http://url-service-web.com/api/users .

Voici ce que fait le code, ligne par ligne :

  • Ligne 1 : on crée un nouvel objet de type  XMLHttpRequest  qui correspond à notre objet AJAX. C'est grâce à lui qu'on va créer et envoyer notre requête ;

  • Ligne 2 : on demande à ouvrir une connexion vers un service web. C'est ici que l'on précise quelle méthode HTTP on souhaite, ainsi que l'URL du service web ;

  • Ligne 3 : on envoie finalement la requête au service web.

Récupérez les données au format JSON

Maintenant que nous savons comment construire et envoyer une requête HTTP, il faut récupérer et interpréter son résultat.

Un service web peut choisir le format qu'il veut pour nous renvoyer des données, mais le plus courant et le plus simple est le format JSON.

Qu'est-ce que le format JSON ?

JSON signifie JavaScript Object Notation. Il s'agit d'un format textuel (contrairement à un format binaire plus léger mais impossible à lire à l'œil humain), se rapprochant en termes de syntaxe de celui des objets dans le langage JavaScript.

Ainsi, l'objet JavaScript suivant :

const obj = {
name: "Mon contenu",
id: 1234,
message: "Voici mon contenu",
author: {
name: "John"
},
comments: [
{
id: 45,
message: "Commentaire 1"
},
{
id: 46,
message: "Commentaire 2"
}
]
};

sera retranscrit ainsi en JSON :

{
"name": "Mon contenu",
"id": 1234,
"message": "Voici mon contenu",
"author": {
"name": "John"
},
"comments": [
{
"id": 45,
"message": "Commentaire 1"
},
{
id: 46,
"message": "Commentaire 2"
}
]
}

Vous pouvez voir comme la syntaxe est similaire entre les 2. Alors qu'en JavaScript il n'est pas nécessaire de mettre les propriétés (comme  name ,  id ,  message , etc.), entre guillemets, cela l'est en JSON. En JavaScript, votre objet est assigné à une variable, alors qu'en JSON on ne fait que décrire une structure.

Le gros avantage de ce format lorsqu'il est utilisé avec le langage JavaScript est qu'il n'y a pas besoin de le parser comme on le ferait avec du XML par exemple. En effet, lorsque l'on manipule un format de données comme le XML, (que vous pouvez comparer à du HTML dans sa forme) il est nécessaire de le parser. C'est-à-dire que notre application doit le lire et le comprendre afin d'en faire ce qu'on veut. C'est une opération généralement complexe que l'on laisse à du code externe développé et éprouvé par d'autres personnes, afin de gagner du temps et d'éviter les erreurs. Mais pour le JSON c'est différent, car c'est une syntaxe qui vient des objets en JavaScript. Ainsi, votre navigateur sait directement le lire et le transformer en objets JavaScript. Si l'on reprend l'exemple de JSON précédent, il nous fournira donc un objet JavaScript comme celui du premier échantillon de code ci-dessus.

Le deuxième avantage de ce format est sa légèreté par rapport à un format comme le XML, qui reste bien plus verbeux, c'est-à-dire avec plus de texte. C'est un gros avantage lorsqu'on communique avec un service web, car cela permet d'optimiser les temps de réponse. En effet, un nombre plus faible d'octets a besoin de transiter dans le réseau.

Récupérez le résultat de la requête

Avec tout ce que l'on vient d'apprendre, il n'est plus très difficile d'utiliser le résultat de la requête pour en faire ce que l'on veut.

Pour cela, nous allons devoir utiliser la propriété  onreadystatechange  en lui passant une fonction. Cette fonction sera appelée à chaque fois que l'état de la requête évolue.

Voici les différents états possibles :

  • UNSENT  (code 0) : l'objet est prêt mais la méthode  open()  n'a pas encore été appelée ;

  • OPENED  (code 1) :  open()  a été appelé ;

  • HEADERS_RECEIVED  (code 2) :  send()  a été appelé, les headers et  status  sont disponibles au sein de l'objet ;

  • LOADING  (code 3) : réception en cours, les données reçues sont partielles ;

  • DONE  (code 4) : requête terminée.

C'est  DONE  qui va nous intéresser car c'est à ce moment-là que la requête est terminée et que nous venons de recevoir le résultat du service web. Pour récupérer l'état actuel de la requête, la fonction que l'on passe à  onreadystatechange  contiendra un objet  this  directement accessible dans la fonction, et qui nous permettra d'accéder aux propriétés suivantes :

  • readyState  : qui contient l'état de la requête ;

  • status  : qui contient le code de statut de la requête (souvenez-vous, 2xx quand ça s'est bien passé, 3xx pour les redirections, 4xx pour les erreurs...) ;

  • responseText  : qui contient la réponse du service web au format texte. Ainsi, si le texte que l'on attend est au format JSON, il va falloir le transformer en objet JavaScript avec la fonction  JSON.parse(texteJSON) .

Voici comment procéder pour récupérer la météo actuelle sur Paris avec l'API fournie par www.prevision-meteo.ch :

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
var response = JSON.parse(this.responseText);
console.log(response.current_condition.condition);
}
};
request.open("GET", "https://www.prevision-meteo.ch/services/json/paris");
request.send();

Vous pouvez voir dans l'exemple ci-dessus que l'URL passée à la fonction  open()  a changé et correspond à la récupération de la météo pour Paris. Le type de requête est GET car nous voulons récupérer les données.

Ensuite, nous pouvons voir l'utilisation de la propriété  onreadystatechange . Nous lui passons une fonction qui sera appelée dès que l'état de la requête changera. Nous vérifions donc d'abord si la requête est terminée et si elle s'est bien déroulée, grâce aux propriétés  readyState  et  status  de l'objet interne  this . Si tout est bon, alors nous utilisons la fonction  JSON.parse()  afin de transformer le texte JSON de la réponse en objet JavaScript. Puis, nous affichons dans la console la météo actuelle, dont voici l'extrait JSON reçu depuis le service web à l'heure où j'écris ces lignes :

Un extrait JSON de la réponse à la requête demandant la météo à Paris
Extrait JSON météo Paris

Comme vous pouvez le voir, dans l'exemple de code, j'accède à l'objet  current_condition  et j'affiche la propriété  condition , qui contient dans mon cas "Nuit nuageuse" (ce qui est assez fréquent à Paris :D).

Pratiquez !

Exercez-vous maintenant avec ce que nous venons d'apprendre.

Rendez-vous dans cet éditeur CodePen pour réaliser les exercices suivants:

Dans cet exercice nous voulons récupérer la météo actuelle à Paris et l'afficher dès que nous cliquons sur le bouton "Quelle est la météo sur Paris ?"

  • Etape 1: Nous allons commencer par la création d'une fonction askWeather qui va créer une requête AJAX de type GET vers le service web avec l'URL https://www.prevision-meteo.ch/services/json/paris. Cela a pour but de demander la météo actuelle sur Paris. Toujours dans cette fonction, nous allons envoyer la requête avec la méthode send()

     

  • Etape 2: Maintenant, nous voudrions récupérer la réponse du service web et l'afficher dans l'élément ayant pour ID weather-result. Modifiez donc notre fonction askWeather afin de récupérer la réponse du service web dès que tout s'est bien passé (grâce au statut de la requête et à l'état de la demande). Le service web vous retournera une réponse au format JSON, et vous aurez besoin d'afficher la propriété condition se trouvant dans l'objet current_condition. Voici à quoi ressemble la réponse JSON :

{
"current_condition": {
"condition": "Beau temps",
...
},
...
}
  •  Etape 3: Enfin, nous voulons afficher la météo (et donc appeler notre fonction askWeather) dès que nous cliquons sur le bouton ayant pour ID ask-weather.

En résumé

Dans ce chapitre, vous avez appris :

  • Ce qu'est AJAX ;

  • Comment l'utiliser pour faire une requête simple à un service web ;

  • Ce qu'est le format JSON ;

  • En quoi ce format est adapté aux API et au JavaScript ;

  • Comment récupérer les données envoyées par un service web.

Maintenant que l'on sait faire une requête de type GET pour récupérer des données du service web, nous allons voir comment faire une requête POST pour envoyer des données au service web. Mais avant ça, voyons comment préparer nos données à être envoyées au service web.

 

Exemple de certificat de réussite
Exemple de certificat de réussite