Tous les navigateurs modernes ont un objet intégré XMLHttpRequest pour demander des données à partir d'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 à partir d'un serveur web.
L'objet XMLHttpRequest est a developers dream , parce que vous pouvez:
- Mettre à jour une page Web sans recharger la page
- Demander des données à partir d'un serveur - après que la page a chargé
- Recevoir des données à partir d'un serveur - après que la page a été chargée
- Envoyer des données à un serveur - en arrière-plan
XMLHttpRequest Exemple
Lorsque vous tapez un caractère dans le champ de saisie ci - dessous, un XMLHttpRequest est envoyé au serveur, et quelques suggestions de noms sont retournés (from the server) à (from the server) :
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 commune JavaScript pour utiliser ressemble beaucoup à ceci:
Exemple
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Essayez - le vous - même » Création d'un objet XMLHttpRequest
La première ligne dans l'exemple ci-dessus crée un objet XMLHttpRequest:
var xhttp = new XMLHttpRequest();
L'événement onreadystatechange
La propriété readyState détient le statut de l'objet XMLHttpRequest.
L'événement onreadystatechange est déclenché chaque fois que les changements readyState.
Lors d'une demande de serveur, le readyState passe de 0 à 4:
0: demander non initialisée
1: connexion au serveur établie
2: demande reçue
3: demande de traitement
4: demander fini et la réponse est prête
Dans la propriété onreadystatechange, spécifier une fonction à exécuter lorsque l'readyState change:
xhttp.onreadystatechange = function()
Lorsque readyState est 4 et l'état est de 200, la réponse est prête:
if (xhttp.readyState == 4 && xhttp.status == 200)
Propriétés et méthodes XMLHttpRequest
| méthode | La description |
|---|---|
| new XMLHttpRequest() | Crée un nouvel objet XMLHttpRequest |
| open( method, url, async ) | Indique le type de demande method : le type de demande: GET ou POST url : l'emplacement du fichier async : true (asynchronous) ou faux (synchronous) |
| send() | Envoie une requête au serveur (used for GET) |
| send( string ) | Envoie une chaîne de requête au serveur (used for POST) |
| onreadystatechange | Une fonction à appeler lorsque les changements de propriété readyState |
| readyState | Le statut de la XMLHttpRequest 0: demander non initialisée 1: connexion au serveur établie 2: demande reçue 3: demande de traitement 4: demander fini et la réponse est prête |
| status | 200: OK 404 Page non trouvée |
| responseText | Les données de réponse sous forme de chaîne |
| responseXML | Les données de réponse sous forme de données XML |
Accès à travers les domaines
Pour des raisons de sécurité, les navigateurs modernes ne permettent pas l'accès à travers les domaines.
Cela signifie que tant la page Web et le fichier XML, il tente de charger, doivent être situés sur le même serveur.
Les exemples sur w3ii tous les fichiers XML ouverts situés sur le domaine w3ii.
Si vous voulez utiliser l'exemple ci-dessus sur un de vos propres pages Web, les fichiers XML que vous chargez doivent être situés sur votre propre serveur.
Le responseText propriété
La propriété responseText renvoie la réponse sous forme de chaîne.
Si vous souhaitez utiliser la réponse comme une chaîne de texte, utilisez la propriété responseText:
Exemple
document.getElementById("demo").innerHTML = xmlhttp.responseText; Essayez - le vous - même » Le responseXML propriété
La propriété responseXML renvoie la réponse comme un objet DOM XML.
Si vous souhaitez utiliser la réponse comme un objet DOM XML, utilisez la propriété responseXML:
Exemple
Demander le fichier cd_catalog.xml et utiliser la réponse comme un 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; Essayez - le vous - même » GET ou POST?
GET est plus simple et plus rapide que POST, et peut être utilisé dans la plupart des cas.
Cependant, toujours utiliser les requêtes POST lorsque:
- Un fichier mis en cache est pas une option (update a file or database on the server) à (update a file or database on the server) d' (update a file or database on the server) de (update a file or database on the server)
- Envoi d'une grande quantité de données sur le serveur (POST a aucune limitation de taille)
- Envoi d' entrée de l' utilisateur (which can contain unknown characters) des (which can contain unknown characters) , POST est plus robuste et plus sûre que GET
L'URL - un fichier sur un serveur
Le paramètre url de l' open() méthode, est une adresse à un fichier sur un serveur:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Le fichier peut être tout type de fichier, comme .txt et .xml ou les fichiers de script de serveur comme .asp et .php (qui peut effectuer des actions sur le serveur avant d'envoyer la réponse en retour).
Asynchronous - Vrai ou Faux?
Pour envoyer la demande de manière asynchrone, le paramètre async de l' open() méthode doit être définie 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. Un grand nombre des tâches exécutées sur le serveur sont beaucoup de temps.
En envoyant de façon 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
- faire face à la réponse lorsque la réponse est prête
Async = true
Lorsque vous utilisez async = true, spécifier une fonction à exécuter lorsque la réponse est prêt en cas onreadystatechange:
Exemple
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Essayez - le vous - même » Async = false
Pour utiliser async = false, changer le troisième paramètre dans l' open() méthode pour faux:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Utilisation async = false est pas recommandé, mais pour quelques petites demandes, cela peut être ok.
Rappelez-vous que le JavaScript ne va pas continuer à exécuter, jusqu'à ce que la réponse du serveur est prêt. Si le serveur est occupé ou lent, l'application se bloquer ou arrêter.
Note: Lorsque vous utilisez async = false, ne pas écrire une fonction onreadystatechange - il suffit de mettre le code après l' send() déclaration:
Exemple
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Essayez - le vous - même » XML Parser
Tous les navigateurs modernes disposent d'un analyseur XML intégré.
Le modèle objet de document XML (the XML DOM) contient beaucoup de méthodes pour accéder et modifier XML.
Toutefois, avant un document XML peut être consulté, il doit être chargé dans un objet DOM XML.
Un analyseur XML peut lire le texte brut et le convertir en un objet DOM XML.
Parsing une chaîne de texte
Cet exemple analyse une chaîne de texte dans un objet DOM XML, et extrait l'information de celui-ci 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>
Essayez - le vous - même » Old Browsers (IE5 and IE6)
Les anciennes versions d'Internet Explorer (IE5 and IE6) ne supportent pas l'objet XMLHttpRequest.
Pour gérer IE5 et IE6, vérifier si le navigateur prend en charge l'objet XMLHttpRequest, ou bien créer un ActiveXObject:
Exemple
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Essayez - le vous - même » Les anciennes versions d'Internet Explorer (IE5 and IE6) ne supportent pas l'objet DOMParser.
Pour gérer IE5 et IE6, vérifier si le navigateur prend en charge l'objet DOMParser, ou bien créer 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);
}
Essayez - le vous - même » 
Autres exemples
Récupérer des informations d' en- tête avec getAllResponseHeaders()
Récupérer des informations d' en- tête d'une ressource (file) .
Récupérer des informations spécifiques d' en- tête avec getResponseHeader()
Récupérer des informations d' en- tête spécifique d'une ressource (file) .
Récupérer le contenu d'un fichier ASP
Comment une page Web peut communiquer avec un serveur Web tandis qu'un des caractères de type d'utilisateur dans un champ de saisie.
Récupérer le contenu d'une base de données
Comment une page Web peut récupérer des informations à partir d'une base de données avec l'objet XMLHttpRequest.
Récupérer le contenu d'un fichier XML
Créer un XMLHttpRequest pour récupérer des données à partir d'un fichier XML et afficher les données dans un tableau HTML.