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