Introduction
This article is aimed at those who are new to AJAX and who are willing to implement their code using AJAX in the classic way with JavaScript and XML.
Using the code
This article will help a person who knows what AJAX is and wants to implement it in a simple way using JavaScript and XML. This article will show how to implement AJAX technology in a simple way in ASP.NET and will not go in-depth into explaining what the technology is. I have used two drop-down lists (DDLs) to implement AJAX. The first drop-down list contains alphabets. On selecting a particular alphabet from the first DDL, the second DDL will populate with names starting with the selected alphabet, assuming that the browser is IE.
What do we need?
- Two DDLs:
ddl_alphabets
and ddl_users
- Two XML files: alphabets.xml and users.xml
- Two ASPX web forms: Client.aspx and Remote.aspx
- Include the System.xml namespace in your CS files
The XML files are in the downloadable version. In the Page_Load
event of Client.aspx.cs, add the following code for populating the two DDLs from the alphabets.xml and users.xml files.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("~\\alphabets.xml"));
XMLDataDocument XMLDoc = new XMLDataDocument(ds);
foreach (
XmlNode XMLNodes in XMLDoc.SelectNodes("/alphabets/alphabet"))
{
ddl_alphabets.Items.Add(
new ListItem(xmlNodes.ChildNodes[0].InnerText.ToString()));
}
ds = new DataSet();
ds.ReadXml(Server.MapPath("~\\users.xml"));
XMLDoc = new XMLDataDocument(ds);
foreach (XmlNode XMLNodes in XMLDoc.SelectNodes("/Users/User"))
{
ddl_users.Items.Add(
new ListItem(xmlNodes.ChildNodes[0].InnerText.ToString()));
}
ddl_alphabets.Attributes.Add("onChange", "getUsers(this.value)");
}
}
Now let's get to the interesting stuff, the JavaScript functions! In the head section of the Client.aspx source page, add the following under the script tag.
var requestURL = window.document.location.toString();
var start = 0
var end = requestURL.lastIndexOf("/") + 1;
var remotePage = 'Remote.aspx?alphabet=';
requestURL = requestURL.substring(start,end) + remotePage;
var XMLHttp;
var is_ie = (navigator.userAgent.indexOf('MSIE') >= 0) ? 1 : 0;
var is_ie5 = (navigator.appVersion.indexOf("MSIE 5.5")!=-1) ? 1 : 0;
The JavaScript function getUsers
is called when the user selects an item from ddl_alphabets
.
function getUsers(alphabet)
{
var ddl=document.getElementById("ddl_alphabets");
if (ddl.selectedIndex==0)
{
alert("please select item");
alphabet="FetchEmAll";
}
if (alphabet.length > 0)
{
var url = requestURL + alphabet;
XMLHttp = GetXmlHttpObject(stateChangeHandler);
XMLHttp_Get(xmlHttp, url);
}
}
stateChangeHandler
will fire when the state has changed, i.e. data is received back. This is non-blocking (asynchronous).
function stateChangeHandler()
{
if (xmlHttp.readyState == 4 || XMLHttp.readyState == 'complete')
{
var str = XMLHttp.responseText;
if (xmlHttp.responseXML.documentElement != null)
{
ClearUsersAndSetUsers(xmlHttp.responseXML.documentElement);
}
else
{
alert("No Match");
}
}
}
The GetXmlHttpObject
JavaScript function creates a new browser object.
function GetXmlHttpObject(handler)
{
var objXmlHttp = null;
if (is_ie)
{
var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
try
{
objXmlHttp = new ActiveXObject(strObjName);
objXmlHttp.onreadystatechange = handler;
}
catch(e)
{
alert('Object could not be created');
return;
}
}
return objXmlHttp;
}
The XMLHttp_Get
function sends the GET
request to the specified URL for response from the remote page.
function XMLHttp_Get(xmlhttp, url)
{
XMLhttp.open('GET', url, true);
XMLhttp.send(null);
}
The ClearUsersAndSetUsers
function gets the XML document sent from Remote.aspx. It clears and sets ddl_users
with new items.
function ClearUsersAndSetUsers(userNodes)
{
var usersList = document.getElementById("ddl_users");
var userNameNodes = userNodes.getElementsByTagName('name');
var textValueName;
var optionItemName;
for (var count = usersList.options.length-1; count >-1; count--)
{
usersList.options[count] = null;
}
for (var count = 0; count < userNameNodes.length; count++)
{
textValueName = GetInnerText(userNameNodes[count]);
optionItemName = new Option( textValueName,
textValueName, false, false);
usersList.options[usersList.length] = optionItemName;
}
}
function GetInnerText (node)
{
return (node.textContent || node.innerText || node.text) ;
}
Next let's see the Remote.aspx web form. In Page_Load
of Remote.aspx, add the following.
protected void Page_Load(object sender, EventArgs e)
{
string strAlphabet = Request["alphabet"].ToString();
int nameFound = 0;
string strXmlNames = "";
int i = 0;
ArrayList users = new ArrayList();
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("~\\users.xml"));
XMLDataDocument XMLDoc = new XMLDataDocument(ds);
foreach (XmlNode XMLNodes in XMLDoc.SelectNodes("/Users/User"))
{
users.Add(xmlNodes.ChildNodes[0].InnerText.ToString());
}
foreach (string strName in users)
{
if (strAlphabet == "FetchEmAll")
{
strXmlNames += "<user><name>" + strName + "</name></user>";
nameFound = 1;
}
else if (strName.Length > strAlphabet.Length)
{
if (strName.ToLower().Substring(0,
strAlphabet.Length) == strAlphabet.ToLower())
{
nameFound = 1;
strXmlNames += "<user><name>" + strName + "</name></user>";
}
}
else if (strName.Length == strAlphabet.Length)
{
if (strName == strAlphabet)
{
nameFound = 1;
strXmlNames += "<user><name>" + strName + "</name></user>";
}
}
i += 1;
}
if (nameFound == 1)
{
strXmlNames =
"<?xml version=\"1.0\" ?><users>" + strXmlNames + "</users>";
}
else
{
strXmlNames = "";
}
Response.Clear();
Response.ContentType = "text/xml";
Response.Write(strXmlNames);
Response.End();
}
Simply download the working version of this AJAX implementation using Classic.
History
- 25 July, 2007 -- Original version posted
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.