Pour réaliser une requête AJAX, voici les étapes à suivre :
1. Créez un objet XMLHttpRequest (XHR) en utilisant la méthode `XMLHttpRequest()`. Cet objet XHR permet de communiquer avec le serveur sans avoir besoin de rafraîchir la page.
1. Configurez la requête en appelant la méthode `open()` de l’objet XHR. Cette méthode prend trois paramètres : la méthode HTTP à utiliser (par exemple GET ou POST), l’URL à appeler et un booléen déterminant si la requête doit être asynchrone ou non (true pour asynchrone).
1. Définissez les en-têtes HTTP à utiliser pour la requête en appelant la méthode `setRequestHeader()`.
1. Envoyez la requête en utilisant la méthode `send()` de l’objet XHR. Si la requête est asynchrone, vous pouvez passer des données en paramètre.
1. Gérez la réponse du serveur en utilisant l’événement `onreadystatechange` de l’objet XHR. Lorsque l’état de la requête change, l’événement est déclenché et vous pouvez récupérer les données de la réponse en utilisant les propriétés de l’objet XHR comme `responseText` ou `responseXML`.
1. Traitez les données de la réponse et mettez à jour votre page ou votre application en conséquence.
Voici un exemple de code qui illustre ces étapes :
```
// 1. Créez un objet XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2. Configurez la requête
xhr.open(‘GET’, ‘https://api.example.com/data.json’, true);
// 3. Définissez les en-têtes HTTP
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);
// 4. Envoyez la requête
xhr.send();
// 5. Gérez la réponse
xhr.onreadystatechange = function() {
if (xhr.readyState = XMLHttpRequest.DONE && xhr.status = 200) {
var data = JSON.parse(xhr.responseText);
// 6. Traitez les données
console.log(data);
}
};
```
Ce code envoie une requête GET asynchrone à l’URL `https://api.example.com/data.json`, avec un en-tête `Content-Type` de type JSON. Lorsque la réponse est reçue, elle est convertie en objet JavaScript à l’aide de la méthode `JSON.parse()`, puis affichée dans la console.
