AJAX peut être utilisé pour communiquer de manière interactive avec des fichiers XML.
Exemple XML AJAX
L'exemple suivant montre comment une page Web lit les informations d'un fichier XML via AJAX :
Exemple
Sélectionnez un CD : Cat Stevens Lorsque l'utilisateur sélectionne un CD dans la liste déroulante ci-dessus, une fonction nommée "showCD()" est exécutée. Cette fonction est déclenchée par l'événement "onchange" :
<html>
<head>
<script>
function showCD(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp=new XMLHttpRequest();
}
else
{
// 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","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>la fonction showCD() effectuera les étapes suivantes : 1) Vérifier si un CD est sélectionné
2) Créer un objet XMLHttpRequest 3) Créer une fonction qui s'exécute lorsque la réponse du serveur est prête
4) Envoyer une requête à un fichier sur le serveur 5) Notez le paramètres ajoutés à la fin de l'URL (q ) (Contient le contenu de la liste déroulante)
Remarque :
De nombreuses connaissances JavaScript sont utilisées dans l'exemple ci-dessus. Veuillez vous référer. Commencez par ce chapitre : Tutoriel JavaScript
Fichier PHP
La page du serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "getcd.php" .
Le script PHP charge le document XML, "cd_catalog.xml", exécute la requête sur le fichier XML et renvoie les résultats en HTML :
<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
// 处理元素节点
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
// 处理元素节点
if ($cd->item($i)->nodeType==1)
{
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?>Lorsque la requête CD est envoyé depuis JavaScript vers la page PHP Quand cela se produira :
1. PHP crée un objet XML DOM
2. Recherchez tous les noms dans l'élément <artist> données transmises par JavaScript
3. Afficher les informations de l'album et renvoyer l'espace réservé "txtHint"
Résumé : renvoyer le format XML
Avantages :
XML est un format de données universel.
Au lieu de forcer les données dans un format défini, personnalisez les balises appropriées pour les données.
Utilisez DOM pour contrôler entièrement le document.
Inconvénients :
Si le document provient du serveur, vous devez vous assurer que le document contient des informations d'en-tête correctes. Si le type de document est incorrect, la valeur de ResponseXML sera vide.
Lorsque le navigateur reçoit un long fichier XML, l'analyse du DOM peut être compliquée.
section suivante
