AJAX - L'objet XMLHttpRequest
La clé de voûte d'AJAX est l'objet XMLHttpRequest.
L'objet XMLHttpRequest
Tous les navigateurs modernes prennent en charge l'objet XMLHttpRequest.
L'objet XMLHttpRequest peut être utilisé pour échanger des données avec un serveur 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, Edge (et IE7+), Safari, Opera) ont un objet XMLHttpRequest intégré.
Syntaxe de création d'un objet XMLHttpRequest :
variable = new XMLHttpRequest();
Exemple
var xhttp = new XMLHttpRequest();
Le fichier "ajax_info.txt" utilisé dans l'exemple ci-dessus est un simple fichier texte et ressemble à ceci :
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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 |
|---|---|
| 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") |