L' objet XMLHttpRequest
Tous les navigateurs modernes ont un objet XMLHttpRequest intégré pour demander des données à un serveur.
Tous les principaux navigateurs ont un analyseur XML intégré pour accéder et manipuler XML.
L'objet XMLHttpRequest
L'objet XMLHttpRequest peut être utilisé pour demander des données à un serveur Web.
L'objet XMLHttpRequest est le rêve d'un développeur , car vous pouvez :
- Mettre à jour une page Web sans recharger la page
- Demander des données à un serveur - après le chargement de la page
- Recevoir des données d'un serveur - après le chargement de la page
- Envoyer des données à un serveur - en arrière-plan
XMLHttpRequest Example
Lorsque vous tapez un caractère dans le champ de saisie ci-dessous, un XMLHttpRequest est envoyé au serveur et des suggestions de noms sont renvoyées (du serveur) :
Exemple
Start typing a name in the input field below:
Suggestions:
Envoi d'un XMLHttpRequest
Tous les navigateurs modernes ont un objet XMLHttpRequest intégré.
Une syntaxe JavaScript courante pour l'utiliser ressemble beaucoup à ceci :
Exemple
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Création d'un objet XMLHttpRequest
La première ligne de l'exemple ci-dessus crée un objet XMLHttpRequest :
var xhttp = new XMLHttpRequest();
L'événement onreadystatechange
La propriété readyState contient le statut de XMLHttpRequest.
L' événement onreadystatechange est déclenché chaque fois que readyState change.
Lors d'une requête serveur, le readyState passe de 0 à 4 :
0 : requête non initialisée
1 : connexion au serveur établie
2 : requête reçue
3 : traitement de la requête
4 : requête terminée et réponse prête
Dans la propriété onreadystatechange, spécifiez une fonction à exécuter lorsque readyState change :
xhttp.onreadystatechange = function()
Lorsque readyState est 4 et que status est 200, la réponse est prête :
if (this.readyState == 4 && this.status == 200)
Propriétés et méthodes XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | 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 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
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.
La propriété responseText
La propriété responseText renvoie la réponse sous forme de chaîne.
Si vous souhaitez utiliser la réponse en tant que chaîne de texte, utilisez la propriété responseText :
Exemple
document.getElementById("demo").innerHTML = xmlhttp.responseText;
La propriété responseXML
La propriété responseXML renvoie la réponse sous la forme d'un objet DOM XML.
Si vous souhaitez utiliser la réponse en tant qu'objet DOM XML, utilisez la propriété responseXML :
Exemple
Demandez le fichier cd_catalog.xml et utilisez la réponse en tant qu'objet DOM XML :
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
OBTENIR ou POSTER ?
GET est plus simple et plus rapide que POST et peut être utilisé dans la plupart des cas.
Cependant, utilisez toujours les requêtes POST lorsque :
- Un fichier en cache n'est pas une option (mettre à jour un fichier ou une base de données sur le serveur)
- Envoi d'une grande quantité de données au serveur (POST n'a pas de limitation de taille)
- En envoyant des entrées utilisateur (qui peuvent contenir des caractères inconnus), POST est plus robuste et sécurisé que GET
L'url - Un fichier sur un serveur
Le paramètre url de la méthode open() est une adresse vers un fichier sur un serveur :
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Le fichier peut être n'importe quel type de fichier, comme .txt et .xml, ou des fichiers de script de serveur comme .asp et .php (qui peuvent effectuer des actions sur le serveur avant de renvoyer la réponse).
Asynchrone - Vrai ou Faux ?
Pour envoyer la requête de manière asynchrone, le paramètre async de la méthode open() doit être défini sur true :
xmlhttp.open("GET", "xmlhttp_info.txt", true);
L'envoi de requêtes de manière asynchrone est une énorme amélioration pour les développeurs Web. De nombreuses tâches effectuées sur le serveur prennent beaucoup de temps.
En envoyant de manière asynchrone, le JavaScript n'a pas à attendre la réponse du serveur, mais peut à la place :
- exécuter d'autres scripts en attendant la réponse du serveur
- traiter la réponse quand la réponse est prête
Asynchrone = vrai
Lorsque vous utilisez async = true, spécifiez une fonction à exécuter lorsque la réponse est prête dans l'événement onreadystatechange :
Exemple
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Asynchrone = faux
Pour utiliser async = false, remplacez le troisième paramètre de la méthode open() par false :
xmlhttp.open("GET", "xmlhttp_info.txt", false);
L'utilisation de async = false n'est pas recommandée, mais pour quelques petites requêtes, cela peut convenir.
N'oubliez pas que JavaScript ne continuera PAS à s'exécuter tant que la réponse du serveur n'est pas prête. Si le serveur est occupé ou lent, l'application se bloque ou s'arrête.
Remarque : lorsque vous utilisez async = false, n'écrivez PAS de fonction onreadystatechange - placez simplement le code après l'instruction send() :
Exemple
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Analyseur XML
Tous les navigateurs modernes ont un analyseur XML intégré.
Le modèle d'objet de document XML (le DOM XML) contient de nombreuses méthodes pour accéder et modifier XML.
Cependant, avant qu'un document XML soit accessible, il doit être chargé dans un objet DOM XML.
Un analyseur XML peut lire du texte brut et le convertir en un objet DOM XML.
Analyser une chaîne de texte
Cet exemple analyse une chaîne de texte dans un objet DOM XML et en extrait les informations avec JavaScript :
Exemple
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Anciens navigateurs (IE5 et IE6)
Les anciennes versions d'Internet Explorer (IE5 et IE6) ne prennent pas en charge l'objet XMLHttpRequest.
Pour gérer IE5 et IE6, vérifiez si le navigateur supporte l'objet XMLHttpRequest, ou bien créez un ActiveXObject :
Exemple
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Les anciennes versions d'Internet Explorer (IE5 et IE6) ne prennent pas en charge l'objet DOMParser.
Pour gérer IE5 et IE6, vérifiez si le navigateur supporte l'objet DOMParser, ou bien créez un ActiveXObject :
Exemple
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Plus d'exemples
Récupérer les informations d'en-tête d'une ressource (fichier).
Récupérer des informations d'en-tête spécifiques d'une ressource (fichier).
Comment une page Web peut communiquer avec un serveur Web pendant qu'un utilisateur tape des caractères dans un champ de saisie.
Comment une page Web peut récupérer des informations d'une base de données avec l'objet XMLHttpRequest.
Créez un XMLHttpRequest pour récupérer les données d'un fichier XML et afficher les données dans un tableau HTML.