Exemple responseXML AJAX PHP

AJAX peut être utilisé pour retourner des informations de base de données au format XML.

Exemple AJAX Database vers XML (notes de test : cette fonctionnalité n'est pas implémentée)

Dans l'exemple AJAX suivant, nous allons démontrer comment une page web peut lire des informations à partir d'une base de données MySQL, convertir les données en document XML et utiliser ce document pour afficher des informations à différents endroits.

Cet exemple est très similaire à celui de la section précédente "PHP AJAX Database", mais il y a une grande différence : dans cet exemple, nous obtenons des données au format XML en utilisant la fonction responseXML à partir de la page PHP.

Recevoir un document XML en réponse nous permet de mettre à jour plusieurs emplacements sur la page, et non pas simplement d'obtenir une sortie PHP et de la montrer.

Dans cet exemple, nous utiliserons les informations reçues de la base de données pour mettre à jour plusieurs éléments <span>.

Sélectionnez un nom dans la liste déroulante

Veuillez choisir un utilisateur :

　

Cette colonne est composée de quatre éléments :

  • Base de données MySQL
  • Simple formulaire HTML
  • JavaScript
  • PHP page

Base de données

La base de données utilisée dans cet exemple semble être de cette manière :

id Prénom Nom de famille Âge Ville natale Emploi
1 Peter Griffin 41 Quahog Brasserie
2 Lois Griffin 40 Newport Professeur de piano
3 Joseph Swanson 39 Quahog Officier de police
4 Glenn Quagmire 41 Quahog Pilot

Formulaire HTML

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

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Sélectionnez un utilisateur :
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

Exemple d'explication - Formulaire HTML

  • Un formulaire HTML est une liste déroulante, dont l'attribut name a la valeur "users", et les valeurs des options correspondent au champ id de la base de données
  • Il y a plusieurs éléments <span> sous le formulaire, qui servent de placeholders pour les différentes valeurs reçues
  • Lorsque l'utilisateur sélectionne une option spécifique, la fonction "showUser()" 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 de valeur dans la liste déroulante, la fonction showUser() est exécutée et les résultats sont affichés dans l'élément <span> spécifié.

JavaScript

Ceci est un code JavaScript stocké dans le fichier "responsexml.js":

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
 var url="responsexml.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")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Exemple d'explication :

showUser() and GetXmlHttpObject functions with Exemple base de données MySQL AJAX PHP The examples in this section are the same. You can refer to the relevant explanations.

stateChanged() function

If an item in the dropdown list is selected, this function is executed:

  1. Using the responseXML function, define the "xmlDoc" variable as an XML document
  2. Retrieve data from this XML document and place them in the correct "span" elements

PHP page

This server page, called "responsexml.php", is a simple PHP file called by JavaScript.

This page is written in PHP and uses the MySQL database.

The code will run a SQL query against the database and return the results as an XML document:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".".$q."";
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

Exemple d'explication :

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

  • Le content-type du document PHP est défini sur "text/xml"
  • Le document PHP est défini sur "no-cache" pour éviter le cache
  • Définir la variable $q avec les données envoyées par une page HTML
  • PHP ouvre une connexion avec le serveur MySQL
  • Trouver un "user" avec un id spécifié
  • Sortir les données sous forme de document XML