Tout savoir sur le dogecoin
L'exemple suivant démontre comment une page web peut extraire des informations d'un fichier XML avec AJAX
AJAX peut être utilisé pour la communication interactive avec un fichier XML.
Exemple XML AJAX :
L'exemple suivant démontre comment une page web peut extraire des informations d'un fichier XML avec AJAX :
Lorsqu'un utilisateur clique sur le bouton «Informations sur CD», la fonction loadXMLDoc() est exécutée.
La fonction loadXMLDoc() crée un objet XMLHttpRequest, ajoute la fonction qui doit être exécutée lorsque la réponse du serveur est prête et envoie la demande au serveur.
Quand la réponse du serveur est prête, un tableau HTML est construit, les nœuds (éléments) sont extraites du fichier XML, et finalement il met à jour l'espace réservé de txtCDInfo avec la table HTML remplie de données XML :
Exemple : Copier le code
function loadXMLDoc(url)
{
var xmlhttp;
var texte,tab,YY,i;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{// code pour IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
texte="<table
border='1'><tr><th>Titre</th><th>Artiste</th></tr>";
tab=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<tab.length;i++)
{
texte=texte + "<tr>";
YY=tab[i].getElementsByTagName("TITRE");
{
try
{
texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
texte=texte + "<td> </td>";
}
}
YY=x[i].getElementsByTagName("ARTISTE");
{
try
{
texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
texte=texte + "<td> </td>";
}
}
texte=texte + "</tr>";
}
texte=texte + "</table>";
document.getElementById('txtCDInfo').innerHTML=texte;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
Le code source de la page HTML se présente comme suit :
Exemple : Copier le code
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var texte,tab,YY,i;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{// code pour IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
texte="<table border='1'><tr><th>Titre</th><th>Artiste</th><th>prix</th></tr>";
tab=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<tab.length;i++)
{
texte=texte + "<tr>";
YY=tab[i].getElementsByTagName("TITRE");
{
try
{
texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
texte=texte + "<td> </td>";
}
}
YY=tab[i].getElementsByTagName("ARTISTE");
{
try
{
texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
texte=texte + "<td> </td>";
}
}
YY=tab[i].getElementsByTagName("PRIX");
{
try
{
texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
texte=texte + "<td> </td>";
}
}
texte=texte + "</tr>";
}
texte=texte + "</table>";
document.getElementById('txtCDInfo').innerHTML=texte;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Informations sur
CD</button>
</div>
</body>
</html>
La page sur le serveur utilisée dans l'exemple ci-dessus, est un fichier XML appelé "cd_catalog.xml".
| Cours precedent: Base de données AJAX | Sommaire de : Le langage JavaScript |