AJAX: Forget the form post and waiting

• Download demo project - 24.2 Kb

Contents

• Introduction
• How it can help you?
• How technology works?
• Essential bread and butter of AJAX
• Example of AJAX

Introduction

How many times in life, a web programmer comes across the scenario where, he needs to get the shipping/billing address from the customer. This scenario generally asks the end user to fill his name and address details. Address generally requires the end user to fill country, state and city details. The beauty of the code lies in the fact there is a big country database running behind, which returns states as per the country selected, and then city as per the state selected.

However the issue here is the whole screen refreshes when country is selected to get the state. Similarly when user selects the state, the screen refreshes again to load the city details.

Let us take another scenario where the end user is trying to purchase Hard Rock CD from an ecommerce enabled music site. Jim Morrison’s Door is something he is trying to get (my friend listens to it so I know this singer only). Now in order to get the CD from the site, the user is struggling through the categories and then there is a frustrating time spent in watching the whole page getting refreshed.

To mitigate this issue of page refresh, there in the corner is a programmer; he tries to solve this problem using client side scripting. He posts all the data and the options (categories and subcategories) at a single go. He is then using client side scripting to show the subcategories under the main category. This seems to be a good solution because now there is no full page refresh, instead of that, change events at the client end are at work.

But now the end user is frustrated a bit because he has got a slow internet connection which works at somewhat better than the dying speed. The above mentioned solution is taking too much time to download on his browser.

Problem:

Here we can clearly see the problem, the user has to either wait for the page to get downloaded or he has to frustratingly watch the whole screen refresh.

How AJAX can help you?

AJAX a new animal in the corner; is now here to help the developer in these scenarios. A closer example of AJAX can be seen in the MSDN site of Microsoft where the left hand contents in the tree views are populated without a frustrating whole screen refresh. (I may be wrong in interpreting them but as far as the working is concerned they fall very near to it.)

AJAX can help you by helping you to make sites which don’t spit all the data at once to the end-user, hence reducing the page size and also removing the frustrating whole page load scenario. Depending upon the data which you need at run time, the performance of your page may vary but it won’t be easily visible. The core part in the whole exercise is that you can asynchronously download the discrete amount of data from the server. So our above scenarios will change, as the user after selecting a country need not wait for the frustrating whole page post back and the user who is selecting the category for the music album will not wait for the long page load delays.

The present situation without AJAX

The current web site models generally work on the following system:

In the above graphics, the communication lines going to and fro from the server are synchronous.

After implementing the AJAX logic:

Using AJAX, the above will have the benefits of asynchronous calls. So the data can be requested on demand from the server.

How to implement AJAX entirely depends upon you. You can make simple calls or you can make a complex control which works on the AJAX, that is your decision. You can make a simple page which calls the AJAX component to get the data. You can also make user controls (.NET) which when rendered spit out the logic of AJAX.

How technology works?

AJAX stands for Asynchronous JavaScript and XML. So it is not a technology instead it’s a bunch of technologies. These are working in a close manner to get the things done for you. AJAX works on client side server calls, retrieval of data and updating of the UI. However the heart of AJAX is the client side script calling the server side script to retrieve data over HTTP. So XMLHttpRequest can be considered as the core root of the technology.

Essential bread and butter of AJAX

The AJAX technology’s heart is, remote calling capability of client script. This is the essential bread and butter of AJAX. These remote server calls can be achieved through the components like XMLHttpRequest or ‘remote scripting’ of JavaScript.

The second thing is some server side scripting which is listening to the requests made by JavaScript and then fulfilling this request. There can be a page in our server side component which is based on the variation of the client script call. This server side component may return based upon the call made by the client side script.

Let us consider a server side script reading the query string variables and then returning data based on the logic of the application. E.g. passing r=1 will return the room numbers while passing k=1 will return all the key number of the lock pertaining to the room.

Let us summarize; to create a simple AJAX page, the following steps are needed:

• Client side scripts which are capable of performing XML HTTP request. Remote scripting could be another option.
• Client side event handler which performs the action once the asynchronous call returns.
• Server side module which performs the application logic to fulfill the request.
• Client side event which initiates an event to make asynchronous call and start, e.g.: button click.
• Additionally if your target audience is using a variety of browsers then there should be some code which detects the browser and then performs the XML HTTP request using the component supported by the browser.

Example of AJAX

I will try to show you an example which will retrieve data using AJAX. This example is very simple and does not involve any heavy server side processing logic. Like, there is no database interaction, and the server side script will only return a simple string. However in a real life scenario, there can be XML data which it might return. Let us say there is a three floored building and the people living on the first floor are Jerry, Mary and Cherry. Second floor is occupied by Jack, Jill and Harry. And the ground floor by Jim, Charlie and Aqua. So here is the summary:

Ground floor: Jim, Charlie and Aqua.      Floor ID: 0 
First floor:  Jerry, Mary and Cherry.     Floor ID: 1 
Second floor: Jack, Jill and Harry.       Floor ID: 2

We will try to make a .NET application for the same. The functionality of our application will be to show the names of the people residing on a particular floor. There will be a drop down box and when user changes the selection, the combo box’s client side change event will fire and it will retrieve the data from the server. Our application will have two components: one is the front end and the other will be the floor component. The front end will compromise of the .aspx page which will call the back end functionality for getting the floor resident people. The back end method will be simple: based on the floor ID passed, it will return the concatenated names of the people.

** Our example is assuming that all people are IE savvy.

Code walk through

The sample example consists of two aspx pages and one component. Let us discuss the component first.

AjaxComponentClass: the component is a sealed class which has only one static method. This method returns the names of the people living on a particular floor. The component has a private constructor as the component has got only one static method and I don’t want anyone else to make an object of the component. Remember static methods can be called without creating an object.

** For a real life work this component can go to database and return xml data or data in any format which your application understands.

Home page: this is the default page of the application. For the sake of simplicity it has got only one combo box and one label. On the change of the combo box selection we call the method asynchronously. There is lot of JavaScript there in the file, please see inline comments there.

AjaxFrontEnd: this file is the actual processor. Please note that the HTML part of this file has been removed so that only our names get passed through, otherwise when we call the method, the default HTML of the file will also get transferred.

** In real life there may be n number of cases this page is dealing with and it can call n number of components.