AJAX

-Sudhamayi

                      Before actually going into AJAX, let’s see what does Rich internet applications provide us with. Rich Internet applications (RIAs) are web applications that have most of the characteristics of desktop applications like

• The program responds intuitively and quickly
• Program gives a user meaningful feedback instantly
• Things happen naturally. A simple event like a mouseover could trigger an event. 

With this knowledge on RIA ,let’s see what Ajax is.

What is AJAX?
                         AJAX is one of the RIA frameworks. AJAX stands for Asynchronous JavaScript and XML. AJAX is a group of interrelated web development techniques used on the client-side to create interactive web applications. AJAX is a technique for making the user interfaces of web applications more responsive and interactive
                                 Ajax is not a technology in itself, but is a term that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and the XMLHttpRequest object combination of which makes the application faster and more responsive

Why do we need AJAX?
                               With AJAX user experiences intuitive and natural user interaction. No clicking is required. Simple mouse movement is a sufficient event trigger. Here "Partial screen update" replaces the "click, wait, and refresh” user interaction model. Only user interface elements with new information are updated rest of them remaining uninterrupted. AJAX is data-driven as opposed to page driven. UI is handled in the client while data is provided by the server.
                            Asynchronous communication replaces synchronous request/response model. A user can continue to use the application while the client program requests information from the server in the background. As most of the part is written with Javascript it is easily understandable.

Comparison with Classic Web application

 As seen in the picture, the communication with the server would be asynchronous. Meaning , if a request is sent to the server for doing some select operation on the database, then the user can still continue filling the rest of his form. Meanwhile the server fetches the data from the backend database server and updates the frontend display. User need not wait for the all the data to be fetched. Similarly, if a form with a lot of fields is there then we need not wait until all the fields are filled, for submitting the form and for subsequent validation. Immediately after filling a form field it could be sent to the server and validated.


Technologies used in AJAX

• Javascript:
• Loosely typed scripting language
• JavaScript function is called when an event in a page occurs
• Glue for the whole AJAX operation
• DOM
•  API for accessing and manipulating structured documents
• Represents the structure of XML and HTML documents
• CSS 
• Allows for a clear separation of the presentation style from the content.May be changed programmatically by Javascript.
• XMLHttpRequest
• JavaScript object that performs asynchronous interaction with the server

XMLHttpRequest object

• XMLHttpRequest  is a JavaScript object
• It is adopted by modern browsers like Mozilla , Firefox, Safari and Opera
• Communicates with a server via standard HTTP
• GET/POST
• This object works in the background for performing asynchronous communication with the backend server. This does not interrupt user operation.

Basic flow of in an Ajax based application

• A client event occurs (like mouse click or an on change event)
• An XMLHttpRequest object is created
• The XMLHttpReques object is configured
• The XMLHttpRequest object makes an asynchronous request to the server side component
• The server side component returns an XML document containing the result
• The XMLHttpReques object calls the callback() function and processes the result
• The HTML DOM is updated and the intended output is displayed. 

                                 For example, for a login page, User enters user name in a text box. Then, the value will be sent to a server(in turn will be sent to a servlet ). That value will checked for existence in the database. If the value exists then the password field will be enabled otherwise an alert message will be displayed saying that the user does not exist. This is the simplest form of an Ajax based application.

PROS

• Most viable Rich Internet Application technology so far
• Tremendous industry momentum
• Several toolkits and frameworks are emerging. Ex: SPRY, DWR, Thinwire-Open source Ajax-RIA framework, Taconite-Ajax framework, Buffalo Ajax framework,Salto, Tigermouse-Ajax framework for php, Zaxas etc. 
• No need to download code & no plug-in required
• Easy to learn

CONS

• Still browser incompatibility
• JavaScript is hard to maintain and debug

Usage cases of Ajax

• Real-time server-side input form data validation
• Removes the need to have validation logic at both client side for user responsiveness and at server side for security and other reasons. 
• Auto-Completion: Email address, name, or city name may be auto-completed as the user types
• Master detail operation: Based on a user selection, more detailed information can be  fetched and displayed
• Advanced GUI widgets and controls: Controls such as tree controls, menus, and progress bars may be provided that do not require page refreshes
• Refreshing data: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data.

Real life examples of AJAX applications

• Google maps - http://maps.google.com/
• NetFlix - http://www.netflix.com/BrowseSelection?lnkctr=nmhbs
• Gmail - http://gmail.com/
• Yahoo maps - http://maps.yahoo.com/