PHP og AJAX XML Eksempel

AJAX kan kommunikere interaktivt med XML-filer.

AJAX XML-eksempel

I det følgende AJAX-eksempel vil vi vise, hvordan en webside bruger AJAX-teknologi til at læse information fra en XML-fil.

Vælg en CD fra nedenstående liste

List here CD information.

Dette eksempelet inkluderer tre sider:

  • et simpelt HTML-skema
  • en XML-fil
  • en JavaScript-fil
  • en PHP-side

HTML-skema

Eksemplet indeholder et simpelt HTML-skema samt et link til JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Vælg en 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-info vil blive vist her.</b></div>
</p>
</body>
</html>

Eksempel forklaring:

Som du kan se, er det blot et simpelt HTML-formular med en rullemenu ved navn "cds".

Paragrafen under formularen indeholder en div ved navn "txtHint" som bruges som pladsHOLDER for data, der hentes fra webserveren.

Når brugeren vælger data, udføres funktionen "showCD" med "onchange"-eventen som trigger.

Det vil sige, hver gang brugeren ændrer værdien i rullemenuen, kaldes funktionen showCD.

XML-filen

XML-filen er "cd_catalog.xml". Denne fil indeholder data om CD-samlinger.

JavaScript

Dette er JavaScript-koden, der gemmes i filen "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;
}

Eksempel forklaring:

stateChanged() og GetXmlHttpObject-funktionen er de samme som i det foregående afsnit, du kan se forklaringen på det foregående side.

showCD() funktion

Hvis et element i rullemenuen vælges, udføres funktionen:

  1. Kald GetXmlHttpObject-funktionen for at oprette XMLHTTP-objektet
  2. Definer URL'en (filnavnet) til at sende til serveren
  3. Tilføj en parameter med indholdet af en rullemenu til URL'en (q)
  4. Tilføj et tilfældigt tal for at forhindre, at serveren bruger cachelagrede filer
  5. Kald stateChanged, når en begivenhed udløses
  6. Åbn XMLHTTP-objektet gennem den givne URL
  7. Send HTTP-anmodning til serveren

PHP-side

Denne server-side side kaldet af JavaScript, er en simpel PHP-fil ved navn "getcd.php".

Denne side er skrevet i PHP og bruger XML DOM til at indlæse XML-dokumentet "cd_catalog.xml"。

Kodekørsel udføres for at søge i XML-filer og returnere resultaterne som 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++)
{
//Process only 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++)
{ 
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Eksempler på forklaring

Når en anmodning sendes fra JavaScript til PHP-side, opstår der:

  1. PHP opretter XML DOM-objektet "cd_catalog.xml"
  2. Gå gennem alle "artist"-elementer (nodetypes = 1) og find navne, der matcher de data, der sendes fra JavaScript
  3. Find CD, der indeholder den korrekte artist
  4. Udskriv information om album og send til "txtHint"-pladsholder