XMLHttpRequest

Tous les navigateurs modernes ont un objet XMLHttpRequest intégré pour demander des données au serveur.

L'objet XMLHttpRequest

L'objet XMLHttpRequest peut être utilisé pour demander des données au serveur Web.

L'objet XMLHttpRequest estRêve des développeursparce que vous pouvez :

• Mettre à jour la page - sans recharger la page
• Demander des données au serveur - après le chargement de la page
• Recevoir des données du serveur - après le chargement de la page
• Envoyer des données au serveur - en arrière-plan

Exemple XMLHttpRequest

Lorsque vous tapez des caractères dans le champ de saisie suivant, XMLHttpRequest est envoyé au serveur et des suggestions de noms sont renvoyées (du serveur) :

Exemple

Entrez le nom dans le champ de saisie suivant :

Envoyer XMLHttpRequest

Voici les syntaxes courantes JavaScript pour utiliser l'objet XMLHttpRequest :

Exemple

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Action typique à effectuer lorsque le document est prêt :
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Essayez vous-même

Explication de l'exemple

La première ligne de l'exemple suivant crée un L'objet XMLHttpRequest:

var xhttp = new XMLHttpRequest();

onreadystatechange La propriété spécifie la fonction à exécuter à chaque fois que l'état de l'objet XMLHttpRequest change :

xhttp.onreadystatechange = function()

quand readyState propriété est 4 et status Lorsque la propriété est 200, la réponse est prête :

if (this.readyState == 4 && this.status == 200)

responseText Les propriétés sont retournées sous forme de chaîne de texte par la réponse du serveur.

Les chaînes de texte peuvent être utilisées pour mettre à jour les pages web :

document.getElementById("demo").innerHTML = xhttp.responseText;

Vous apprendrez plus sur l'objet XMLHttpRequest dans le chapitre AJAX de ce tutoriel.