AJAX Patterns

1
AJAX Patterns

• Web 2.0 and Rich Internet Applications
• Dr. Suthikshn Kumar

2
AJAX Patterns

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

3
Design Patterns

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

4
Design Patterns

• In software engineering, a design pattern is a
  general repeatable solution to a commonly
  occurring problem in software 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 that can be used in many different
  situations.
• Object-oriented design patterns typically show
  relationships and interactions between classes or
  objects, without specifying the final application
  classes or objects that are involved.
• Algorithms are not thought of as design patterns,
  since they solve computational problems rather
  than design problems.
• Design patterns are for avoiding Reinventing
  Wheels

5
AJAX Patterns

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

6
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 guessing
  game depending on his intentions.

7
Predictive Fetch

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

8
Submission Throttling

• Sending data to the server issue
• In traditional web application, each clik makes a
  request back to the server.
• In the Ajax model, the user interacts with the
  site or application without additional 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 the server 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 on the client and send
  the data at predetermined times.
• Example Google Suggest

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

• Incremental Form Validation
• OnChange
• ValidateField
• Incremental Field Validation

11
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.
  Online scoreboards are updated online.
• Gmail uses periodic refresh to notify users when
  new email has been received.

12
Multi-Stage Download

• Web designers are loading their pages with
  multimedia, pictures, graphics, content etc.
  While this gives more information, 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.
• Upon completion, the page then begins to download
  other componentson the page.
• If the user stays on the page for extended period
  of time, the extra functionality is loaded in the
  background and available when the user is ready.
• The major advantage here is that you, as the
  developer, get to decide what is downloaded and
  at what point in time.
• Example Start.com from Nicrosoft.
• Graceful degradation in case the browser dont
  support Ajax.

13
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

14
Fallback Patterns

• Whatever can go wrong will go wrong, and at the
  worst possible time, in the worst possible way
  Murphy law.

15
AJAX Patterns

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