Periodic Refresh AndMulti-Stage Download

Presented By: Eshan Mudwel 1SI10CS031

Periodic Refresh

▪ It is a design pattern

▪ Describes the process of checking for new server information in specific intervals

▪ This approach is also called polling

▪ Used to increase user experience

▪ Notify users of updated information

Polling Mechanism

Requires the browser to keep track of when another request to the server should take place

Real World Examples

▪ ESPN : Update online scoreboards automatically

▪ Gmail : Notify users of the new mail

▪ XHTML Live Chat : Implement a chat room

▪ Magnetic Ajax Demo : Re-creates online the experience of magnetic poetry

▪ White Chat & Lace Chat

▪ JotSpot Live Wiki

▪ Claude Hussnet’s Portal

ESPN: Update Online Scoreboards Automatically

▪ Shows up-to-the-minute scores

▪ Drive charts for every game being played at that time

▪ Uses XHR objects and a little bit of Flash

▪ Page repeatedly updates itself with new information

▪ For example: the IPL Scoreboard

▪ http://www.espncricinfo.com/ci/engine/current/match/scores/live.html

Gmail: Notify Users Of The New Mail

▪ Repeatedly checks the server to see if new mail has arrived

▪ This is done without notification unless there is new mail

▪ The number of new e-mails received is displayed in parentheses next to the Inbox menu item

▪ http://gmail.google.com

XHTML Live Chat: Implements A Chat Room

▪ Chat room text is updated automatically every few seconds

▪ Checks the server for new information

▪ If there is a new message, the page is updated to reflect it

▪ Creates a traditional chat room experience

▪ http://www.plasticshore.com/projects/chat

Magnetic Ajax Demo: Re-creates online the experience of magnetic poetry

▪ Magnetic Poetry: Using single word magnets that can be rearranged to make sentences

▪ Full version polls the server for new arrangements every few seconds

▪ So if you and someone else are rearranging words at the same time, you will see the movement

▪ http://www.broken-notebook.com/magnetic

New Comment Notifier Example

It alerts the user when a new comment has been added

Multi-Stage Download

▪ The problem : speed at which pages download

▪ 56 Kbps modems: web designers were much aware of how much their pages “weighed”

▪ Residential broadband Internet solutions : many sites have upgraded, including multimedia, more pictures, and more content

▪ Advantage of this approach: gives the user more information

▪ Disadvantage of this approach: leads to slower download times

▪ The solution: Multi Stage Download-Ajax Pattern

Multi-Stage Download

▪ The most basic functionality is loaded into a page initially

▪ The page then begins to download other components that should appear on the page

▪ User leaves the page before all the components are downloaded: No consequence

▪ User stays on the page for an extended period of time: Extra functionality is loaded in the background

▪ Advantage: You, as the developer, get to decide what is downloaded and at what point in time

Multi-Stage Download

▪ Popularized by Microsoft’s start.com

▪ When you first visit start.com, it is a very simple page with a search box in the middle

▪ A series of requests is being fired off to fill in more content on the page

▪ Within a few seconds, the page jumps to life as content from several different locations is pulled in and displayed

Multi-Stage Download

▪ Downside: The page must work in its simplest form for browsers that don’t support Ajax technologies

▪ The basic functionality must work without any additional downloads

▪ Solution : Graceful degradation

▪ Graceful degradation: Those browsers that support Ajax technologies :extensive interface ,other browsers :simple, bare-bones interface

▪ Important if you are expecting search engines to crawl your site

Additional Information Links Example

The article text is the main content on the page, so it should be downloaded when the page is initially loaded. The additional links aren’t as important, so they can be loaded later.