AJAX TECHNOLOGY

By

Prashant Baid 1214109135

OVERVIEW
Introduction Existing AJAX applications Classic Vs AJAX AJAX interaction steps XmlHttpRequest and its properties Applications of AJAX Examples of AJAX

INTRODUCTION
AJAX is not a programming language, but simply a new technique for creating better, faster and more interactive web applications. AJAX(Asynchronous JavaScript and XML) is a technique for submitting server requests "in the background" and returning the information from the server to the user without the necessity of waiting for a page reload.

Contd
With the AJAX model the execution of the web page is processed in three different phases:

Phase 1:Loading of the page.

Phase 2:Loading data from the server using AJAX techniques.

Phase 3:Interactions with the page using AJAX techniques.

Existing AJAX applications are of two types

1) partially AJAXed - here AJAX is used to provide certain functionalities. e.g. Flickr and

2) fully AJAXed - here AJAX is necessary for functionalities as well as for user-interface. e.g. Meebo, Google Maps, Windows Live

CLASSIC Vs. AJAX

AJAX INTERACTION STEPS

1. A client event occurs.

2. A XMLHttpRequest object is created and configured.

3. The XMLHttpRequest object makes a call.

4. The request is processed by the ValidateServlet.

Contd
5. The ValidateServlet returns an XML document containing the results.

6. The XMLHttpRequest object calls the callback () function and processes the result.

7. The client page is updated.

BASIC AJAX INTERACTION DIAGRAM

XMLHTTP REQUEST
A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript Make an HTTP request from a JavaScript event A call back JavaScript function is invoked at each state of the HTTP request and response

XMLHTTP REQUEST PROPERTIES

onreadystatechange - call back function for state changes readyState - the current state of the HTTP call responseText - the text result of the request

Contd
responseXML - DOM xml object from the request
status - HTTP status code of the response statusText - HTTP status text

APPLICTIONS IN AJAX
3-tier client/server apps Browser App Server Data Source Event driven User clicks, user drags, user changes data Graphics Intensive Visual Effects, Rich Visual Controls

Contd
Are Data Oriented Users are manipulating and entering data Are Complex Pages hold many more controls and data than page-oriented Applications Multiple Master-Detail Relationships in one page

Examples in AJAX
G-Mail www.gmail.com Google Maps www.maps.google.com Flickr www.flicker.com Facebook www.facebook.com

ADVANTAGES
Google helped popularize, and legitimize it in G-Mail Increase Usability of Web Applications Rich Internet Applications without Flash Save Bandwidth Download only data you need

Faster interfaces (sometimes)

LIMITATIONS
Breaks back button support URL's don't change as state changes Cross Browser Issues can be a pain JavaScript may tax older machines CPU Can't access domains other than the calling domain Debugging is difficult

Conclusion

Although AJAX allows us to build new and improved ways of

interacting with a Web page, as developers we need to remember that the product is not about the technologies.

Its about the users and how they interact with the product. Without the users, the projects we build would have no purpose. With that principle in mind, we can assess what technologies to use and when to use them in order to create an application that's beneficial to all who use it.