Créer un objet XMLHttpRequest
Dans cette étape, vous allez apprendre à créer un objet XMLHttpRequest, qui est le mécanisme central pour effectuer des requêtes asynchrones en JavaScript. Nous allons construire sur le fichier HTML de l'étape précédente et ajouter la fonctionnalité XMLHttpRequest.
Ouvrez le fichier ~/projet/ajax-demo.html dans l'IDE Web et mettez à jour la section script pour créer un objet XMLHttpRequest :
<!doctype html>
<html>
<head>
<title>Démonstration XMLHttpRequest</title>
</head>
<body>
<h1>Exemple de requête AJAX</h1>
<button id="loadData">Charger les données</button>
<div id="result"></div>
<script>
document
.getElementById("loadData")
.addEventListener("click", function () {
// Créer un objet XMLHttpRequest
var xhr = new XMLHttpRequest();
// Journaliser la création de l'objet XMLHttpRequest
console.log("Objet XMLHttpRequest créé :", xhr);
});
</script>
</body>
</html>
Comprendre l'objet XMLHttpRequest
L'objet XMLHttpRequest (XHR) est une API intégrée au navigateur qui vous permet de :
- Créer des requêtes HTTP
- Envoyer des données à un serveur
- Recevoir des données d'un serveur
- Mettre à jour des parties d'une page web sans recharger
Méthodes clés de XMLHttpRequest
open() : Initialise une nouvelle requêtesend() : Envoie la requête au serveuronreadystatechange : Suive l'état de la requête
Compatibilité des navigateurs
XMLHttpRequest est pris en charge par tous les navigateurs modernes, ce qui en fait un choix fiable pour les communications AJAX. Le développement web moderne utilise également l'API Fetch, mais XMLHttpRequest reste largement utilisé.
Exemple de sortie
Lorsque vous cliquez sur le bouton "Charger les données", vous verrez un message dans la console démontrant la création de l'objet XMLHttpRequest :
Objet XMLHttpRequest créé : XMLHttpRequest {...}
