PHP and AJAX XML Example

AJAX can interact with XML files interactively.

AJAX XML example

In the following AJAX example, we will demonstrate how a web page uses AJAX technology to read information from an XML file.

Select a CD from the following list below

List CD information here.

This example includes three pages:

  • a simple HTML form
  • an XML file
  • a JavaScript file
  • a PHP page

HTML form

The above example includes a simple HTML form and a link to JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Select a 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 will be listed here.</b></div>
</p>
</body>
</html>

Example explanation:

As you can see, it is just a simple HTML form with a dropdown list named "cds".

The paragraph below the form contains a div named "txtHint" which is used as a placeholder for the data retrieved from the web server.

When the user selects data, the function named "showCD" is executed. This function is triggered by the "onchange" event.

In other words, the showCD function is called every time the user changes the value in the dropdown list.

XML file

The XML file is "cd_catalog.xmlThe file contains data related to CD collections.

JavaScript

This is the JavaScript code stored in the "selectcd.js" file:

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;
}

Example explanation:

The stateChanged() and GetXmlHttpObject functions are the same as in the previous section, you can refer to the relevant explanations on the previous page.

showCD() function

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

  1. Call the GetXmlHttpObject function to create an XMLHTTP object
  2. Define the URL (filename) to be sent to the server
  3. Add a parameter with the content of the dropdown list (q) to the URL
  4. Add a random number to prevent the server from using a cached file
  5. Call stateChanged when an event is triggered
  6. Open an XMLHTTP object through the given URL
  7. Send an HTTP request to the server

PHP page

This server-side page called by JavaScript is a simple PHP file named "getcd.php".

This page is written in PHP, using XML DOM to load the XML document "cd_catalog.xml"。

The code runs queries against XML files and returns results in 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 />");
  } 
}
?>

Example Explanation

When a request is made from JavaScript to a PHP page, the following occurs:

  1. PHP creates an XML DOM object for the "cd_catalog.xml" file
  2. Loop through all "artist" elements (nodetypes = 1), and find names that match the data passed from JavaScript
  3. Find the CD containing the correct artist
  4. Output information of album and send it to "txtHint" placeholder