DOM XMLHttpRequête

L'objet XMLHttpRequest

L'objet XMLHttpRequest vous permet de mettre à jour une partie d'une page Web sans recharger la page entière.

Objet XMLHttpRequest

L'objet XMLHttpRequest est utilisé en arrière-plan pour échanger des données avec le serveur. L'objet

XMLHttpRequest est un rêve de développeur car vous pouvez :

Mettre à jour les pages Web 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

Créer un objet XMLHttpRequest

Tous les navigateurs modernes (IE7+, Firefox, Chrome, Safari et Opera) ont un Créer un XMLHttpRequest objet.

Syntaxe de création d'objets XMLHttpRequest

xmlhttp=new XMLHttpRequest();

Les anciennes versions d'Internet Explorer (IE5 et IE6) utilisent des objets ActiveX :

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Pour gérer tous les navigateurs modernes, y compris IE5 et IE6, veuillez vérifier si le navigateur prend en charge l'objet XMLHttpRequest. Si pris en charge, créez un objet XMLHttpRequest, sinon, créez un objet ActiveX :

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Envoyer une requête au serveur

Pour envoyer une requête au serveur, nous utilisons l'objet XMLHttpRequest Les méthodes open() et send() :

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

Méthode

Description

open(method,url,async)

Spécifie le type de la requête, URL , si la requête doit être traitée de manière asynchrone.

方法	描述
open(method,url,async)	规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	发送请求到服务器。 string：仅用于 POST 请求

<🎜>méthode : Type de requête : GET ou POST <🎜>url : L'emplacement du fichier sur le serveur <🎜>async< /em > : true (asynchrone) ou false (synchrone)

send(string)

Envoyer une requête au serveur. <🎜><🎜>string : utilisée uniquement pour les requêtes POST

OBTENIR ou POST ?

GET est plus simple et plus rapide que POST et peut être utilisé dans la plupart des situations.

Cependant, utilisez toujours les requêtes POST dans les cas suivants :

Les fichiers mis en cache ne sont pas une option (mise à jour de fichiers ou de bases de données sur le serveur)
La quantité de données envoyées au serveur est importante (POST n'a pas de limite de taille)
Envoi des entrées de l'utilisateur (peut contenir des caractères inconnus), POST est plus puissant et plus puissant que GET Security

URL - Fichier sur le serveur

Le paramètre url de la méthode open() est l'adresse d'un fichier sur le serveur :

xmlhttp.open("GET","xmlhttp_info.txt",true);

Le fichier peut être n'importe quel type de fichier (tel que .txt et .xml), ou des fichiers de script de serveur (tels que .html et .php qui effectuent des actions sur le serveur avant de renvoyer une réponse).

Asynchrone - Vrai ou Faux ?

Pour envoyer une requête de manière asynchrone, le paramètre async de la méthode open() doit être défini sur true :

xmlhttp. open("GET","xmlhttp_info.txt",true);

L'envoi de requêtes asynchrones est une énorme amélioration pour les développeurs Web. De nombreuses tâches effectuées sur le serveur prennent beaucoup de temps.

En envoyant de manière asynchrone, JavaScript n'a pas besoin d'attendre une réponse du serveur, mais peut être remplacé par :

En attendant une réponse du serveur, exécuter d'autres scripts
Gérer la réponse lorsque la réponse est prête

Async=true

Lors de l'utilisation d'async =true, il est précisé dans l'événement onreadystatechange lorsque la réponse est prête. Une fonction à exécuter :

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Run Instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Async=false

Pour utiliser async=false, veuillez modifier le troisième paramètre de la méthode open() à false :

xmlhttp.open("GET","xmlhttp_info.txt",false);

Ce n'est pas le cas Il est recommandé d'utiliser async=false, mais cela reste acceptable si vous gérez quelques petites requêtes.

N'oubliez pas que JavaScript ne poursuivra pas son exécution tant que la réponse du serveur ne sera pas prête. Si le serveur est occupé ou lent, l'application se bloquera ou s'arrêtera.

Remarque : N'écrivez pas onreadystatechange lorsque vous utilisez async=false Fonctions - placez simplement le code après l'instruction send() :

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.open("GET","xmlhttp_info.txt",false);
  xmlhttp.send();
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le Bouton "Exécuter l'instance" pour afficher l'instance en ligne

Réponse du serveur

Pour obtenir une réponse du serveur, utilisez la propriété ResponseText ou ResponseXML de l'objet XMLHttpRequest.

属性	描述
responseText	获取响应数据作为字符串
responseXML	获取响应数据作为 XML 数据

PropriétéresponseText

Utilisez la propriété ResponseText si la réponse du serveur n'est pas XML. La propriété

responseText renvoie la réponse sous forme de chaîne, vous pouvez l'utiliser en conséquence :

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Exécutez le instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

attributresponseXML

Si la réponse du serveur est pas XML et que vous souhaitez l'analyser dans un objet XML, utilisez l'attribut réponseXML :

Instance

Demandez le fichier cd_catalog.xml et analysez la réponse :

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      xmlDoc=xmlhttp.responseXML;
      var txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
        {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
        }
      document.getElementById("myDiv").innerHTML=txt;
        }
      }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
</script>
</head>
<body>

<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

événement onreadystatechange

Lorsque la demande est envoyée au serveur, nous souhaitons effectuer une action basée sur la réponse.

L'événement onreadystatechange est déclenché à chaque fois que readyState change.

L'attribut readyState contient le statut de XMLHttpRequest.

Trois attributs importants de l'objet XMLHttpRequest :

Attribut

Description

onreadystatechange

Fonction de stockage (ou nom de la fonction) est automatiquement appelé à chaque fois que l'attribut readyState change

readyState

stocke l'état de XMLHttpRequest. Passer de 0 à 4 :

属性	描述
onreadystatechange	存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用
readyState	存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪
status	200："OK" 404：找不到页面

0 : La requête n'est pas initialisée <🎜> 1 : Le serveur établit la connexion <🎜> 2 : Demande reçue <🎜> 3 : Traitement des demandes <🎜> 4 : Demande terminée et réponse prête

statut

200 : "OK" <🎜> 404 : Page introuvable

Dans l'événement onreadystatechange, nous spécifions ce qui se passe lorsque la réponse du serveur est prête à être traitée.

Lorsque readyState est 4 ou status est 200, préparation de la réponse :

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Remarque : L'événement onreadystatechange est déclenché à chaque fois que readyState change, soit un total de quatre fois.

Plus d'exemples

Récupérer les informations d'en-tête via getAllResponseHeaders()
Récupérer des ressources (fichiers) informations d'en-tête.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get header information</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Récupérer les informations d'en-tête spécifiées via getResponseHeader()
Récupérer les informations d'en-tête spécifiées de la ressource (fichier).

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get "Last-Modified" information</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Récupérer le contenu d'un fichier ASP
Comment une page Web communique avec le serveur Web lorsque l'utilisateur tape des caractères dans le champ de saisie.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Récupérer le contenu de la base de données
Comment une page Web extrait les informations de la base de données via l'objet XMLHttpRequest.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }  
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Récupérer le contenu d'un fichier XML
Créez un XMLHttpRequest pour récupérer les données d'un fichier XML et afficher les données dans un tableau HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("ARTIST");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

DOM XMLHttpRequête

L'objet XMLHttpRequest

Objet XMLHttpRequest

Créer un objet XMLHttpRequest

Instance

Envoyer une requête au serveur

OBTENIR ou POST ?

URL - Fichier sur le serveur

Asynchrone - Vrai ou Faux ?

Async=true

Instance

Async=false

Instance

Réponse du serveur

PropriétéresponseText

Instance

attributresponseXML

Instance

événement onreadystatechange

Instance

Plus d'exemples

Instance

Instance

Instance

Instance

Instance

Site Web PHP chinois