1. AJAX

2. Traditional Model

3. 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.

4. 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.

5. AJAX Asyncronous Javascript and XML

6. AJAX Web Application Model

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

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

14. 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.

15. 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.

16. 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.

17. 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.

18. 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.

19. Mainly it should be
Useful
Usable and
Efficient.

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

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

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

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

24. 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.

25. The Hidden Frame Technique Pattern

26. 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.

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

28. 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.

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

30. 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.

31. Hidden Frame Get Request Implementation

32. 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.

33. 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.

34. 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

35. 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.

36. 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 .

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

38. 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

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

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

41. 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.

42. 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.