Objet pour lancer les appels AJAX et traiter les données en retour
Compatible tous navigateurs
Oui
Oui
Oui
Oui
Oui
Oui
Oui
Description XMLHttpRequest est l'objet nécessaire pour lancer tous les appels AJAX dans vos pages et réaliser des applications web comparables à de véritables logiciels interactifs.
AJAX signifie Asynchronous JAvascript XML.
Le mot le plus important est asynchrone. Le script peut chercher du contenu (de tout type, y compris du XML ou du JSON) sur le serveur pendant que l'utilisateur navigue sur la page.
Propriétés onload Définit la fonction à appeler lors de la fin d'un appel AJAX onreadystatechange Définit la fonction à appeler lors d'un changement d'avancement de la requête AJAX readyState Indicateur de l'avancement de l'appel AJAX response Contenu de la réponse envoyée par le serveur lors de l'appel AJAX status Code retour du serveur après l'appel AJAX
Méthodes getAllResponseHeaders() Retourne toutes les données d'entête du retour serveur de l'appel AJAX open() Définit l'envoi GET ou POST, le mode asynchrone et l'url de l'appel AJAX send() Déclenche l'appel AJAX vers le serveur avec d'éventuels paramètres setRequestHeader() Affecte une valeur à une propriété d'entête avant un envoi AJAX
Equivalent dans d'autres langages
Equivalent en jQuery à $.ajax() : Fonction qui déclenche un appel Ajax.
Exemple 1 : Exemple appel Ajax avec XMLHttpRequest
/* Définition du type d'appel et de l'url à charger */
ajax.open("POST", "/api/get-pays.php", true);
/* Définition de l'appel en mode POST (obligatoirement après le open) */
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
/* Lancement de l'appel */
ajax.send("pays="+mot);
}
</script>
<form>
Pays : <input type="text" name="chercher" onchange="ajaxPays(this.value)" onkeyup="ajaxPays(this.value)">
</form>
<div id="pays"></div>
Résultat
Emulation de la console
Explication
Tapez le début du nom d'un pays dans le champ de saisie. A chaque touche enfoncée, ajaxPays() est appelée avec le contenu du champ grâce à this.value.
Un appel AJAX en mode POST est déclenché pour chercher les pays correspondant, qui sont affichés dans le div.