Retourner ' la page d'accueil de TJSRetourner ' la page d'accueil de TJS

Objet : XMLHttpRequest

Objet pour lancer les appels AJAX et traiter les données en retour


Compatible tous navigateurs

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
Code source
<script type="text/javascript">
function ajax1() {
 console.clear();
 
 /* Création de l'objet ajax */
 var ajax = new XMLHttpRequest();

 /* Déclaration des événements */
 ajax.onreadystatechange = function() {
   console.log("readyState = "+this.readyState);
   if(this.readyState == 2) { /* HEADER_RECEIVED */
     console.log(this.getAllResponseHeaders());
   }
 };
 ajax.onload = function() {
   console.log("onLoad : readyState = "+this.readyState);
   console.log("HTTP status = "+this.status);
   if (this.status == 200) {
     console.log(this.response);
     document.getElementById("retour1").innerHTML = "Votre adresse IP est "+this.response;
   }
 }
 
 /* Définition de l'appel */
 ajax.open("GET", "/api/get-my-ip.php", true);

/* Déclenchement de l'appel */
 ajax.send();
}
</script>
<a href="javascript:ajax1()">Lancer l'appel AJAX</a>
<div id="retour1"></div>

Résultat
Lancer l'appel AJAX
Emulation de la console
Explication
Le clic sur le lien déclenche la fonction ajax1().
L'appel AJAX est lancé sur le lien /api/get-my-ip.php.

Exemple 2 : Recherche de pays en temps réel
Code source
<script type="text/javascript">
function ajaxPays(mot) {
 console.clear();  
 console.log("Mot saisi : "+mot);

 /* Création de l'objet ajax */
 var ajax = new XMLHttpRequest();

 /* Création du traitement lors de la fin de l'appel */
 ajax.onload = function() {
   console.log("HTTP status = "+this.status);
   console.log(this.response);
   if (this.status == 200) { /* Retour HTTP réussi */
     document.getElementById("pays").innerHTML = "Liste de pays : <br>"+this.response;
   }
 }

 /* 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
Pays :
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.

Page en rapport
Le tutoriel XMLHttpRequest pour les appels AJAX
Page mise à jour le

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 20/04/2024 00:18:33 sur php 7 en 165.51 ms