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
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.
fetch('supprimer-item.php')
.then((response) => {
...
})...
ou, avec un service Web :
fetch('https://domaineduservice.com/dossier/sousdossier')
.then((response) => {
...
})...
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.
fetch(..., {
method: 'POST',
...
}).then((response) => {
...
})...
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 n'utilisent d'ailleurs aucune clé dans l'entête HTTP.
Voici à titre d'exemple quelques informations que vous pourriez être appelés à utiliser.
fetch(..., {
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
Authorization: `Bearer ${jwt}`,
},
...
}).then((response) => {
...
})...
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.
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) => {
...
})...
fetch(`https://domaineautreservice.com/${variable}/api/operation`, {
...
}).then((response) => {
...
})...
fetch(..., {
body: JSON.stringify({'prenom': 'Annie', 'nomFamille': 'Gagnon'}),
...
}).then((response) => {
...
})...
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 par 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.
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é
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.
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é.";
});
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().
fetch(..., {
...
}).then((response) => {
if (!response.ok) {
throw new Error("Problème - code d'état HTTP : " + response.status);
}
return response.json();
}).then((body) => {
...
}).catch((e) => {
...
});
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 à l'aide de JavaScript 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 :
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 :
Je vous propose un exemple simple qui consiste à récupérer quelques informations d'une page Web PHP dont voici le code :
<!DOCTYPE html>
<html>
<head>
<script src="appel-ajax.js" defer></script>
</head>
<body>
<div class="contenu">
<a href="#" class="stylebouton" id="boutonAppelAjax">Appel AJAX</a>
<div id="reponseAjax"></div>
</div>
</body>
</html>
</div>
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.
<?php
if (isset($_GET['nom'])) {
// remarquez que les paramètres JSON_PRETTY_PRINT, JSON_UNESCAPED_UNICODE et JSON_UNESCAPED_SLASHES assurent les caractères spéciaux seront correctement encodés.
echo json_encode(['salutation' => "Bonjour, {$_GET['nom']}!"], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
}
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 :
// le DOMContentedLoaded est requis seulement si ce fichier JavaScript n'est pas chargé avec l'attribut defer
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.");
}
}
});
Site fièrement hébergé chez A2 Hosting.
