7/30/2019 AJAX Patterns Web20

1/15

AJAX Patterns

Web 2.0 and Rich Internet Applications

7/30/2019 AJAX Patterns Web20

2/15

AJAX Patterns

Only Algorithms ( No Examples !)

Predictive Fetch

Submission Throttling Periodic Refresh

Multistage Download

Fall back Patterns

7/30/2019 AJAX Patterns Web20

3/15

Design Patterns

Describe programming techniques to solvecommon problems.

Design patterns are not standards to be followed,merely designs of solutions that have workedpreviously.

Collective Wisdom

Design patterns cut development time.

Many problems we face everyday may alreadyhave been solved by someone else.

That is where design patterns are useful.

7/30/2019 AJAX Patterns Web20

4/15

Design Patterns

In software engineering, a design pattern is a generalrepeatable solution to a commonly occurring problem insoftware design.

A design pattern is not a finished design that can be

transformed directly into code. It is a description or template for how to solve a problem tcan be used in many different situations.

Object-oriented design patterns typically show relationshipand interactions between classes or objects, without

specifying the final application classes or objects that areinvolved.

Algorithms are not thought of as design patterns, since thesolve computational problems rather than design problem

Design patterns are for avoiding Reinventing Wheels

7/30/2019 AJAX Patterns Web20

5/15

AJAX Patterns

Ajax has been around since 2005.

Communication Patterns:

Hidden Frame techniques

Aynchronous XMLHttp calls

7/30/2019 AJAX Patterns Web20

6/15

Predictive Fetch

Predicting what the user will do next

Fetch on Demand

Predictive Fetch pattern is relatively simple idea,

somewhat difficult to implement. Ajax application guesses what the user is going

to do next and retrieves the appropriate data.

Determining future user action is just guessinggame depending on his intentions.

7/30/2019 AJAX Patterns Web20

7/15

Predictive Fetch

Suppose the user is reading an online article that isseparated into 3 pages.

It is logical to assume that if the user is interested inreading the first page, sure he/she will also beinterested in second and third page.

So if the first page has been loaded for few

seconds, it is probably safe to download the secondpage in the background.

This can be easily determined by using a timeout.

7/30/2019 AJAX Patterns Web20

8/15

Submission Throttling

Sending data to the server issue

In traditional web application, each clik makes a request back to theserver.

In the Ajax model, the user interacts with the site or application withoutadditional requests being generated for each clik.

In traditional web application, data is sent to the server every time a user

action occurs. Thus when the user types a letter, that letter is sent to theserver immediately.

The process is repeated for each letter typed.

The Submission Throttling, design pattern is an alternative approach.

Using submission throttling, you buffer the data to be sent to the server onthe client and send the data at predetermined times.

Example: Google Suggest

7/30/2019 AJAX Patterns Web20

9/15

Submission ThrottlingCollect data

Send data

Done

Is the user

idle?

Is it time to

send data ?

Contine

Collecting

Data

NO

NO

Yes

Yes

NO

Yes

7/30/2019 AJAX Patterns Web20

10/15

Submission Throttling

Incremental Form Validation

OnChange

ValidateField

Incremental Field Validation

7/30/2019 AJAX Patterns Web20

11/15

Periodic Refresh

This pattern describes the processofchecking for new server information inspecific Intervals.

This approach is also called as polling

The pattern is used in updating the sportsscore. Online scoreboards are updated

online. Gmail uses periodic refresh to notify users

when new email has been received.

7/30/2019 AJAX Patterns Web20

12/15

Multi-Stage Download

Web designers are loading their pages with multimedia, pictures,graphics, content etc. While this gives more information, also leadsto slower download times as everything is loaded in seeminglyrandom order.

Multi-stage download is an ajax pattern wherin only the most basic

functionality is loaded into a page initially. Upon completion, the page then begins to download othercomponentson the page.

If the user stays on the page for extended period of time, the extrafunctionality is loaded in the background and available when theuser is ready.

The major advantage here is that you, as the developer, get todecide what is downloaded and at what point in time.

Example Start.com from Nicrosoft.

Graceful degradation in case the browser dont support Ajax.

7/30/2019 AJAX Patterns Web20

13/15

Fallback Patterns

If there is an error on the server?

Or the request never makes it to the server? Ajax applications plan ahead for these

problems and describe how your application

should work if one these should occur.

Cancel Pending request ( status other than 200)

Try Again

7/30/2019 AJAX Patterns Web20

14/15

Fallback Patterns

Whatever can go wrong will go wrong,

and at the worst possible time, in theworst possible wayMurphy law.

7/30/2019 AJAX Patterns Web20

15/15

AJAX Patterns

Even though the term Ajax has been aroundonly since early 2005, the techniques that

Ajax describes have been used since the

late 1990s, giving rise to several Ajaxpatterns that solve specific problems.

Hidden Frame technique and AsynchronousXMLHttp calls are Communication

Patterns between client and server usingJavaScript.