AJAX XML Example
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 in the drop-down box below:
CD info will be listed here...
AJAX example explained
The example above contains a simple HTML form and a link to a 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="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.
The AJAX JavaScript
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.asp";
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 AJAX server page
The server page called by the JavaScript above, is an ASP file called "getcd.asp".
The page is written in VBScript for an Internet Information Server (IIS). It
could easily be rewritten in PHP, or some other server language.
Look at a corresponding example in PHP.
The code runs a query against an XML file and returns the result as HTML:
<%
response.expires=-1
q=request.querystring("q")
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))
set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")
for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
%> |
The XML file
The XML file used in the example is "cd_catalog.xml". This document contains a CD collection.
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data.
Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.
Download a free, fully functional 30-day trial to experience the following features:
- Easy-to-use, graphical data mapping interface
- Instant data transformation
- XSLT 1.0/2.0 and XQuery code generation
- Java, C#, and C++ code generation
- Advanced data processing functions
- Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
- Visual Studio & Eclipse integration
Download a fully-functional trial today!
|
|
|
| 
