An AJAX Caching Strategy
The ability of AJAX applications to make an HTTP connection behind the scenes to fetch small bits of information is one of the powerful tools that the modern browser APIs come equipped with. For most browsers (e.g., Firefox 1.5, Safari 2.0, Opera 8.5), the engine behind this task is the window object's
XMLHttpRequest (XHR) object. Internet Explorer 5.5-6 has different syntax for this object, such as
XMLHttp, but IE 7 is expected to adopt the same object as the other browsers.
Making HTTP requests willy-nilly from AJAX applications, however, is almost never a good idea or design decision. The server side of the equation may not be able to handle the flood of requests. The client side of the AJAX application may have some of its requests time out or abort, which will disrupt the user experience that is meant to be AJAX's strength.
An application that I introduced in a recent article uses XHR to fetch up-to-date oil, gasoline, and other energy prices. These numbers, which are assembled by the U.S. Energy Information Agency (EIA), are in the public domain. My application harvests or "scrapes" them from the appropriate sites. It would be better to connect with an energy web service (HTML scraping is awkward and brittle), but I have not been able to find an open source, free-of-charge one. I'm open to recommendations!
The EIA web pages suit the application's purpose, which is not after all designed to give oil futures traders up-to-the-second data. The application displays the prices in the browser window when the user loads the web page. Figure 1-1 shows what the left side of the page looks like. The left column holds the energy prices, which highlight when the mouse passes over them.
Each region or
div tag on the page that is devoted to a separate price (e.g., oil) has a Refresh button. This gives the user the option to fetch the latest price. The EIA, however, only updates these prices about once per week. Therefore, it would be wasteful to allow these requests to go through if the user only loaded the web page one hour ago. We know that it is highly probable that the price is exactly the same, so we should leave the currently displayed price alone.
Specify a Time Period for Caching Data
This is an AJAX caching strategy that is designed to periodically refresh data from a server, but only if the client's version of the data has been cached for a specified period. If the application user leaves the page in her browser for more than 24 hours, then clicks a Refresh button, XHR goes out and grabs a new price for display. We want to give the user the ability to refresh the price without reloading the entire application into the browser, yet we also want to cut down on unnecessary requests.