XML AJAX
AJAX peut être utilisé pour communiquer de manière interactive avec des fichiers XML.
Exemple XML AJAX
L'exemple suivant montrera comment une page Web utilise AJAX pour lire les informations d'un fichier XML :
Exemple
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
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
Exemple d'analyse - fonction loadXMLDoc()
Lorsque l'utilisateur clique sur le bouton "Obtenir les informations sur le CD" ci-dessus, la fonction loadXMLDoc() sera exécutée.
La fonction loadXMLDoc() crée un objet XMLHttpRequest, ajoute des fonctions qui s'exécutent lorsque la réponse du serveur est prête et envoie la requête au serveur.
Lorsque la réponse du serveur est prête, une table HTML est construite, les nœuds (éléments) sont extraits du fichier XML, et enfin l'espace réservé txtCDInfo est mis à jour avec la table HTML déjà remplie de données XML :
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// code pour IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code pour IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP ");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="
x=xmlhttp.responseXML.documentElement. getElementsByTagName("CD");
pour (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i ].getElementsByTagName("TITLE");
{
essayer
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td> ;";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
essayer
{
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();
}
Page du serveur AJAX
La page du serveur utilisée dans l'exemple ci-dessus est en fait un fichier appelé "cd_catalog . xml" fichier XML.
