AJAX

Traditional Model

Limitations of Classic Web Applications Here the browser itself is responsible for initiating requests to the web server. The server does some processing like Retrieving data or Calculations and returns another HTML page containing the results.

Disadvantages User experience is not very good. User has to wait while the server is doing its process. This is repeated for each transaction between the user and the server.

AJAX Asyncronous Javascript and XML

AJAX Web Application Model

How AJAX is Different AJAX is an approach to web interaction. This approach involves transmitting small amount of information to and from the server. It gives the user the most responsive experience.

Ajax model provides an intermediate layer to handle communication or requests from the browser to the server. This intermediate layer is called the Ajax engine. The Ajax engine is just a JavaScript object or function that is called whenever a request is made to the server.

In traditional model each link makes a call to the server independently. In Ajax each link in the page makes a call to the Ajax Engine which schedules and executes the request.

The response from the server is received by the Ajax engine. The output is parsed by the Ajax engine and updated on the user interface. The data can be plain text, XML, JSON or any other data format.

The request is done asynchronously. That is the client will not wait for the response from the server to continue its process. Since this process involves transferring less information, the user interface updates are faster.

AJAX Principles Key principles of a good Ajax application Minimal traffic: Ajax application should send and receive as little information to and from the server to minimize the traffic between the client and the server.

No surprises: Whatever user interaction you choose, be consistent, so the user knows what to do next. Like drag and drop, double clicking, etc,.

Established conventions: Don’t waste time inventing new user interface models, that the user will be unfamiliar with. Use traditional web application and desktop application models, so that it is easy for the user to learn and work.

No distractions: Avoid unnecessary and distracting page elements such as looping animations, blinking page sections. This leads to distraction from what the user really wants to do.

Accessibility: Consider which users will be accessing your Ajax application the most. Make sure you know before hand who your users will be and plan for old and new browsers or any other software used by your users.

Avoid entire page downloads: All server communication should be done using the Ajax engine. Don’t spoil the user experience by downloading small amounts of data in one place and entire page downloads in another.

User first: Design the Ajax application with its users in mind. See to it that the required functionalities work properly. Don’t give importance to providing cool effects.

Mainly it should be Useful Usable and Efficient.

Technologies Behind AJAX Client Side HTML / XHTML CSS - privides stylistic format to XHTML DOM – Dynamic updating of loaded page XML – Data exchange format

XSLT – Transforms XML to XHTML XMLHTTP – Primary communication broker JavaScript – Scripting language to program Ajax Engine

Server Side: Java .Net PHP Ruby, etc,.

Who is Using AJAX: Google Suggest Gmail Gogle Maps Flikr Facebook - Yahoo News

Ajax Communication Techniques The Hidden Frame Technique Here we create a frameset that is used for client-server communication. One frame in the frameset will be hidden. You can hide a frame by setting its width or height to 0 pixels to remove it from the display.

The Hidden Frame Technique Pattern

Hidden frame technique follows the four step pattern. There is a visible frame and a hidden frame User interacts with the visible frame. When user performs some action on the visible frame requesting data from the server, a JavaScript function is called from the hidden frame.

Step 2: Inside the JavaScript function in the hidden frame we make a request to the server.

Step 3: Server processes the request from the hidden frame. A response is sent from the server to the hidden frame. This response is another web page.

The returned web page contains - data requested - and JavaScript onload event handler to transfer data to the visible frame.

Step 4: The onload event handler in the returned web page calls a function in the visible frame and gives the data to the function. The function in the visible frame can do whatever with the data or display the data.

Hidden Frame Get Request Implementation

Hidden Frame Post Request POST request is sent when data needs to be sent to the server. Some browsers can handle only 512 KB of query string information through GET request. GET can send more if browser supports.

POST can send up to 2 GB of information. Usually we send POST request using a Form wit action attribute. A form submission’s output usually will be a new URL /page which is not desired.

So you say that the output of the form submission should be the hidden frame. This is done using the target attribute of the form. Hidden Frame Post Request Implementation

Hidden Iframe Technique Iframes can be used as hidden frames and used to send requests to the server. Iframe is the same as frame. But it can be placed in a non-frameset HTML page.

So Iframe can be placed in any part of the HTML page. Any number of Iframes can be created in an HTML page. An Iframe can also be created dynamically using javascript .

Two ways of creating IFrames Embed the iframe inside the HTML page using <iframe> tag. Dynamically create the iframe using javascript.

I Method : Embedding Iframe In the first method we will use the iframe by embedding it using <iframe> tag. Here we use GET method. Example

II Method : Dynamic Iframe In the second method we dynamically create the iframe using a javascript. Here we use GET method. Example

Advantages and Disadvantages of Hidden Frames This technique has been in use for many years. It is still used in many Ajax applications.

Advantages: You can maintain browser history. So users can still use the back and forward buttons of the browser. Since main page does not change, the back and forward buttons browse through the history.

Disadvantages: We have very little info about what happens behind the scenes. You just hope that the proper page is returned when you press the forward and back button. If the hidden page fails to load, the user does not come to know of the failure.