PHP en AJAX XML Voorbeeld

AJAX kan interactief communiceren met XML-bestanden.

AJAX XML voorbeeld

In het volgende AJAX-voorbeeld zullen we laten zien hoe een webpagina AJAX-technologie gebruikt om informatie uit een XML-bestand te lezen.

Kies een CD uit de lijst hieronder

Hier worden CD-informatie opgelijst.

Dit voorbeeld omvat drie pagina's:

  • Een eenvoudige HTML-formulier
  • Een XML-bestand
  • Een JavaScript-bestand
  • Een PHP-pagina

HTML-formulier

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

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Selecteer een 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>CD-informatie zal hier worden weergegeven.</b></div>
</p>
</body>
</html>

Voorbeelduitslag:

Zoals u kunt zien, is het een eenvoudig HTML-formulier met een keuzelijst genaamd "cds".

De alinea onder het formulier bevat een div genaamd "txtHint" die als placeholder voor gegevens van de webserver wordt gebruikt.

Wanneer de gebruiker gegevens selecteert, wordt de functie "showCD" uitgevoerd. De uitvoering van deze functie wordt getriggerd door het "onchange"-evenement.

In andere woorden, wanneer de gebruiker de waarde in de keuzelijst wijzigt, wordt de functie showCD aangeroepen.

Het XML-bestand

Het XML-bestand is "cd_catalog.xmlDeze bestand bevat gegevens over CD-collecties.

JavaScript

Dit is de JavaScript-code die opgeslagen is in het bestand "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 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;
}

Voorbeelduitslag:

De stateChanged() en GetXmlHttpObject-functies zijn dezelfde als in het vorige hoofdstuk, raadpleeg de relevante uitleg op de vorige pagina.

showCD() functie

Als een item in de dropdown-lijst is geselecteerd, voert de functie uit:

  1. Roep de GetXmlHttpObject-functie aan om een XMLHTTP-object te creëren
  2. Definieer de URL (bestandsnaam) die naar de server wordt gestuurd
  3. Voeg een parameter met inhoud van een dropdown-lijst toe aan de URL (q)
  4. Voeg een willekeurig getal toe om te voorkomen dat de server een gecachte bestand gebruikt
  5. Roep stateChanged aan wanneer een gebeurtenis wordt getriggerd
  6. Open een XMLHTTP-object via de gegeven URL
  7. Verstuur een HTTP-verzoek naar de server

PHP-pagina

Deze serverpagina die door JavaScript wordt aangeroepen, is een eenvoudig PHP-bestand genaamd "getcd.php".

Deze pagina is geschreven in PHP en gebruikt XML DOM om het XML-bestand "cd_catalog.xml"。

De code voert een query uit op een XML-bestand en retourneert het resultaat als 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++)
{
//Verwerk alleen element nodes
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++)
{ 
//Verwerk alleen element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Voorbeelden van uitleg

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

  1. PHP maakt een XML DOM object voor het "cd_catalog.xml" bestand
  2. Herhaal alle "artist" elementen (nodetypes = 1), zoek naar namen die overeenkomen met de gegevens die door JavaScript worden doorgegeven
  3. Vind de CD die de juiste artiest bevat
  4. Geef de informatie van het album weer en stuur het naar de "txtHint" placeholder