Retourner à la page d'accueil de TJS

Objet : XMLHttpRequest

          

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


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 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 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

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 17/12/2018 11:52:56 sur php7 en 20.69 ms