Ajax in brief

Dear Readers,

Thanks for your comments, one of our readers asked me to explain Ajax in brief. I hope he is from IT and having some knowledge about web applications. If not let me put that in brief. All web based applications should have two parts client side and server side. Client side is a typical browser that you are using to view the web page and server side is the application running in the server where the site is hosted.

Many times when we are trying to filling up a web form it will take much time to show the result. That is because the form that you have submitted will get transferred to the server and the resultant page will be displayed. The response time form the server is based on the amount of data that have transferred and the complexity of the logic that the data is validated. User can not able to do any operation once the pages get submitted and the browser will display a blank screen. Using AJAX we can reduce the response time.

AJAX - Asynchronous JavaScript And XML. AJAX is not a programming language, but simply a development technique for creating interactive web applications. AJAX uses JavaScript to send and receive data between a web browser and a web server. The AJAX technique makes web pages more responsive by exchanging data with a server behind the scenes, instead of reloading an entire web page each time a user makes a change With AJAX, web applications can be faster, more interactive, and more user friendly. AJAX uses an XMLHTTPRequest object to send data to a web server, and XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

AJAX is based on the open standards JavaScript, XML, HTML and CSS. The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology) An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.



Let us try this Example:

This is a simple example that I have come across in some site. This will help us to get a feel of how AJAX works; we are going to develop a simple example. Our example consists of two web forms. One will have a Button and a Label. This web form will call the other web form via AJAX. The other web form will not have any UI as it is not directly displayed to the user. It will simply return a string "hello world" in it's Page_Load method. This string is displayed in the previous form when user clicks on the Button.

Create a new Web Application in VS.NET
Add two web forms to it - AJAXMain.aspx and HelloWorld.aspx
Drag and drop a Button and a Label on AJAXMain.aspx
Write following code in the Page_Load event handler of AJAXMain.aspx

Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
Button2.Attributes.Add("OnClick",
"return GetDataViaAJAX();")
If Page.IsPostBack Then
Label1.Text = "Server Date Time :" & DateTime.Now
End If
End Sub


Here, we added client side OnClick event handler to the Button
The GetDataViaAJAX() function is a client side JavaScript function that does the AJAX trick for us.
We then set Label's text to date time stamp. This value will never be displayed because in AJAX model post back is not happening. We are putting this code just to prove this point.
In the .aspx file add following JavaScript function to the HEAD section of the page

var obj;
function GetDataViaAJAX()
{
try
{
obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
obj = null;
}
}
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open("GET",
"http://localhost/AJAXDemo/helloworld.aspx", true);
obj.send(null);
}
return false;
}


Here, we created an instance of XMLHTTP class. This class is the key to the overall AJAX model. It is this class that makes asynchronous requests to the server resources. This class is a part of MSXML parser that ships with IE.
We have used try...catch blocks to take care of version differences between various versions of MSXML.
Once we create the instance of XMLHTTP we set its onreadystatechange property to another function called ProcessResponse.
The ProcessResponse function is supposed to process the return data from the page being requested.
We then call open() method of XMLHTTP and pass the request type (GET or POST), the url to be accessed and whether the request is to processed asynchronously or no.
Finally we call send() method of XMLHTTP class. In case of POST requests you may have some content which you can pass as parameter to the send() method. Since ours is a GET request we pass it as null.
Add following function after the above function

function ProcessResponse()
{
if(obj.readyState == 4)
{
if(obj.status == 200)
{
var retval=obj.responseText;
alert(retval);
}
else
{
alert("Error retrieving data!" );
}
}
}


Here, we created a function called ProcessResponse which will be called when the helloworld.aspx returns the response.
Inside we check readyState property. The value of 4 indicates that the request is complete.
We further check the status code of the request. Status code of 200 indicates ok.
Finally we get the data by calling responseText method of XMLHTTP. There is one more property called responseXML that is used with XML data.
Now, add following code to the Page_Load event of helloworld.aspx

Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
Response.Clear()
Response.Write("hello world")
Response.End()
End Sub


Here, we first clear any response and send a simple string "hello world" using Response.Write method
Finally we call Response.End method to stop the further sending of response.
Set the AJAXMain.aspx as the startup page and run the application.
Click on the button and you should see a message box with "hello world". Notice that this is happening without any post back.

My "Hello World"

Hello Everybody!

I am Arulraj Joseph and this is my blog. For long, I have wanted to start a blog and have managed to do it only now. I can blame my tight work schedule in a leading IT company where I am a Consultant.

This message is my “hello world”.

I live in Chennai, India and work in one of the top three IT companies. I have six years of experience in handling Microsoft, Java and RDBMS technologies. My professional interests are - Consultation, Designing and Solution Architecting. In the last six yeas I have been exposed to these verticals - Manufacturing, Finance, Insurance, BPO, KPO and Automobile.

When not at work, I amuse myself by listening to music, or spending time in the garden or cooking.

More posts will follow this…all I ask you is to give me regular feedback in the form of comments.
For now, Good Day & Good Luck!
Arul J