Exemple XML AJAX PHP

AJAX peut communiquer de manière interactive avec des fichiers XML.

Exemple AJAX XML

Dans l'exemple AJAX suivant, nous allons démontrer comment une page web utilise la technologie AJAX pour lire des informations à partir d'un fichier XML.

Sélectionnez un CD dans la liste suivante ci-dessous

Lister les informations du CD ici.

Cet exemple inclut trois pages :

  • Un simple formulaire HTML
  • Un fichier XML
  • Un fichier JavaScript
  • Une page PHP

Formulaire HTML

L'exemple suivant contient un simple formulaire HTML, ainsi qu'un lien vers JavaScript :

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Sélectionnez un CD :
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>Les informations sur les CD seront listées ici.</b></div>
</p>
</body>
</html>

Exemple d'explication :

Comme vous pouvez le voir, il s'agit simplement d'un formulaire HTML simple avec une liste déroulante nommée "cds".

Le paragraphe sous le formulaire contient un div nommé "txtHint" qui sert de placeholder pour les données récupérées du serveur web.

Lorsque l'utilisateur sélectionne des données, une fonction nommée "showCD" est exécutée. L'exécution de cette fonction est déclenchée par l'événement "onchange".

Autrement dit, chaque fois que l'utilisateur change la valeur de la liste déroulante, la fonction showCD est appelée.

Le fichier XML

Le fichier XML est "cd_catalog.xml". Ce fichier contient des données sur les collections de CD.

JavaScript

Voici le code JavaScript stocké dans le fichier "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Le navigateur ne prend pas en charge les requêtes HTTP")
 return
 } 
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
 if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
 { 
 document.getElementById("txtHint").innerHTML = xmlHttp.responseText; 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Exemple d'explication :

Les fonctions stateChanged() et GetXmlHttpObject sont identiques à celles de la section précédente, vous pouvez consulter les explications pertinentes de la page précédente.

Fonction showCD()

Si un élément de la liste déroulante est sélectionné, la fonction exécute :

  1. Appeler la fonction GetXmlHttpObject pour créer un objet XMLHTTP
  2. Définir l'URL (nom de fichier) à envoyer au serveur
  3. Ajouter un paramètre (q) contenant le contenu d'une liste déroulante à l'URL
  4. Ajouter un nombre aléatoire pour éviter que le serveur utilise un fichier en cache
  5. Appeler stateChanged lors du déclenchement d'un événement
  6. Ouvrir un objet XMLHTTP avec l'URL fournie
  7. Envoyer une requête HTTP au serveur

Page PHP

Cette page serveur appelée par JavaScript, c'est un simple fichier PHP nommé "getcd.php".

Cette page est écrite en PHP, utilisant XML DOM pour charger le document XML "cd_catalog.xml"。

L'exécution du code vise à interroger un fichier XML et à renvoyer les résultats sous forme d'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($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Explications des exemples

Lorsque la requête est envoyée du JavaScript à la page PHP, il se produit :

  1. Objet XML DOM PHP pour créer le fichier "cd_catalog.xml"
  2. Parcourir tous les éléments "artist" (nodetypes = 1) et trouver les noms correspondant aux données transmises par JavaScript
  3. Trouver le CD contenant l'artiste correct
  4. Sortir les informations de l'album et les envoyer au "txtHint"