AJAX XML

<html>
<head>
<script src="vyomselected.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>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>

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

The paragraph below the form contains a div tag called "txtHint". The div is used as a placeholder for information retrieved from the web server.

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

The JavaScript code is given below

The AJAX JavaScript

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

var xmlHttp

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getcustomer.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 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{ objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

The AJAX Server Page

The server paged called by the JavaScript, is a simple ASP file having name "getvyomcd1.asp"

The page is written in VBScript for the Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server languages.

The code runs a query against an XML file and returns the result as HTML format.

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

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.