Retourner à la page d'accueil de TJS

Objet : XMLHttpRequest

          

Objet pour lancer les appels AJAX


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) 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 la configuration de l'appel AJAX)
send() (Déclenche l'appel AJAX vers le serveur)
setRequestHeader() (Définit une propriété d'entête avant l'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...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 23/08/2017 10:08:40 sur php7 en 18.74 ms