Guide javascript : Les requêtes AJAX

Web

Les requêtes AJAX permettent d’effectuer des requêtes HTTP directement depuis du code javascript. Découvrez comment les utiliser dans ce guide.

Effectuer des requêtes HTTP en javascript est extrêmement utile. Cela permet de récupérer des données se trouvant sur un autre fichier de notre serveur, ou même des données d’une API web externe. Elles sont alors stockées dans une variable afin de pouvoir utiliser ces données par la suite dans notre code.


Il existe plusieurs méthodes pour effectuer ces requêtes, mais pour ce guide, nous allons nous pencher sur la fonction fetch. Cette fonction prend en paramètre l’adresse vers laquelle effectuer la requête, et, optionnellement, le contenu de la requête. La fonction fetch est asynchrone et ne renvoie donc pas directement les données reçues. A la place, elle renvoie une Promise.

Les Promises

Globalement, une Promise est un objet javascript qui nous dit « Pour l’instant je n’ai rien, mais plus tard, j’aurais des données ».

let myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Test");
    }, 1000);
});
 
console.log("Ma Promise est créée.");

Dans ce code, je crée une Promise en lui disant d’attendre une seconde (grâce à setTimeout), puis de se résoudre avec comme donnée la chaine de caractère “Test”.
Cependant, le reste du programme n’attendra pas cette seconde. La ligne suivante (le console.log) sera directement exécutée en parallèle du code de la Promise ! C’est ce que l’on appelle le javascript asynchrone.

Note: j’utilise les fonctions fléchées dans ce guide. Si vous ne les connaissez pas, le principal est de retenir que :

x => x*4

Correspond à la fonction anonyme suivante :

function(x){
    return x*4
}

Il n’est pas très important que vous reteniez ici comment créer une Promise, c’est pourquoi je ne l’expliquerai pas en détail. L’important, c’est de comprendre comment utiliser ses données. En effet, pour l’instant, nous avons créé notre Promise, mais nous ne lui avons pas dit quoi faire de ses données une fois résolue. Ce code se contentera donc d’afficher la ligne “Ma Promise est créée » dans la console.

Pour exploiter les données de la fonction, nous allons utiliser la méthode then() de la Promise. Cette méthode prend en argument une fonction, avec elle-même comme argument le résultat de la Promise (“Test” dans notre exemple). Cela sera plus clair avec un nouvel exemple :

let myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Test");
    }, 1000);
});
 
myPromise.then( result => {
    console.log(result);
})
 
console.log("Ma Promise est créée.");

Ici, nous avons donc dit à notre Promise qu’une fois ses données obtenues, elle doit les afficher dans la console. Notez que le texte “Ma Promise est créée” sera affiché avant le texte “Test”, car la méthode then() ne sera effectuée qu’à la résolution de notre Promise (c’est à dire, au bout d’une seconde), et que pendant ce temps, le reste de notre code continue à être exécuté.

En plus de then(), vous pouvez également utiliser la méthode catch() qui sera appelée en cas d’erreur n’importe où dans la Promise ou dans l’une des méthodes then().

myPromise.then( result => {
    console.log(result);
})
.catch( error => {
    console.log("Une erreur est survenue: ", error);
})

Grâce à catch(), si une erreur survient, on l’affiche dans la console.

Utiliser fetch

Maintenant que nous savons utiliser les Promise, il est temps d’utiliser la fonction fetch pour effectuer nos requêtes HTTP. L’une des premières choses à faire est de choisir le format des données que nous allons envoyer et recevoir, les plus courantes étant le JSON et le XML.
Dans cet exemple, nous utiliserons le format JSON et dirigerons nos requêtes vers un simple fichier PHP local appelé exemple.php, que nous placerons dans le même dossier que notre fichier javascript.

<?php
 
//On crée un tableau associatif comme données à envoyer
$output["town"] = "Strasbourg";
$output["name"] = "Master CAWEB";
$output["year"] = 2021;
 
//On envoie les données sans oublier de les convertir au format JSON
echo json_encode($output);
 
?>

Notre fichier PHP est très simple, il génère des données puis les envoie au format JSON. Essayons maintenant de récupérer ces données dans notre fichier Javascript.
Pour cela, on utilise fetch en lui précisant l’adresse de la requête. Dans notre cas, le fichier cible se trouve dans le même dossier, il suffit donc d’indiquer son nom.
Notez que pour une requête vers un site externe, c’est ici qu’il faut indiquer l’adresse HTTP de ce site.

let request = fetch("exemple.php");
console.log(request);

Si on ne précise pas le contenu de la requête comme 2e argument de la fonction fetch, il effectuera par défaut une requête GET. Nous pouvons voir grâce au console.log que la fonction fetch nous retourne bien une Promise. Utilisons à présent ce que nous avons appris (la méthode then) pour en extraire les données !

Attention cependant, nous ne pouvons pas encore exploiter le résultat de la Promise tel quel. Il y a deux choses qui nous intéressent dans la réponse de la requête : 

Cette méthode json() va à son tour nous retourner… une Promise ! Qui elle contiendra enfin nos données tant convoitées. Il faudra donc chaîner deux méthodes then pour récupérer ces données.

let request = fetch("exemple.php");
 
request.then( response => {
    //si la requête a réussi, on convertit les données
    if (response.ok) {
        return response.json();
    }
    // sinon, on provoque une erreur
    else {
        throw new Error("Requête échouée avec le status " + response.status);
    }
})
.then( data => {
    // On peut ici utiliser nos données, converties en objet Javascript
    // Notez que le nom des propriétés de l'objet corresponds aux nom 
    // que l'on avait choisi dans notre tableau associatif en PHP
    console.log(data.name + " à " + data.town + " en " + data.year );
})
.catch( error => {
    // Un petit bloc catch pour attrapper les eventuelles erreurs
    console.log("Erreur: " + error);
})

Parfait, vous savez maintenant faire des requêtes GET en Javascript !

Les requêtes GET, c’est une chose, mais si on veut envoyer des données aux serveurs, puis recevoir une réponse en fonction de ces données ? Penchons nous à présent sur les requêtes POST.

Pour cela, nous allons devoir modifier notre fichier PHP. Dans cet exemple, le fichier va recevoir deux nombres, puis nous envoyer le résultat de l’addition, la multiplication et la soustraction.


<?php
 
// On récupère l'input JSON et on le convertit en objet PHP
$input = json_decode(file_get_contents("php://input"));;
 
// On fait nos calculs avec les données.
// A nouveau, le nom des propriétés de l'objet correspondent
// à ceux qu'on avait choisi en Javascript
$output["plus"] = $input->num1 + $input->num2;
$output["minus"] = $input->num1 - $input->num2;
$output["times"] = $input->num1 * $input->num2;
 
// On envoie le tout en JSON
echo json_encode($output);
 
?>

Le code est très sommaire (on ne vérifie pas que l’on reçoit bien des nombres, par exemple), mais ce sera suffisant pour notre exemple.

Maintenant il va falloir, grâce à un objet, préciser le contenu de la requête dans notre code Javascript.

Il y a énormément de propriétés que l’on peut changer pour modifier la requête. Nous nous intéresserons ici aux suivantes : 

Voila le code final :

let body = {
    num1: 8,
    num2: 6
}
 
// On définit le contenu de notre requête
// Sans oublier de convertir le body en JSON !
let content = {
    body: JSON.stringify(body),
    method: "POST",
    headers: {
      'Content-Type': 'application/json'
    },
};
 
// On indique le contenu de la requête comme 2e argument de fetch
let request = fetch("exemple.php", content);
 
 
// Cette partie là ne change pas
request.then( response => {
    if (response.ok) {
        return response.json();
    }
    else {
        throw new Error("Requête échouée avec le status" + response.status);
    }
})
.then( data => {
    console.log("addition: " + data.plus);
    console.log("soustraction: " + data.minus);
    console.log("multiplication: " + data.times);
})
.catch( error => {
    console.log("Erreur: " + error);
})

Et voilà, vous savez à présent utiliser les requêtes AJAX en Javascript !
Dans un prochain guide, nous verrons comment utiliser ces requêtes pour récupérer le contenu d’une page locale d’un site WordPress directement en Javascript.

Articles précedents et suivants

Autres articles