Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
 New Feature: Community Sites:
Create your own .NET community website and start earning from Google AdSense !
It's Free !
|
Hands on AJAX
|
Introduction
AJAX is one of the Buzz words in Web development nowadays, thanks to some cool implementation by Google in gmail.com. Here is a simple example that I tried to start off my first experiment with AJAX.
The Web page
I started off by creating a Web form in ASP.NET.
The source code of the Web page is as follows:
<script language="C#" runat="server">
public void Page_Load(
object sender, EventArgs e )
{
SqlConnection con = new
SqlConnection("server=(local);user id=sa;pwd=;database=northwind");
SqlCommand cmd = new SqlCommand("select * from employees order by LastName",
con);
con.Open();
SqlDataReader dr =
cmd.ExecuteReader(CommandBehavior.CloseConnection);
while( dr.Read() )
{
Response.Write( dr["FirstName"].ToString() + ", " +
dr["LastName"].ToString() + "
");
}
dr.Close();
}
</script>
Save this page as db.aspx
The code is very simple. I am connecting to the Northwind database and displaying the Employee names from the Employees table.
Now the server side page need not be a ASP.NET page, it could be PHP, ASP, JSP or any other server side script.
The Client page
The source code for the client side page is as follows:
<html>
<head>
<script>
var X=null;
//Function to get the XMLHTTP Object. Gets it in a IE/Mozilla friendly way.
function getXMLHTTP(){
var X;
//For IE
try{
X=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
X=new ActiveXObject("Microsoft.XMLHTTP");
} catch(oc){
X=null;
}
}
//For Non-IE browsers
if(!X && typeof XMLHttpRequest !="undefined") {
X=new XMLHttpRequest();
}
return X;
}
//This function is called in the document onLoad event to fill the DIV tag
//with the data from the server side web page.
function FillData(d)
{
//Abort if the XMLHTTP object is already initialised or in use
if(X && X.readyState!=0){
X.abort()
}
X=getXMLHTTP();
d = document.getElementById(d);
eval(d).innerText = "Loading....";
if(X){
//Use the object's open method and pass the required arguments.
//First argument is the method, GET or POST
//Second argument is the web page's URL
//Third argument is to mention if the process should be asynchronous or not
X.open("GET","db.aspx",true);
// This function is called only if we get a complete response from the web page.
X.onreadystatechange=function() {
if(X.readyState==4&&X.responseText) {
// Once we get the complete response, pass the response text to the Div tag.
eval(d).innerHTML = X.responseText;
}
};
}
X.send(null);
}
function Fill()
{
FillData("disp");
}
</script>
</head>
<body>
<div id="disp">
</div
</body>
</html>
Save this page as a HTML file.
Place both the files in web server and if you run the HTML file you should see the data from Employee table populating the DIV tag. This works in the latest version of IE, FireFox and Opera.
Summary
As you can see from this simple example, AJAX is not really a new technology as we are using the age old Javascript functions to implement the same. If you are good at DHTML, it is left to your imagination as to what you can do with it.
Happy Coding!
Sumit
|
Responses
|
No responses found. Be the first to respond and make money from revenue sharing program.
|
|