PHP and AJAX responseXML Example

AJAX kan worden gebruikt om databaseinformatie in XML-vorm terug te keren.

AJAX Database naar XML voorbeeld (testinstructie: de functie van dit voorbeeld is nog niet geïmplementeerd)

In onderstaande AJAX-voorbeeld demonstreren we hoe een webpagina informatie kan ophalen uit een MySQL-database, deze gegevens omzetten naar een XML-document en deze document gebruiken om informatie op verschillende plaatsen weer te geven.

Dit voorbeeld is zeer vergelijkbaar met het eerdere voorbeeld "PHP AJAX Database", maar er is een groot verschil: in dit voorbeeld krijgen we XML-geformatteerde gegevens via de responseXML-functie van de PHP-pagina.

Het ontvangen van een XML-document als respons maakt het mogelijk om meerdere locaties op de pagina te updaten, niet alleen een PHP-uitvoer te ontvangen en weer te geven.

In dit voorbeeld zullen we de informatie die we ontvangen van de database gebruiken om meerdere <span>-elementen te updaten.

Selecteer een naam uit de dropdown-lijst

Kies een gebruiker:

　

Deze kolom bestaat uit vier elementen:

  • MySQL-database
  • Eenvoudige HTML-formulier
  • JavaScript
  • PHP-pagina

Database

De database die in dit voorbeeld wordt gebruikt, ziet er zo uit:

id Voornaam Achternaam Leeftijd Herkomst Baan
1 Peter Griffin 41 Quahog Brouwerij
2 Lois Griffin 40 Newport Piano Leraar
3 Joseph Swanson 39 Quahog Politieagent
4 Glenn Quagmire 41 Quahog Pilot

HTML-formulier

Het bovenstaande voorbeeld bevat een eenvoudige HTML-formulier en een link naar JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Selecteer een gebruiker:
<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>

Voorbeeld uitleg - HTML-formulier

  • Een HTML-formulier is een keuzelijst met de waarde van de property name "users", de opties correleren met het veld id van de database
  • Er zijn enkele <span>-elementen onder het formulier, die dienen als placeholder voor de verschillende waarden die we ontvangen
  • Wanneer de gebruiker een specifieke optie selecteert, voert de functie "showUser()" uit. De uitvoering van deze functie wordt getriggerd door het "onchange"-evenement

In andere woorden, elke keer dat de gebruiker de waarde in de keuzelijst wijzigt, voert de functie showUser() uit en voert het resultaat uit in het opgegeven <span>-element.

JavaScript

Dit is JavaScript-code opgeslagen in het bestand "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
 }

Voorbeeld uitleg:

De functie showUser() en de functie GetXmlHttpObject zijn PHP and AJAX MySQL Database Example De voorbeelden in dit hoofdstuk zijn hetzelfde. U kunt de bijbehorende uitleg raadplegen.

De functie stateChanged()

Als een item in de keuzelijst is geselecteerd, voert deze functie uit:

  1. Gebruik de responseXML-functie om de variabele "xmlDoc" te definiëren als een XML-document
  2. Haal de gegevens op uit dit XML-document en plaats ze in de juiste "span"-elementen

PHP-pagina

Deze serverpagina, aangeroepen door JavaScript, is een eenvoudige PHP-bestand genaamd "responsexml.php".

Deze pagina is geschreven in PHP en gebruikt de MySQL-database.

De code voert een SQL-query uit op de database en retourneert de resultaten als een XML-document:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//Een datum in het verleden
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Kon niet verbinden: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
het 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);
?>

Voorbeeld uitleg:

Wanneer een query van JavaScript naar een PHP-pagina wordt verzonden, gebeurt het volgende:

  • Het content-type van het PHP-document is ingesteld op "text/xml"
  • PHP-document is ingesteld op "no-cache" om caching te voorkomen
  • Stel de variabele $q in met gegevens van een HTML-pagina
  • Maak een verbinding met de MySQL-server met PHP
  • Vind de "user" met het opgegeven id
  • Gegevens outputten als XML-document