AJAX - L'objet XMLHttpRequest
La clé de voûte d'AJAX est l'objet XMLHttpRequest.
- Créer un objet XMLHttpRequest
- Définir une fonction de rappel
- Ouvrez l'objet XMLHttpRequest
- Envoyer une requête à un serveur
L'objet XMLHttpRequest
Tous les navigateurs modernes prennent en charge l' XMLHttpRequestobjet.
L' XMLHttpRequestobjet peut être utilisé pour échanger des données avec un serveur Web en arrière-plan. Cela signifie qu'il est possible de mettre à jour des parties d'une page Web, sans recharger toute la page.
Créer un objet XMLHttpRequest
Tous les navigateurs modernes (Chrome, Firefox, IE, Edge, Safari, Opera) ont un XMLHttpRequestobjet intégré.
Syntaxe pour créer un XMLHttpRequestobjet :
variable = new XMLHttpRequest();
Définir une fonction de rappel
Une fonction de rappel est une fonction passée en paramètre à une autre fonction.
Dans ce cas, la fonction de rappel doit contenir le code à exécuter lorsque la réponse est prête.
xhttp.onload = function() {
// What to do when the response is ready
}
Envoyer une demande
Pour envoyer une requête à un serveur, vous pouvez utiliser les méthodes open() et send() de l'
XMLHttpRequestobjet :
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Exemple
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Accès à travers les domaines
Pour des raisons de sécurité, les navigateurs modernes n'autorisent pas l'accès entre les domaines.
Cela signifie que la page Web et le fichier XML qu'elle tente de charger doivent se trouver sur le même serveur.
Les exemples sur W3Schools ouvrent tous des fichiers XML situés sur le domaine W3Schools.
Si vous souhaitez utiliser l'exemple ci-dessus sur l'une de vos propres pages Web, les fichiers XML que vous chargez doivent se trouver sur votre propre serveur.
Méthodes d'objet XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
Propriétés de l'objet XMLHttpRequest
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
La propriété onload
Avec l' XMLHttpRequestobjet, vous pouvez définir une fonction de rappel à exécuter lorsque la demande reçoit une réponse.
La fonction est définie dans la onloadpropriété de l' XMLHttpRequestobjet :
Exemple
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Fonctions de rappel multiples
Si vous avez plusieurs tâches AJAX sur un site Web, vous devez créer une fonction pour exécuter l' XMLHttpRequestobjet et une fonction de rappel pour chaque tâche AJAX.
L'appel de fonction doit contenir l'URL et la fonction à appeler lorsque la réponse est prête.
Exemple
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
La propriété onreadystatechange
La readyStatepropriété contient le statut de XMLHttpRequest.
La onreadystatechangepropriété définit une fonction de rappel à exécuter lorsque le readyState change.
La statuspropriété et les statusTextpropriétés contiennent le statut de l'objet XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
La onreadystatechangefonction est appelée chaque fois que readyState change.
Lorsque readyStateest égal à 4 et que l'état est égal à 200, la réponse est prête :
Exemple
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
L' onreadystatechangeévénement est déclenché quatre fois (1-4), une fois pour chaque modification de readyState.