You are on page 1of 15

AJAX Patterns

Web 2.0 and Rich Internet Applications

AJAX Patterns • • • • • • Only Algorithms ( No Examples !) Predictive Fetch Submission Throttling Periodic Refresh Multistage Download Fall back Patterns .

merely designs of solutions that have worked previously.Design Patterns • Describe programming techniques to solve common problems. • Design patterns are not standards to be followed. • Many problems we face everyday may already have been solved by someone else. • That is where design patterns are useful. • Collective Wisdom • Design patterns cut development time. .

Design Patterns • In software engineering. • Algorithms are not thought of as design patterns. without specifying the final application classes or objects that are involved. a design pattern is a general repeatable solution to a commonly occurring problem in software design. • It is a description or template for how to solve a problem th can be used in many different situations. since the solve computational problems rather than design problems • Design patterns are for avoiding “Reinventing Wheels” . • A design pattern is not a finished design that can be transformed directly into code. • Object-oriented design patterns typically show relationships and interactions between classes or objects.

• Communication Patterns: – Hidden Frame techniques – Aynchronous XMLHttp calls .AJAX Patterns • Ajax has been around since 2005.

. somewhat difficult to implement.Predictive Fetch • Predicting what the user will do next • Fetch on Demand • Predictive Fetch pattern is relatively simple idea. • Ajax application guesses what the user is going to do next and retrieves the appropriate data. • Determining future user action is just guessing game depending on his intentions.

• It is logical to assume that if the user is interested in reading the first page. . • This can be easily determined by using a timeout.Predictive Fetch • Suppose the user is reading an online article that is separated into 3 pages. it is probably safe to download the second page in the background. • So if the first page has been loaded for few seconds. sure he/she will also be interested in second and third page.

that letter is sent to the server immediately.Submission Throttling • Sending data to the server issue • In traditional web application. • In the Ajax model. Thus when the user types a letter. the user interacts with the site or application without additional requests being generated for each clik. data is sent to the server every time a user action occurs. • Using submission throttling. • Example: Google Suggest . design pattern is an alternative approach. each clik makes a request back to the server. • In traditional web application. • The Submission Throttling. you buffer the data to be sent to the server on the client and send the data at predetermined times. • The process is repeated for each letter typed.

Submission Throttling Collect data Is the user idle? NO Yes Is it time to send data ? NO Yes Send data Yes Contine Collecting Data NO Done .

Submission Throttling • Incremental Form Validation • OnChange • ValidateField – Incremental Field Validation .

Periodic Refresh • This pattern describes the processof checking for new server information in specific Intervals. • This approach is also called as polling • The pattern is used in updating the sports score. . • Gmail uses periodic refresh to notify users when new email has been received. Online scoreboards are updated online.

as the developer. • The major advantage here is that you. graphics. • Example Start.com from Nicrosoft. While this gives more information. . • Upon completion. get to decide what is downloaded and at what point in time. • If the user stays on the page for extended period of time. also leads to slower download times as everything is loaded in seemingly random order. • Multi-stage download is an ajax pattern wherin only the most basic functionality is loaded into a page initially.Multi-Stage Download • Web designers are loading their pages with multimedia. pictures. the extra functionality is loaded in the background and available when the user is ready. • Graceful degradation in case the browser don’t support Ajax. the page then begins to download other componentson the page. content etc.

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 .

.Fallback Patterns • Whatever can go wrong will go wrong. in the worst possible way – Murphy’ law. and at the worst possible time.

• Hidden Frame technique and Asynchronous XMLHttp calls are Communication Patterns between client and server using JavaScript. the techniques that Ajax describes have been used since the late 1990s.AJAX Patterns • Even though the term Ajax has been around only since early 2005. . giving rise to several Ajax patterns that solve specific problems.