Implementing AJAX in asp.net application using XMLHttp

XMLHttp is an object that was originally designed by Microsoft to provide client-side access to XML documents on remote servers through the HTTP protocol. It exposes a simple API, which allows you to send requests (GET/POSTS) and get the resultant XML, HTML or binary data.

Here, I am using same problem that I have used in the previous post.

Problem: We have a dropdown server control on our web page that we want to populate with users name from the user table in the database when user clicks on the populate button without flickering effect on the web page.

Follow these steps for implementing ajax solution to this problem in your web application using XMLHttp.

1. Add dropdown control and Pupulate button on the web page.

User Name : < asp:DropDownList ID="ddlUsers" runat="server" Width="100%" >

< input id="btnFill" onclick="getusername()" type="button" value="Fill Users using XMLHttp" />

2. Write following java script on the aspx page.

< script language="javascript" type="text/javascript" >
function getusername()
{
var Url ;
Url ='ProcessXMLHttp.aspx';
var oServerXMLHTTP = createXMLHttp();
/*oServerXMLHTTP.open("GET", Url, false);*/
oServerXMLHTTP.open("POST", Url, false);
// because we're using POST, we need to set some headers.
oServerXMLHTTP.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
oServerXMLHTTP.setRequestHeader("Content-Length",0)

try
{
oServerXMLHTTP.send();
var Response =oServerXMLHTTP.responseText.split(',');

var user=document.getElementById('<%=ddlUsers.ClientID%>');
var tab=document.createElement('table');
for(i=0;i < Response.length;i++)
{

user.options[user.options.length]=new Option(Response[i],i);
}

}
catch(e)
{

}
return true;

}
function createXMLHttp()
{
if (typeof XMLHttpRequest != "undefined")
{
return new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var aVersions = [ "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp","Microsoft.XMLHttp"];
for (var i = 0; i < aVersions.length; i++)
{
try
{
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
}
catch (oError)
{
//Do nothing
}
}
}
throw new Error("XMLHttp object could be created.");
}
< /script >

In this script I have used post method for http request, you can also use Get method that I have commented out in the script.

3. Now create ProcessXMLHttp.aspx page that you have passed as a url to the open method of XMLHttp object and write following code in its cs file.

protected void Page_Load(object sender, EventArgs e)
{
GetUsers();
}

public void GetUsers()
{
IBLLService ObjBLLService = BLLServiceFactory.GetBLLService();
DataSet Ds = ObjBLLService.GetData();

Response.Clear();
string str=String.Empty;
for (int i = 0; i < Ds.Tables[0].Rows.Count; i++)
if(i==Ds.Tables[0].Rows.Count-1)
str = str + Ds.Tables[0].Rows[i][0].ToString() ;
else
str = str + Ds.Tables[0].Rows[i][0].ToString() + ",";

Response.Write(str);
Response.End();
}

In the GetUsers method, Replace the following lines with your own code to get the users name data from the DB.

IBLLService ObjBLLService = BLLServiceFactory.GetBLLService();
DataSet Ds = ObjBLLService.GetData();

4. Now you are finished with the coding, its time to test it.