Module 5Manipuler jQuery
Chapitre 14 sur 15
Découvrir AJAX
Échanger des données avec un serveur sans recharger la page : XMLHttpRequest, jQuery AJAX et fetch.
- ≈ 120 min
- 4 leçons
- 1 vidéo
- 3 exercices
Module 5Manipuler jQuery
Chapitre 14 sur 15
Échanger des données avec un serveur sans recharger la page : XMLHttpRequest, jQuery AJAX et fetch.
Objectifs
Avec ce chapitre, tu sauras…
XMLHttpRequest (open, send, readyState, status) ;$.ajax(), $.get(), $.getJSON(), $.post(), .load() ;fetch() avec async / await.Leçon 1
AJAX permet de :
NAVIGATEUR SERVEUR
1. un événement (clic, saisie)
2. JavaScript crée une requête ── requête HTTP ──► 3. traite la requête
(lit la base de données)
5. JavaScript lit la réponse ◄── réponse JSON ── 4. renvoie les données
6. et met à jour le DOM
→ la page n'est jamais rechargéeLeçon 2
Tableau: Créer et envoyer une requête
| Méthode | Rôle |
|---|---|
new XMLHttpRequest() | crée l'objet requête |
open(méthode, url, async) | prépare la requête : "GET" ou "POST", l'adresse, true pour asynchrone |
setRequestHeader(nom, valeur) | ajoute un en-tête (nécessaire pour un POST de formulaire) |
send() / send(données) | envoie la requête (sans données pour GET, avec pour POST) |
abort() | annule la requête |
getResponseHeader(nom), getAllResponseHeaders() | lit les en-têtes de la réponse |
| Propriété | Contenu |
|---|---|
readyState | l'état de la requête, de 0 à 4 |
status | le code HTTP de la réponse : 200, 404, 403… |
statusText | le texte du code : "OK", "Not Found" |
responseText | la réponse sous forme de chaîne (à convertir avec JSON.parse si c'est du JSON) |
responseXML | la réponse sous forme de document XML |
onreadystatechange | la fonction appelée à chaque changement de readyState |
readyState | État |
|---|---|
| 0 | requête non initialisée : open() pas encore appelée |
| 1 | connexion établie : open() appelée |
| 2 | requête reçue (en-têtes disponibles) |
| 3 | requête en cours de traitement (téléchargement) |
| 4 | requête terminée, réponse prête |
Leçon 3
| Option | Rôle |
|---|---|
type (ou method) | "GET" (par défaut), "POST", "PUT", "DELETE" |
data | les données à envoyer (objet, chaîne ou tableau) |
dataType | le type de données attendu en réponse : "json", "html", "text" |
contentType | le type des données envoyées |
timeout |
Leçon 4
| XMLHttpRequest | jQuery $.ajax | fetch | |
|---|---|---|---|
| dépendance | aucune | jQuery | aucune |
| écriture | longue (événements, états) | courte | courte |
| résultat | callbacks | callbacks ou .done() / .fail() |
1AJAX permet de…
2La réponse XMLHttpRequest est prête quand…
3Pour envoyer un formulaire en POST avec XMLHttpRequest, il faut…
4Dans jQuery 3, on remplace .success() par…
5$("#zone").load("page.html #menu") insère…
6Avec fetch, une réponse 404…
7Pour lire le corps JSON d'une réponse fetch :
L'essentiel du chapitre
XMLHttpRequest : open(méthode, url, true), setRequestHeader (POST), send() ; réponse prête si readyState === 4 et status === 200 ; responseText.$.ajax(url, { type, data, dataType, success, error }) ; .done(), .fail(), .always() (plus de .success()) ; $.get, $.getJSON, $.post, $(sel).load(url).fetch : renvoie une promesse ; await fetch(url), tester reponse.ok, puis await reponse.json() ; POST avec method, headers, body: JSON.stringify(...).file://) ; un autre domaine doit autoriser la requête (CORS).onload| la fonction appelée quand la requête est terminée (plus simple) |
headers | en-têtes supplémentaires |
success: function (data, status, xhr) | appelée en cas de succès |
error: function (xhr, status, message) | appelée en cas d'échec |
statusCode: { 404: function () { ... } } | une fonction par code HTTP |
| Méthode | Rôle |
|---|---|
$.get(url, [données], [callback]) | requête GET, tout type de réponse |
$.getJSON(url, [données], [callback]) | requête GET, réponse JSON convertie en objet |
$.post(url, [données], [callback], [type]) | requête POST |
$(sélecteur).load(url, [données], [callback]) | charge du HTML et l'insère dans les éléments sélectionnés |
promesse (await) |
| erreur 404 / 500 | à tester avec status | appelle error | ne rejette pas : tester reponse.ok |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "code.php", true);
xhttp.send();
const xhttp2 = new XMLHttpRequest();
xhttp2.open("GET", "code.php?prenom=Hassan&nom=FILALI", true); // données dans l'URL
xhttp2.send();
const xhttp3 = new XMLHttpRequest();
xhttp3.open("POST", "code.php", true);
xhttp3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp3.send("prenom=Hassan&nom=FILALI"); // données dans le corpsTableau: Recevoir la réponse
function chargerDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) { // terminé ET réussi
document.getElementById("demo").textContent = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}readyState === 4 signifie seulement que l'échange est terminé, pas qu'il a réussi : un fichier introuvable donne aussi readyState 4, avec status 404. Il faut tester les deux.
Une fonction réutilisable avec un callback
function chargerDoc(url, callback) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
if (this.status === 200) {
callback(this); // on transmet la requête à la fonction de rappel
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function afficherInfo(xhttp) {
document.getElementById("demo").textContent = xhttp.responseText;
}
chargerDoc("ajax_info.txt", afficherInfo);Si tu ouvres ta page par un double-clic (adresse file:///...), les requêtes AJAX vers des fichiers locaux sont bloquées par le navigateur pour des raisons de sécurité. Ouvre toujours la page avec Live Server (adresse http://127.0.0.1:5500/...). De même, un site ne peut interroger un autre domaine que si ce serveur l'autorise (règle CORS).
La méthode $.ajax()
$.ajax(url, { options });Depuis 2015, les navigateurs proposent fetch(), qui remplace XMLHttpRequest dans le code moderne. Elle renvoie une promesse (chapitre 6) et s'utilise naturellement avec async / await.
async function chargerUtilisateurs() {
try {
const reponse = await fetch("https://jsonplaceholder.typicode.com/users");
if (!reponse.ok) { // ok est vrai pour les codes 200 à 299
throw new Error(`Erreur HTTP ${reponse.status}`);
}
const utilisateurs = await reponse.json(); // convertit le JSON en tableau d'objets
const liste = document.querySelector("#liste");
utilisateurs.forEach(u => {
const li = document.createElement("li");
li.textContent = `${u.name} (${u.address.city})`;
liste.append(li);
});
} catch (err) {
console.error("Chargement impossible :", err.message);
}
}
chargerUtilisateurs();const reponse = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: "Bonjour", body: "Mon message", userId: 1 }),
});
const resultat = await reponse.json();
console.log(resultat); // l'objet créé, avec un id renvoyé par le serveurAvec fetch et JSONPlaceholder (/users), crée un annuaire : au chargement, affiche les 10 utilisateurs sous forme de cartes (nom, e-mail, ville, entreprise). Un champ de recherche filtre les cartes en direct (événement input) sur le nom ou la ville, sans nouvelle requête. Affiche « Chargement… » pendant la requête.
Crée un fichier stagiaires.json contenant un tableau de 5 stagiaires (nom, filière, moyenne). Avec XMLHttpRequest, charge ce fichier au clic sur un bouton et affiche les stagiaires dans un tableau HTML, triés par moyenne décroissante. Ouvre la page avec Live Server.
$.ajax("/jquery/getjsondata", {
dataType: "json", // la réponse est convertie en objet automatiquement
timeout: 500,
success: function (data, status, xhr) {
$("p").append(data.firstName + " " + data.middleName + " " + data.lastName);
},
error: function (xhr, textStatus, errorMessage) {
$("p").append("Erreur : " + errorMessage);
},
});$.ajax("/jquery/submitData", {
type: "POST",
data: { myData: "Mes données." },
success: function (data, status) {
$("p").append("status : " + status + ", data : " + data);
},
error: function (xhr, textStatus, errorMessage) {
$("p").append("Erreur : " + errorMessage);
},
});Le résumé propose une « syntaxe équivalente » avec ajaxReq.success(...) et ajaxReq.error(...). Ces méthodes ont été supprimées dans jQuery 3 : elles provoquent une TypeError. On utilise .done(), .fail() et .always() :
$.ajax("GetJsonData", { dataType: "json", timeout: 500 })
.done(data => $("p").append(data.firstName))
.fail((xhr, textStatus, errorMessage) => $("p").append("Erreur : " + errorMessage))
.always(() => console.log("Requête terminée"));
Tableau: Les raccourcis : $.get, $.getJSON, $.post, .load
$.get("/data.txt", function (data, textStatus) {
console.log("status : " + textStatus + ", data : " + data);
});
$.getJSON("/jquery/getjsondata", { name: "Ali" })
.done(data => $("p").append(data.firstName))
.fail((xhr, settings, ex) => console.log("Échec : " + ex));
$.post("/jquery/submitData", { myData: "Mes données." }, function (data, status) {
$("p").append("status : " + status + ", data : " + data);
});
$("#msgDiv").load("/demo.html"); // tout le contenu de demo.html
$("#msgDiv").load("/demo.html #myHtmlContent"); // seulement l'élément #myHtmlContent de demo.htmlLe résumé écrit la syntaxe $.load(url, ...). load n'est pas une fonction de $ : c'est une méthode qui s'appelle sur une sélection, $("#msgDiv").load(url), puisqu'elle insère le HTML reçu dans les éléments sélectionnés (comme le montre d'ailleurs son exemple). Si le sélecteur ne trouve aucun élément, la requête n'est pas envoyée.
jsonplaceholder.typicode.com est un faux serveur public et gratuit qui répond en JSON : /users (10 utilisateurs), /posts (100 articles), /todos (200 tâches). Il accepte aussi les requêtes POST, PUT et DELETE, qu'il simule sans rien enregistrer. Il est idéal pour tes TP AJAX sans écrire de code serveur.
Récupérer des données d'une API avec fetch (en anglais).
Réécris l'exercice 14.2 deux fois : une fois avec $.getJSON(), une fois avec fetch et async / await. Dans les deux cas, affiche « Erreur de chargement » dans la page si le fichier est introuvable (teste en changeant son nom).