AJAX XML

AJAX can be used for interactive communication with an XML file. A web page can fetch information from an XML file with AJAX technology, e.g when you select an item from a dropdown box.
Select a CD:
1
2
3
4
5
6
7
8
9
10
11

TITLE: One night only
 
ARTIST: Bee Gees
 
COUNTRY: UK
 
COMPANY: Polydor
 
PRICE: 10.90
 
YEAR: 1998
Example - The HTML page
The HTML page contains a link to an external JavaScript, an HTML form, and a div element:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<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>
Example - The JavaScript code
This is the JavaScript code stored in the file "selectcd.js":
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

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;
 
}
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

 
<?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 />");
 
  }
 
}
 
?>
AJAX Introduction
AJAX Suggest
AJAX responseXML
AJAX Live Search