Formation PUB040 : JavaScript, jQuery, Bootstrap et autres bibliothèques côté client, 2020 Les requêtes AJAX

4.2 Appel AJAX avec fetch()


Un appel AJAX permet d'exécuter du code côté serveur, par exemple en PHP, à partir du code côté client, par exemple JavaScript.

Je vous explique ici comment réaliser l'appel AJAX à l'aide de fetch() qui est disponible en JavaScript sans nécessiter de bibliothèque supplémentaire.

▼Publicité Le texte se poursuit plus bas

URL du code côté serveur

Le code côté serveur que l'appel AJAX doit exécuter peut être une simple page PHP à condition qu'elle fasse partie du même site Web que celle qui effectue l'appel AJAX.

Dans le cas où le code côté serveur doit être appelé par d'autres sites Web, il devra prendre la forme d'un service Web.

Dans un cas comme dans l'autre, l'appel AJAX doit connaître l'URL pour atteindre le code à exécuter.

JavaScript

fetch('supprimer-item.php')
.then((response) => {
    ...
})...

ou, avec un service Web :

JavaScript

fetch('https://domaineduservice.com/dossier/sousdossier')
.then((response) => {
    ...
})...

Appel GET ou POST

Selon la façon dont le code côté serveur a été pensé, il faut préciser le type d'appel. Généralement, il s'agit d'un appel de type GET ou POST.

Dès qu'on a des informations à fournir en plus de l'URL, il faut faire suivre l'URL d'une virgule puis placer les informations entre accolades.

JavaScript

fetch(..., {
    method: 'POST',
    ...
}).then((response) => {
    ...
})...

Entête HTTP

La requête AJAX peut fournir différentes paires clé-valeur dans l'entête HTTP.

Aucune de ces informations n'est obligatoire à moins que ce ne soit spécifiquement requis par le code côté serveur.

Plusieurs appels avec fetch ne spécifient d'ailleurs aucune clé dans l'entête HTTP.

Voicià titre d'exemple quelques informations que vous pourriez être appelé à utiliser. 

  • Content-Type : le type d'information que JavaScript envoie au serveur dans le body
  • Accept: le type d'information que le serveur retourne au code JavaScript
  • Authorization: ceci est courant lors de l'utilisation d'un service Web. Cette clé est utilisée dans un mécanisme pour prouver qui est à l'origine de l'appel.
JavaScript

fetch(..., {
    headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        Authorization: `Bearer ${jwt}`,
    },
    ...
}).then((response) => {
    ...
})...

Données fournies au code côté serveur

Il y a plusieurs techniques pour fournir des données lors d'un appel AJAX.

Vous utiliserez l'une ou l'autre selon la façon dont le code côté serveur a été écrit.

  • Directement dans l'URL en tant que paramètre.

    Remarquez les guillemets obliques (backticks) pour permettre d'interpréter la variable dans la chaîne.

    JavaScript

    fetch(`faire-quelque-chose.php&nom-parametre=${variable}`, {
        ...
    }).then((response) => {
        ...
    })...

  • Directement dans l'URL (URL avec barres obliques pour paramètres) :
    JavaScript

    fetch(`https://domaineautreservice.com/${variable}/api/operation`, {
        ...
    }).then((response) => {
        ...
    })...

  • Dans la configuration body. Dans cet exemple, elles sont converties au format JSON :
    JavaScript

    fetch(..., {
        body: JSON.stringify({'prenom': 'Annie', 'nomFamille': 'Gagnon'}),
        ...
    }).then((response) => {
        ...
    })...

Réception de la réponse

Un appel à fetch() est effectué de façon asynchrone.

Le seul endroit où on est assuré que l'appel est terminé, c'est dans le then(), dans le catch() ou dans le finally(). Les lignes de code qui sont placées après le fetch() pourraient donc être exécutées avant que l'appel soit terminé.

De pas sa nature asynchrone, fetch() retourne une promesse, c'est-à-dire un objet de type Promise qui indique notamment si l'appel a été réussi ou s'il a échoué.

Lorsque le code côté serveur a terminé son travail, le code JavaScript reçoit la réponse dans un premier then() puis la manipule immédiatement afin d'avoir accès au corps de la réponse (body) qui contient les données demandées.

JavaScript

fetch(..., {
    ...
}).then((response) => {
    // ici, le corps de la réponse n'est pas encore disponible
    return response.json();   
}).then((body) => {
    ...   // ici, on peut travailler avec les données reçues
}).catch((e) => {
    ...
});

// ici, on ne sait pas si l'appel AJAX est terminé

L'appel AJAX a-t-il fonctionné?

Il est important de toujours vérifier si l'appel AJAX a fonctionné afin de pouvoir réagir en cas d'errreur.

Ceci peut arriver, par exemple, si un problème de réseau survient ou si le serveur qui héberge le code ne répond pas.

JavaScript

fetch(..., {
  ...
}).then((response) => {
    return response.json();
}).then((body) => {
    ...
}).catch((e) => {
    console.log(e.toString());
    divReponse.innerHTML = "Un problème nous empêche de compléter le traitement demandé.";
});

Le code côté serveur a-t-il pu initialiser la réponse?

Un service Web, s'il a été correctement codé, doit retourner un code d'état HTTP dans la réponse.

Lorsqu'il s'agit d'une simple page PHP, il y a moins de contrôle sur ce qui a pu ne pas fonctionner. On aura toujours un code 200 si la page a pu être appelée. Dans le cas où le fichier PHP à exécuter a été renommé ou supprimé, on aura un code 404.

Le code 200 signifie que l'appel a réussi. Dans les faits, l'appel peut être considéré réussi si le code est situé statut entre 200 et 299 (en JavaScript, response.ok signifie que le code est entre 200 et 299).

On peut donc réagir si jamais quelque chose a empêché le service Web de répondre à notre demande.

Dans cet exemple, on lève une exception, ce qui causera l'exécution du catch().

JavaScript

fetch(..., {
  ...
}).then((response) => {
    if (!response.ok) {
        throw new Error("Problème - code d'état HTTP : " + response.status);
    }
    return response.json();
}).then((body) => {
    ...
}).catch((e) => {
    ...
});

Traitement de la réponse

Dans le cas où l'appel a réussi et que le service a initialisé une réponse, l'application pourra la traiter.

Le traitement consiste la plupart du temps à manipuler les informations reçues puis à les afficher.

Le plus souvent, le corps de la réponse sera au format JSON. Il faudra donc le désérialiser (voir « Manipulations JSON en JavaScript ») avant de pouvoir l'utiliser.

Dans l'objet JSON, il peut y avoir différentes structures de données comme :

  • une information simple
  • un tableau d'informations simples
  • un tableau associatif
  • un objet complexe
  • un tableau d'objets
  • etc.

Il faudra donc que le code réagisse selon le type de données reçues.

Si vous ne savez pas comment les informations sont organisées dans la réponse, voici trois façons de voir les données retournées :

  • utiliser un débogueur JavaScript pour questionner la variable qui contient la réponse
  • faire afficher la variable à l'écran dans son état brut ou encore de l'enregistrer dans un fichier journal
  • entrer l'URL du service Web directement dans la barre d'URL de votre navigateur (fonctionne seulement pour les services en GET). Les données retournées par le service apparaîtront directement à l'écran.

Exemple complet

Je vous propose un exemple simple qui consiste à récupérer quelques informations d'une page Web PHP dont voici le code :

PHP

...
?>
<div class="contenu">
    <a href="#" class="stylebouton" id="boutonAppelAjax">Appel AJAX</a>
    <div id="reponseAjax"></div>
</div>

...
<script src="appel-ajax.js"></script>

Dans cet exemple, la page PHP appelée par AJAX ne fait qu'encoder en JSON un texte qui utilise un paramètre reçu dans l'URL.

Un exemple plus complet aurait pu, par exemple, effectuer une requête dans une base de données.

Le PHP utilise un echo pour retourner des valeurs à l'appel AJAX.

Il s'agit d'un exemple simpliste mais ceci démontre comment le code JavaScript pourra récupérer le nom initialisé par le code PHP.

traitement-bidon.php

<?php
if (isset($_GET['nom'])) {
    echo json_encode(['salutation' => "Bonjour, {$_GET['nom']}!"]);
}
else {
    // ici, j'ai choisi de retourner une erreur 500. J'aurais aussi pu retourner une chaîne du genre "Bonjour, inconnu!"
    http_response_code(500);
}

L'appel AJAX en JavaScript se fera comme suit :

appel-ajax.js

document.addEventListener("DOMContentLoaded", function(event) {
    let boutonAppelAjax = document.getElementById('boutonAppelAjax');


    if (boutonAppelAjax != null) {
        boutonAppelAjax.onclick = effectuerAppelAjax;
    }
});

function effectuerAppelAjax(event) {
    event.preventDefault();

    const divReponse = document.getElementById('reponseAjax');

    if (divReponse != null) { 

        fetch('traitement-bidon.php?nom=toto')
        .then((response) => {
            if (!response.ok) {
                throw new Error("Problème - code d'état HTTP : " + response.status);
            }
            return response.json();
        }).then((body) => {
            divReponse.innerHTML = body.salutation;
        }).catch((e) => {
            console.log(e.toString());
            divReponse.innerHTML = "Un problème nous empêche de compléter le traitement demandé.";
        });
    }
    else {
        console.log("Erreur : la division reponseAjax n'existe pas.");
    }
}

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 22 novembre 2021
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre