AJAX

A new Approach to Web Applications

By: Sheeti Kantha Das.

1 Wipro Technologies - Wipro Confidential - Not for Distribution

Traditional Web Application Model

HTTP
Data Web Server App. Server

Problems in traditional WebApplication

Load the page for every action (that requires processing by the server) of the user. Even though some part of the page needs to be updated, the whole page gets loaded.

If the data to be displayed on the screen is huge then it may take more time for the application to go to next page or to reload the same page.
User has to wait for the page to get reloaded and then continue the work.
2 Wipro Technologies - Wipro Confidential - Not for Distribution

Example classic Web Application

The Page gets reloaded on selecting the dropdown list.

3 Wipro Technologies - Wipro Confidential - Not for Distribution

What is AJAX
To overcome the time consuming nature (more hits to server i.e. resulting in heavy traffic at the server end) of classic web applications and to make it more interactive AJAX came into picture. Ajax is not a new programming Language, rather its a technique/framework to create better, faster and more interactive Web Applications. AJAX is a browser technology independent of web server software.

4 Wipro Technologies - Wipro Confidential - Not for Distribution

History of AJAX

Intially named as XMLHTTP The term AJAX was first coined by Jesse James Garrett of Adaptive Path. AJAX was made popular by Google by using it in Gmail and Google suggest.

5 Wipro Technologies - Wipro Confidential - Not for Distribution

Purpose of AJAX

Prevents unnecessary reloading of a page.

Makes Web Applications More interactive and Faster. More user friendly.

6 Wipro Technologies - Wipro Confidential - Not for Distribution

AJAX conglomeration of technologies

Technology XMLHttpRequest XML and XSLT DOM

Purpose Asynchronous Data Retrieval Data Interchange To achieve dynamic display & interaction.

XHTML & CSS JavaScript

For Presentation For binding all the above technologies in a single thread.

7 Wipro Technologies - Wipro Confidential - Not for Distribution

AJAX Application Model

A J A X E N G I N E
Data

Web Server

App Server

An Ajax application eliminates the start-stop-startstop nature of interaction on the Web by introducing an intermediary an Ajax engine between the user and the server.

8 Wipro Technologies - Wipro Confidential - Not for Distribution

Non-Ajax Web application Vs Ajax-Web application

9 Wipro Technologies - Wipro Confidential - Not for Distribution

AJAX engine
A J A X E N G I N E

User actions

.htm .aspx .js

Web browser

JavaScript calls HTML + CSS

XMLHttp Request Server data in XML or Text

Data

Web services

It is the JavaScript code written by the programmer.

10 Wipro Technologies - Wipro Confidential - Not for Distribution

AJAX Implementation in Web Application

To implement AJAX in the development of a web application we must built around XMLHttpRequest object, everything in Ajax revolves around manipulating and handling this object. This object along with JavaScript is capable of making asynchronous calls to the server.

11 Wipro Technologies - Wipro Confidential - Not for Distribution

Example

Webservice method

Page Level service method Page Level service method

12 Wipro Technologies - Wipro Confidential - Not for Distribution

Real life Examples

1.Google Suggest:

As you type something into the search text field, the system goes to the server and fills in a short selection area with even further information about the number of results. A user can use their arrow keys to tap down to a final selection.

13 Wipro Technologies - Wipro Confidential - Not for Distribution

2.Gmail:

Here we see the same thing as you type in something into the search text field, the system goes to the server and fills in a short selection area with even further information about the number of results. A user can use their arrow keys to tap down to a final selection.

14 Wipro Technologies - Wipro Confidential - Not for Distribution

More Examples

AJAX is more seriously employed in social sites like Flickr, del.icio.us, Orkut, and some web based desktop replacement applications like Google spreadsheet, Writely online editor, AjaxWrite, Zoho office suite etc.

15 Wipro Technologies - Wipro Confidential - Not for Distribution

Example of AJAX Web Application

1. Instantiate the XMLHttpRequest Object:
<script type="text/JavaScript"> var xmlHttp; //function to create the new instance of XMLHttpRequest object function instantiateXMLHttpRequest() { //In IE XMLHttpRequest is a ActiveX object if (window.ActiveXObject) { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } //non IE browsers else if (window.XMLHttpRequest) { xmlHttpReq = new XMLHttpRequest(); } }
16 Wipro Technologies - Wipro Confidential - Not for Distribution

2. Send the asynchronous request to server

//function call asynchronous request to server function startRequest() { instantiateXMLHttpRequest (); //set callback method xmlHttp.onreadystatechange = handleResponseMethod; var url="HelloAjaxServer.aspx"; //instantiate request xmlHttp.open("GET",url, true); //send request to server xmlHttp.send(null); }

17 Wipro Technologies - Wipro Confidential - Not for Distribution

3. Receive the response

//function to handle the response of the request function handleResponseMethod () {//if request completed sucessfully clear the previous result and show the new search results if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) {doSomething();} } }//end of handleResponseMethod

18 Wipro Technologies - Wipro Confidential - Not for Distribution

Browsers & AJAX

Browsers supporting Ajax :
Microsoft Internet Explorer version 5.0 and above, and browsers based on it (Mac OS versions not supported) Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon and Netscape version 7.1 and above Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, and Apple Safari version 1.2 and above Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above

Note: KHTML : Desktop Environment HTML

19 Wipro Technologies - Wipro Confidential - Not for Distribution

Browsers & AJAX

Browsers that do not support Ajax:
Opera 7 and below Microsoft Internet Explorer (below version 5.0) Text-based browsers like Lynx and Links

Browsers for the visually impaired (speech-synthesising, braille)

Browsers made before 1997

20 Wipro Technologies - Wipro Confidential - Not for Distribution

Pros

Real-time form data validation Autocompletion Load on demand Sophisticated user interface controls and effects Refreshing data and server push Partial submit Mashups Page as an application

21 Wipro Technologies - Wipro Confidential - Not for Distribution

Cons and Criticism

Browsing history Search engine interaction Server load Security

22 Wipro Technologies - Wipro Confidential - Not for Distribution

Conclusion

Ajax applications represent the best of both worlds: the responsiveness of Desktop applications combined with the simplicity and usability of traditional web applications.

23 Wipro Technologies - Wipro Confidential - Not for Distribution