Objet XMLHttpRequest

L'objet XMLHttpRequest fournit des méthodes pour communiquer avec le serveur après le chargement de la page.

Qu'est-ce que l'objet XMLHttpRequest ?

L'objet XMLHttpRequest estRêve des développeursC'est parce 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

Tous les navigateurs modernes supportent l'objet XMLHttpRequest.

Exemple :Communiquer avec le serveur via XML HTTP lors de la saisie de texte.

Création de l'objet XMLHttpRequest

Avec une ligne simple de code JavaScript, nous pouvons créer un objet XMLHttpRequest.

Dans tous les navigateurs modernes (y compris IE 7) :

xmlhttp=new XMLHttpRequest()

Dans Internet Explorer 5 et 6 :

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Exemple

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code pour tous les navigateurs récents}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code pour IE5 et IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Votre navigateur ne prend pas en charge XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "chargé"
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...notre code ici...
    }
  else
    {
    alert("Problème lors de la récupération des données XML");
    }
  }
}
</script>

TIY

Remarque :onreadystatechange est un gestionnaire d'événement. Sa valeur (state_Change) est le nom d'une fonction qui est déclenchée lorsque l'état de l'objet XMLHttpRequest change. L'état change de 0 (non initialisé) à 4 (complet). Seulement lorsque l'état est 4, nous exécutons le code.

Pourquoi utiliser Async=true ?

Notre exemple utilise "true" en tant que troisième paramètre de open().

Ce paramètre détermine si la requête doit être traitée de manière asynchrone.

True signifie que le script continuera à s'exécuter après la méthode send(), sans attendre la réponse du serveur.

L'événement onreadystatechange complique le code. Mais c'est la méthode la plus sécurisée pour éviter que le code ne s'arrête sans réponse du serveur.

En définissant ce paramètre sur "false", vous pouvez éviter le code onreadystatechange supplémentaire. Vous pouvez utiliser ce paramètre si l'exécution du reste du code en cas d'échec de la requête n'a pas d'importance.

TIY

Plus d'exemples

Charger un fichier textfile dans un élément div à l'aide de XML HTTP

Effectuer une requête HEAD à l'aide de XML HTTP

Effectuer une requête HEAD spécifiée à l'aide de XML HTTP

Lister les données du fichier XML à l'aide de XML HTTP

XML / ASP

Vous pouvez également ouvrir le document XML et l'envoyer à une page ASP sur le serveur, analyser cette requête, puis renvoyer les résultats.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Votre navigateur ne prend pas en charge XMLHTTP.");
  }
</script>
</body>
</html>

Page ASP, écrite en VBScript :

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

Retournez le résultat au client en utilisant la propriété response.write.

TIY

Est-ce que l'objet XMLHttpRequest est une norme W3C ?

Aucune norme recommandée W3C n'a stipulé l'objet XMLHttpRequest.

Cependant, la norme "Load and Save" du niveau 3 W3C DOM contient certaines fonctionnalités similaires, mais aucune navigateur n'a encore mis en œuvre ces fonctionnalités.

Voir

Manuel de référence XML DOM : Objet XMLHttpRequest