Building a Client-Side Ajax Cache ...

All of the major browsers utilize some form of cache management to minimize redundant server calls. Since there is a certain amount of disk space allocated towards downloaded Web content, browsers can save time and network bandwidth by checking for the requested resource on the local hard drive before fetching it from the server. It is also a necessary component to the functioning of the back and forward buttons. One of the drawbacks of the growing proportion of dynamic content on the Web has been the corrosion of the gains in performance achieved by browser caching. The situation has only been made worse by the meteoric rise of Ajax, which has put the responsibility of calling server-side components squarely on the shoulders of Web developers. Therefore, we should consider the issue of whether or not to cache some of our data, just like other page content. In this two-part series, we will build a client-side cache management system using the Prototype JavaScript Framework. Prototype will be of benefit for everything from facilitating Ajax calls to the handling of data collections to the displaying of HTML-formatted results on the page. In this installment we will begin by building a couple of fairly basic caches, and explore some techniques for maintaining efficiency as complexity increases. In part two, we will look at some different queuing algorithms to help manage the size and freshness of cached content.

Pros and Cons of Data Caching

Not every page that makes Ajax calls requires a caching mechanism. For example, a page that updates stock ticker information would likely gain very little by caching previous prices, as they may not repeat at all. In contrast, the search page of a Web application could benefit immensely from caching because clients may work with a small collection of data sets all day long. Just as browser scripts are often tailored to the site is functions, so too must caching suit the unique circumstances. The material that we will be covering here will allow you to customize your cache in a way that most closely matches your site is needs. For the purpose of illustration, we will set up a caching mechanism for an employee search page that displays the results within the same page, using Prototype is Ajax.Updater object.

The Test Page

To see our cache at work, we will need to design a search form and an HTML table to display the results. Keeping things simple, our form will contain four fields: "Last Name", "Given Names", "Age", and "Salary":
1 <form id="frmEmployeeSearch" method="post" action="">
2 <div>
3   <p>
4   Last Name: <input type="text" id="txtLastNameInput"></p>
5   <p>
6   First Name: <input type="text" id="txtFirstNameInput"> </p>
7   <p>
8   Age: <input type="text" id="txtAgeInput"></p>
9   <p>
10   Salary: <input type="text" id="txtSalaryInput"></p>
11   <p>
12   <input type="button" id="btnSearch" value="Search"></p>
13 </div>
14 </form>
15 <br>
16 
17 <!-- leave the button outside of the form so that it is not submitted with the form fields -->
18 <div>
19   <input type="button" id="btnSearch" value="Search" name="btnSearch">
20 </div>
 view plain | print | ?
<form id="frmEmployeeSearch" method="post" action=""> <div> <p> Last Name: <input type="text" id="txtLastNameInput"></p> <p> First Name: <input type="text" id="txtFirstNameInput"> </p> <p> Age: <input type="text" id="txtAgeInput"></p> <p> Salary: <input type="text" id="txtSalaryInput"></p> <p> <input type="button" id="btnSearch" value="Search"></p> </div> </form> <br> <!-- leave the button outside of the form so that it is not submitted with the form fields --> <div> <input type="button" id="btnSearch" value="Search" name="btnSearch"> </div>

Below the form, we will create a centered table, containing only the table headers. The contents will be populated every time a search is performed:
1 <h2 align="center">Results</h2>
2 <table width="400" border="1" cellpadding="5" align="center">
3   <tr>
4     <th>Last Name</th>
5     <th>Given Names</th>
6     <th>Age</th>
7     <th>Salary</th>
8   </tr>
9   <tbody id=results>&nbsp;</tbody>
10 </table>
11 <br>
12 <div id="errors" align="center">&nbsp;</div>
 view plain | print | ?
<h2 align="center">Results</h2> <table width="400" border="1" cellpadding="5" align="center"> <tr> <th>Last Name</th> <th>Given Names</th> <th>Age</th> <th>Salary</th> </tr> <tbody id=results>&nbsp;</tbody> </table> <br> <div id="errors" align="center">&nbsp;</div>
The AjaxCache Class

Our first cache will store the data in a Prototype Hash. A hash works like an associative array, but contains many methods to facilitate working with its items.
The window.onload Event

The best time to initialize the cache is when the page has finished loading. Prototype has a mechanism for adding event handlers called Event.observe( Object objectToListenTo, string eventName, function handlerFunction ). We will use an anonymous function because we won need to call it ourselves later. Instead, a listener will be notified when the event fires and execute our function:
1 Event.observe(window, load, function() {
2   var AjaxCache = new function()
3   {
4   };
5   Event.observe( tnSearch, click, searchForEmployee.bind(AjaxCache, frmEmployeeSearch) );
6 });
 view plain | print | ?
Event.observe(window, load, function() { var AjaxCache = new function() { }; Event.observe( tnSearch, click, searchForEmployee.bind(AjaxCache, frmEmployeeSearch) ); });

The above code will create our cache in such a way that there will only be one in operation on the page at any time. Such a class is called a singleton because it can only be instantiated once. We can create a singleton in JavaScript by using the new keyword in front of the function(). You can test it yourself by adding var cacheInstance = new AjaxCache(); after the AjaxCache function is closing parentheses (}("employees1.htm");). You will get an error that the class cannot be created (the actual message will vary by browser). Your page may be complicated enough to warrant more than one cache, so you can define the AjaxCache class without the new keyword and then instantiate each cache object using the var cacheInstance = new AjaxCache(); syntax. Or, better still, you can use Prototype is Class.create() method to instantiate the class. It was not an option here because the create() method does not support singletons at this time. Below the AjaxCache creation, we will add a second call to Event.observe() on the search button is click event to call the searchForEmployee() function. The Prototype Function.bind() method is used to set the searchForEmployee() function is context (the this pointer) to our cache and to pass the form ID.

 Original Source:
http://www.webreference.com/programming/javascript/rg26/index.html