An AJAX Caching Strategy
Print. Print Add to Project. Add to Project
Bookmark with del.icio.us
An AJAX Caching Strategy
by Bruce Perry
May 03, 2006
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.
Avoiding Willy-Nilly
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.
Energy Prices
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.
Figure 1-1
Figure 1-1. Web page doodads fetch energy prices. (Click image for full-size screen shot.)
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
There are always a number of viable solutions to such a problem or requirement. The one I chose was to create an object, using the Prototype open source JavaScript library, that keeps track of when a price was last updated by an HTTP request. The object has a property that represents a range, say 24 hours. If the price was fetched less than 24 hours ago, then the object prevents a new request from being initiated and keeps the displayed price the same.
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.
Bookmark with del.icio.us
An AJAX Caching Strategy
by Bruce Perry
May 03, 2006
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.
Avoiding Willy-Nilly
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.
Energy Prices
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.
Figure 1-1
Figure 1-1. Web page doodads fetch energy prices. (Click image for full-size screen shot.)
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
There are always a number of viable solutions to such a problem or requirement. The one I chose was to create an object, using the Prototype open source JavaScript library, that keeps track of when a price was last updated by an HTTP request. The object has a property that represents a range, say 24 hours. If the price was fetched less than 24 hours ago, then the object prevents a new request from being initiated and keeps the displayed price the same.
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.
<< Home