Comprendre le fonctionnement d'AJAX, demander des données JSON au serveur avec fetch (et avec jQuery), attendre la réponse avec async et await, et afficher le résultat dans la page.
Une application de météo pour les voyageurs affiche la température des grandes villes du Maroc. Les données changent toutes les heures, et recharger toute la page à chaque mise à jour serait lent. Avec AJAX, la page demande seulement les données au serveur, en arrière-plan, et met à jour le tableau pendant que le visiteur continue de lire.
La page météo est affichée. Le tableau est vide.
AJAX (Asynchronous JavaScript And XML) désigne une technique : JavaScript envoie une requête HTTP en arrière-plan, reçoit des données (aujourd’hui en JSON) et met à jour une partie de la page.
Exemples : les suggestions pendant la recherche, le « J’aime » sans rechargement, le chat, les cartes.
async function chargerMeteo() {
try {
const reponse = await fetch('/api/meteo.json'); // 1. requête
if (!reponse.ok) throw new Error(reponse.status); // 2. code HTTP
const donnees = await reponse.json(); // 3. texte JSON → objet
for (const v of donnees.villes) { // 4. mise à jour de la page
corps.innerHTML += `<tr><td>${v.ville}</td><td>${v.temperature}</td><td>${v.ciel}</td></tr>`;
}
} catch (erreur) {
etat.textContent = 'Erreur de chargement';
}
}
fetch renvoie une promesse ; await attend sa réalisation (dans une fonction async).reponse.json() est aussi une promesse.throw est attrapé par catch (leçon B.5).$.getJSON('/api/produits.json', function (produits) {
console.log(`${produits.length} produits`);
});
// forme générale : $.ajax({ url, method: 'POST', data, success, error })
/api/meteo.json et /api/produits.json de DevLab sont de simples fichiers d’exemple. Une vraie API (côté serveur, Node.js en 2e année) renvoie des données à jour et accepte aussi POST, PUT, DELETE.Au restaurant, vous ne sortez pas pour aller chercher votre plat en cuisine : le serveur s'en charge pendant que vous discutez. AJAX, c'est pareil : la page continue de fonctionner pendant que la requête part et revient.
fetch ne renvoie pas les données tout de suite, mais une promesse : « je vous rappelle quand c'est prêt ». Avec await, on attend ce rappel avant de continuer.
const reponse = await fetch('/api/meteo.json'); const donnees = await reponse.json();
fetch ne lance pas d'erreur pour une réponse 404. Comment la détecter ?
const reponse = await fetch('/api/inconnu.json'); if (!reponse.ok) { // ok est false si le code n'est pas 2xx throw new Error(`Erreur ${reponse.status}`); // 404 } const donnees = await reponse.json();
Écrivez la requête qui envoie l'inscription { prenom: 'Salma', email: 'salma@gmail.com' } en JSON à l'adresse /api/inscriptions avec la méthode POST.
const reponse = await fetch('/api/inscriptions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prenom: 'Salma', email: 'salma@gmail.com' }), }); // Il faut un vrai serveur pour recevoir ces données (Node.js, PHP...).
Réécrivez le chargement de la météo avec .then au lieu de async / await.
fetch('/api/meteo.json') .then((reponse) => reponse.json()) .then((donnees) => console.log(donnees.villes.length)) .catch((erreur) => console.error(erreur));