Saturday, August 23, 2008

Ajax in classic ASP

Hi,
Till now all these 2 years of my IT exp, i have been working in aspx pages only and for ajax i was using the ajax dll only, but recently i got a chance to work in classic asp page where i had to implement ajax in a asp page, i have heard before that it is possible to do it with xmlhttprequest object, but i have not tried it till now, as i have to work on it, before applying it in my application, i did some googling and then worked on some sample pages to know about it, even though it irritated me a little when trying but at the end i was satisfied that i learnt a new concept, so i would like to share one of my sample pages,
it needs a xml file and a html file, for which i have placed the code below

====================================================================================
Customers.xml
< ?xml version="1.0" encoding="utf-8" ? >
< Root >
< Customers >
< Name >Customer1< / Name >
< Address >Address1< / Address >
< City >City1< / City >
< State >State1< / State >
< / Customers >
< Customers >
< Name >Customer2< / Name >
< Address >Address2< / Address >
< City >City2< / City >
< State >State2< / State >
< / Customers >
< Customers >
< Name >Customer3< / Name >
< Address >Address3< / Address >
< City >City3< / City >
< State >State3< / State >
< / Customers >
< Customers >
< Name >Customer4< / Name >
< Address >Address4< / Address >
< City >City4< / City >
< State >State4< / State >
< / Customers >
< Customers >
< Name >Customer5< / Name >
< Address >Address5< / Address >
< City >City5< / City >
< State >State5< / State >
< / Customers >
< Customers >
< Name >Customer6< / Name >
< Address >Address6< / Address >
< City >City6< / City >
< State >State6< / State >
< / Customers >
< Customers >
< Name >Customer7< / Name >
< Address >Address7< / Address >
< City >City7< / City >
< State >State7< / State >
< / Customers >
< Customers >
< Name >Customer8< / Name >
< Address >Address8< / Address >
< City >City8< / City >
< State >State8< / State >
< / Customers >
< Customers >
< Name >Customer9< / Name >
< Address >Address9< / Address >
< City >City9< / City >
< State >State9< / State >
< / Customers >
< Customers >
< Name >Customer10< / Name >
< Address >Address10< / Address >
< City >City10< / City >
< State >State10< / State >
< / Customers >
< / Root >

====================================================================================

save the above content as a xml file named as customers.xml (removing the spaces in between the content)

====================================================================================
Test.html

< html >
< head >
< title >Sample XML HTTP< / title >
< script language="javascript" type="text / javascript" >
function GetCustomers()
{
var xmlHttp, strPgUrl
xmlHttp = CreateXmlObject();
if(xmlHttp == null)
{
alert('Sorry, your browser does not support XmlHttpRequest');
return;
}
strPgUrl = "Customers.xml";
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 1)
{
document.getElementById('loading').innerHTML = "Loading...";
}
if(xmlHttp.readyState == 4)
{
var xmlDoc = xmlHttp.responseXML.documentElement;
if(xmlDoc != null)
BindCustomerInfo(xmlDoc);
document.getElementById('loading').innerHTML = "";
}
}
xmlHttp.open("GET",strPgUrl,true);
xmlHttp.send(null);
}
function BindCustomerInfo(xmlDoc)
{
var TotalCount, strContent;
TotalCount = xmlDoc.getElementsByTagName("Customers").length;
if(TotalCount != 0)
{
strContent = "< table border='1' cellpadding='1' cellspacing='1' >";
for(var icnt = 0;icnt< TotalCount;icnt++)
{
strContent += "< tr >";
strContent += "< td >";
strContent += xmlDoc.getElementsByTagName("Name")[0].childNodes[0].nodeValue;
strContent += "< / td >";
strContent += "< td >";
strContent += xmlDoc.getElementsByTagName("Address")[icnt].childNodes[0].nodeValue;
strContent += "< / td >";
strContent += "< td >";
strContent += xmlDoc.getElementsByTagName("City")[icnt].childNodes[0].nodeValue;
strContent += "< / td >";
strContent += "< td >";
strContent += xmlDoc.getElementsByTagName("State")[icnt].childNodes[0].nodeValue;
strContent += "< / td >";
strContent += "< / tr >";
}
strContent += "< / table >";
document.getElementById('Customers').innerHTML = strContent;
}
}
function CreateXmlObject()
{
var xmlHttp = null;
try
{
xmlHttp = new XMLHttpRequest(); / / Opera, Safari, Firefox
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); / / IE
}
catch(e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function ClearData()
{
document.getElementById('Customers').innerHTML = "";
}
< / script >
< / head >
< body >
< table >
< tr >
< td >
< input type="button" value="Get Customers" id="btnget" onclick="GetCustomers()" / >   
< input type="button" value="Clear" id="btnclear" onclick="ClearData()" / >
< / td >
< / tr >
< tr >
< td >
< span id="loading" >< / span >
< / td >
< / tr >
< tr >
< td >
< span id="Customers" >< / span >
< / td >
< / tr >
< / table >
< / body >
< / html >

====================================================================================
likewise save the above content as test.html

In the customers.xml file, it just contains customer information.
In the test.html, it has 2 input buttons one to get the customer information and the other to clear the fetched data.
the GetCustomers() javascript method will intially create a xml http object using the CreateXmlObject() method, the CreateXmlObject() will create the xmlhttp object for all browsers.
after the object is created it will call the generic method to send a request to fetch the data and binds the data in to a span element.

i hope the above information is enough to understand the concept

if needed let me know, i will explain more in detail

Cheers
Venkat

1 comment:

Venkat said...

if the xml tag has attribute, then this is the way to get the value,

< Root >
< Customers id = " cust1 " >
< .....
..... >
< / Customers >

xmlDoc . getElementsByTagName( " Customers " ) [ 0 ].attributes [ 0 ] . text