Patterns - Ajax Patterns


From Ajax Patterns


Programming Patterns (25)

Web Services

  • RESTful Service Expose web services according to RESTful principles.
  • RPC Service Deepak Expose web services as Remote Procedural Calls (RPCs).
  • Ajax Stub Use an "Ajax Stub" framework which allows browser scripts to directly invoke server-side operations, without having to worry about the details of XMLHttpRequest and HTTP transfer.
  • HTML Message Have the server generate HTML snippets to be displayed in the browser.
  • Plain-Text Message Pass simple messages between server and browser in plain-text format.
  • XML Message Pass messages between server and browser in XML format.
  • JSON Message Pass messages between server and browser in Javascript Object Notation (JSON) format.
  • UED Format Send message from the browser to the server using the UED Data exchange format.

Browser-Server Dialogue

  • Call Tracking Accommodate busy user behaviour by allocating a new XMLHttpRequest object for each request. See Richard Schwartz's blog entry Note: Pending some rewrite to take into account request-locking etc.
  • Periodic Refresh The browser refreshes volatile information by periodically polling the server.
  • Submission Throttling Instead of submitting upon each Javascript event, retain the data in a local buffer and upload it periodically.
  • Explicit Submission Instead of submitting upon each Javascript event, require the user to explicitly request it.
  • Distributed Events Keep objects synchronised with an event mechanism.
  • Cross-Domain Proxy Allow the browser to communicate with other domains by server-based mediation.
  • Flash-enabled XHR A client-side proxy pattern for cross-domain Ajax, using invisible flash to bridge the domain communication gap.

DOM Population

Performance Optimization

  • Fat Client Create a rich, browser-based, client by performing remote calls only when there is no way to achieve the same effect in the browser.
  • Object Persistence Persisting JavaScript objects into a server or local persistent storage area
  • Browser-Side Cache Maintain a local cache of information.
  • Guesstimate Instead of grabbing real data from the server, make a guesstimate that's good enough for most user's needs.
  • Multi-Stage Download Quickly download the page structure with a standard request, then populate it with further requests.
  • Predictive Fetch Anticipate likely user actions and pre-load the required data.
  • Pattern Fetch kadek devi - kata kata indah
  • Pseudo-Threading Use a timer and a worker queue to process jobs without the blocking application flow.
  • Code Compression Compress code on the server, preferably not on the fly.
  • On-Demand Javascript Downloads Javascript as and when required, instead of downloading it all on page load.

Code Generation and Reuse

Functionality and Usability Patterns (28)

All of these widget patterns will be familiar to end-users, having been available in desktop GUIs and some in non-AJAX DHTML too. They are included here to catalogue the interaction styles that are becoming common in AJAX applications and can benefit from XMLHttpRequest-driven interaction.

Content Widgets

  • Drilldown To let the user locate an item within a hierarchy, provide a dynamic drilldown.
  • Microcontent Compose the page of "Microcontent" blocks - small chunks of content that can be edited in-page.
  • Microlink Provide Microlinks that open up new content on the existing page rather than loading a new page.
  • Popup Support quick tasks and lookups with transient Popups, blocks of content that appear "in front of" the standard content.
  • Portlet Introduce "Portlets" - isolated blocks of content with independent conversational state.

Form Widgets

  • Live Command-Line In command-line interfaces, monitor the command being composed and dynamically modifying the interface to support the interaction.
  • Live Form Validate and modify a form throughout the entire interaction, instead of waiting for an explicit submission.
  • Live Search As the user refines their search query, continuously show all valid results.
  • Data Grid Report on some data in a rich table, and support common querying functions.
  • Progress Indicator Hint that processing is occurring.
  • Rich Text Editor
  • Slider Provide a Slider to let the user choose a value within a range.
  • Suggestion Suggest words or phrases which are likely to complete what the user's typing.

Page Architecture

  • Drag-And-Drop Provide a drag-and-drop mechanism to let users directly rearrange elements around the page.
  • Sprite Augment the display with "sprites": small, flexible, blocks of content.
  • Status Area Include a read-only status area to report on current and past activity.
  • Virtual Workspace Provide a browser-side view into a server-side workspace, allowing users to navigate the entire workspace as if it were held locally.

Visual Effects

  • Highlight Highlight elements by rendering them in a consistent, attention-grabbing, format.


  • Lazy Registration Accumulate bits of information about the user as they interact, with formal registration occurring later on.
  • Direct Login Authenticate the user with an XMLHttpRequest Call instead of form-based submission, hashing in the browser for improved security.
  • Host-Proof Hosting Server-side data is stored in encrypted form for increased security, with the browser decrypting it on the fly.
  • Timeout Implement a timeout mechanism to track which clients are currently active.
  • Heartbeat Have the browser periodically upload heartbeat messages to indicate the application is still loaded in the browser and the user is still active.
  • Autosave Autosave un-validated forms to a staging table on the server to avoid users losing their work when their session expires if they get called away from their desk while filling out a long form.
  • Unique URLs Use a URL-based scheme or write distinct URLs whenever the input will cause a fresh new browser state, one that does not depend on previous interaction.

Development Practices (8)