Submission Throttling and the Browser-Server Dialogue

Google Suggest

Google Suggest (http://www.google.com/webhp?complete=1) features Suggestions, so when you type "A," the browser pops up a list of popular searches beginning with "A." To prevent against excessive queries, Google Suggest (http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html) uses Submission Throttling.

Zuggest

Zuggest (http://www.francisshanahan.com/zuggest.aspx) is a Live Search (Chapter 14) showing Amazon results as you type (Figure 10-5). So type "Ab" and you'll get results like "Basic Ab Workout for Dummies" and" Absolutely Fabulous." The results are images as well as text, so it would be expensive to search for something you weren't interested in. So, if you're searching for "Absolutely," it's best to avoid searching for "Ab" and "Abso" and "Absolut" along the way, which is the kind of thing the Google Suggest algorithm would do.

To ensure searches are relevant, Zuggest applies a delay while typing. The assumption is that you'll be typing at a rate of at least one character per second. Any time you hit a key, you'll see a "Waiting until you're done ... "message, and you'll have a second to hit another key. If no key is pressed, the application assumes you were looking for the current term, and performs a remote call.

As explained in the Fat Client pattern, the wiki demo (http://ajaxify.com/run/wiki) throttles in a similar manner.

Gmail

Gmail (http://gmail.com/) has an auto-save feature that periodically uploads a message being composed.

Figure 1-5.  Zuggest

Prototype framework

Prototype (http://prototype.conio.net/) offers a reusable component, TimedObserver, which performs Submission Throttling. ListSomething (http://listsomething.com/), a search engine for classified ads, utilizes TimedObserver for its Live Search.

Code Example: AjaxPatterns Assistive Search

The Assistive Search demo (http://ajaxify.com/run/assistiveSearch) throttles in a similar manner to Google Suggest and other Ajax search apps.

requestValidCategoriesLoop runs repeatedly; the precise interval (in milliseconds) is determined by the THROTTLE_PERIOD constant (about 100 milliseconds). The last server query is always stored, and there's nothing to do if the current query remains the same as the previous query. If there has been a change, the new query is submitted to the server:

  function requestValidCategoriesLoop() {
      if (query()!=latestServerQuery) {
        vars = {
          queryType: "getValidCategories",            queryText: escape(query())         }
        ajaxCaller.get("categories.php", vars, onValidCategoriesResponse,                         false, null);         latestServerQuery = query();       }
      setTimeout('requestValidCategoriesLoop();', THROTTLE_PERIOD);
  }

Related Patterns

Periodic Refresh

Periodic Refresh (see earlier) is somewhat the reverse of Submission Throttling: instead of periodically uploading user input, Periodic Refresh periodically downloads server state.

Progress Indicator

A common trend while performing a periodic update is to include a small Progress Indicator (Chapter 14), often as a Popup with a message such as a "Saving."

A common trend while performing a periodic update is to include a small (Chapter 14), often as a with a message such as a Saving.

Metaphor

Science-fiction writers have speculated that interstellar communication would work like this. Because the trip is so great, each imperial command must contain a big load of information--the inter-galactic emperor can't just tell the colonials to "go fetch a kettle" ... (20 light-years later)..."now add some water"....