Exemple PHP - AJAX et XML

AJAX peut être utilisé pour une communication interactive avec un fichier XML.

Exemple AJAX XML

L'exemple suivant montre comment une page web peut récupérer des informations d'un fichier XML à l'aide d'AJAX :

Exemple


Les informations du CD seront affichées ici...

Exemple expliqué - La page HTML

Lorsqu'un utilisateur sélectionne un CD dans la liste déroulante ci-dessus, une fonction appelé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;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
Sélectionnez un CD :
<select name="cds" onchange="showCD(this.value)">
<option value="">Sélectionnez un CD :</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>Les informations du CD seront affichées ici...</b></div>

</body>
</html>

La fonction showCD() effectue les actions suivantes :

  • Vérifie si un CD est sélectionné
  • Crée un objet XMLHttpRequest
  • Définit la fonction à exécuter lorsque la réponse du serveur est prête
  • Envoie la requête à un fichier sur le serveur
  • Note qu'un paramètre (q) est ajouté à l'URL (avec le contenu de la liste déroulante)

Le fichier PHP

La page sur le serveur appelée par le JavaScript ci-dessus est un fichier PHP nommé "getcd.php".

Le script PHP charge un document XML, " cd_catalog.xml ", exécute une requête sur le fichier XML et renvoie le résultat sous forme de 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++) {
//Traiter uniquement les nœuds d'élément
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++) {
//Traiter uniquement les nœuds d'élément
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ée du JavaScript à la page PHP, les étapes suivantes se produisent :

  1. PHP crée un objet DOM XML
  2. Trouve tous les éléments <artist> qui correspondent au nom envoyé depuis le JavaScript
  3. Affiche les informations de l'album (envoie au placeholder "txtHint")