PHP och AJAX XML-exempel

AJAX kan interagera interaktivt med XML-filer.

AJAX XML-exempel

I följande AJAX-exempel kommer vi att visa hur en webbsida använder AJAX-teknik för att läsa information från en XML-fil.

Välj en CD från följande lista nedan

Listas här CD-information.

Detta exempel inkluderar tre sidor:

  • ett enkelt HTML-formulär
  • en XML-fil
  • en JavaScript-fil
  • en PHP-sida

HTML-formulär

Exempelmen innehåller ett enkelt HTML-formulär och en länk till JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Välj 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 kommer att listas här.</b></div>
</p>
</body>
</html>

Exempel förklaring:

Som du ser är det bara ett enkelt HTML-formulär med en rullgardinsmeny med namnet "cds".

Parsen under formuläret innehåller en div med namnet "txtHint" som används som platshållare för data som hämtas från webbservern.

När användaren väljer data utförs funktionen "showCD" som är utlösad av "onchange"-händelsen.

Detta innebär att varje gång användaren ändrar värdet i rullgardinsmenyn, kommer showCD-funktionen att anropas.

XML-filen

XML-filen är "cd_catalog.xml". Filen innehåller data om CD-samlingen.

JavaScript

Detta är JavaScript-koden som lagras i filen "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Webbläsaren stöder inte HTTP-förfrågan")
 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;
}

Exempel förklaring:

stateChanged() och GetXmlHttpObject-funktionerna är desamma som i föregående avsnitt, du kan läsa mer om dem på föregående sida.

showCD() funktionen

Om ett objekt från rullgardinsmenyn väljs, utförs funktionen:

  1. Anropa GetXmlHttpObject-funktionen för att skapa XMLHTTP-objektet
  2. Definiera URL:en (filnamn) som skickas till servern
  3. Lägg till en parameter med innehåll från en rullgardinsmeny till URL:en (q)
  4. Lägg till ett slumptal för att förhindra att servern använder cachade filer
  5. Anropa stateChanged när ett händelseutlösande inträffar
  6. Öppna XMLHTTP-objektet via angiven URL
  7. Skicka HTTP-forespørsel till servern

PHP-sida

Denna server-side sida som anropas av JavaScript, är en enkel PHP-fil med namnet "getcd.php".

Denna sida är skriven i PHP och använder XML DOM för att ladda XML-dokumentet "cd_catalog.xml"。

Kodkörning är riktad mot frågor om XML-filer och returnerar resultat i 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 />");
  } 
}
?>

例子解释

当请求从 JavaScript 发送到 PHP 页面时，发生：

  1. PHP 创建 "cd_catalog.xml" 文件的 XML DOM 对象
  2. 循环所有 "artist" 元素 (nodetypes = 1)，查找与 JavaScript 所传数据向匹配的名字
  3. 找到 CD 包含的正确 artist
  4. 输出 album 的信息，并发送到 "txtHint" 占位符