AJAX can be used for interactive communication with an XML file.

AJAX XML example

The following example will demonstrate how a web page can fetch information from an XML file with AJAX technology.

Select a CD:

CD info will be listed here…

Example explained – The HTML page

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

<html>
<head>
<script type="text/javascript" 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="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>

<div id="txtHint"><b>CD info will be listed here…</b></div>

</body>
</html>

As you can see it is just a simple HTML form  with a simple drop down box called "cds".

The <div> below the form will be used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCD is called.

Example explained – The JavaScript code

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

var xmlhttp

function showCD(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
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)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter, you can go to there for an explanation of those.

The showCD() Function

When a CD in the drop-down box is selected, the showCD() function executes the following:

  1. Calls the GetXmlHttpObject() function to create an XMLHTTP object
  2. Defines an URL (filename) to send to the server
  3. Adds a parameter (q) to the URL with the content of the drop-down box
  4. Adds a random number to prevent the server from using a cached file
  5. Each time the readyState property changes, the stateChanged() function will be executed
  6. Opens the XMLHTTP object with the given URL
  7. Sends an HTTP request to the server

Example explained – The PHP Page

The server paged called by the JavaScript, is a PHP file called "getcd.php".

The PHP script loads an XML document, "cd_catalog.xml", runs a query against the XML file, and returns the result as 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("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>

When the CD query is sent from the JavaScript to the PHP page, the following happens:

  1. PHP creates an XML DOM object
  2. Find all <artist> elements that matches the name sent from the JavaScript
  3. Output the album information (send to the "txtHint" placeholder)