Examples: Custom Cache

Custom Cache Explorer

Front End
Back End

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 6 : Networking Considerations - Custom Caching Explorer</title>
<link rel="stylesheet" href="https://ajaxref.com/ch6/global.css" type="text/css" media="screen" />

<script src="https://ajaxref.com/ch6/ajaxtcr.js" type="text/javascript">

</script>

<script type="text/javascript">

 
 
function sendRequest(form)
{
    var cachesize = form.cachesize.options[form.cachesize.selectedIndex].value;
    var algorithm = form.algorithm.options[form.algorithm.selectedIndex].value;
    var expire = form.expire.options[form.expire.selectedIndex].value;    
    
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "";
    
    var url = "https://ajaxref.com/ch6/hello.php" ;
    var payload = "name=" + form.nametext.value;
    
    var options = { method: "GET",
                    payload: payload,
                    onSuccess : handleResponse,
                    cacheResponse : true
                     };
    
    AjaxTCR.comm.cache.setOptions({size:cachesize, algorithm:algorithm, expires:expire});
    AjaxTCR.comm.sendRequest(url,options);
}
 
function handleResponse(response)
{
    var message;
    if (response.fromCache)
        message = "From Cache";
    else
        message = "From Server";
        
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML += "<h3>Response - " + message + "</h3><div id='output'>&nbsp;&nbsp;" + response.xhr.responseText + "</div><br />";
    responseOutput.innerHTML +="<h3>Local Ajax Request Cache</h3><div id='output'>" + printFullCache() + "</div>";
    
    if (response.nextMethod)
        response.nextMethod();
}
 
function printFullCache()
{
    var browserCache = AjaxTCR.comm.cache.getAll();
    var returnString = "<table width='98%' align='center'><tbody><tr class='row'><th>Key</th><th>Value</th><th>Last Accessed</th><th>Total Times Accessed</th></tr>";
    
    for (var i=0;i<browserCache.length;i++)
    {
        returnString += "<tr class='row'><td width='15%'>" + browserCache[i].key + "</td>";
        returnString += "<td width='35%'>" + browserCache[i].value + "</td>"; 
        returnString += "<td width='30%'>" + browserCache[i].lastAccessed.toString() + "</td>";
        returnString += "<td width='20%'>" + browserCache[i].totalAccessed + "</td></tr>";
    }
    
    returnString += "<tr class='footerRow'><td colspan='4'><h3 align='right'>Cache Size: " + browserCache.length + "</h3></td></tr>";
    returnString += "</tbody></table><br />";
    return returnString;
}
 
function autoRunRequests()
{
    var url = "https://ajaxref.com/ch6/hello.php" ;
    
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "<h1>Sending out 6 requests using First In/First Out</h1><hr />";
    
    AjaxTCR.comm.cache.setOptions({size:3, algorithm:"FIFO", expires:"none"});
    
    for (var i=0;i<6;i++)
    {
        var rand = Math.ceil(Math.random()*5);
        var options = { method: "GET",
                    payload: "name=value" + rand,
                    onSuccess : handleResponse,
                    cacheResponse : true
                     };
                   
        if (i==5)
            options.nextMethod = autoRunLFU;
            
        AjaxTCR.comm.queue.add(url, options);
    }
}
 
function autoRunLFU()
{    
    var url = "https://ajaxref.com/ch6/hello.php" ;
    
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML += "<br /><br /><h1>Sending out 6 requests using Least Frequently Used</h1><hr />";
    
    AjaxTCR.comm.cache.setOptions({size:3, algorithm:"LFU", expires:"none"});
    
    for (var i=0;i<6;i++)
    {
        var rand = Math.ceil(Math.random()*5);
        var options = { method: "GET",
                    payload: "name=value" + rand,
                    onSuccess : handleResponse,
                    cacheResponse : true
                     };
                   
        if (i==5)
            options.nextMethod = autoRunLRU;
            
        AjaxTCR.comm.queue.add(url, options);
    }
}
 
function autoRunLRU()
{    
    var url = "https://ajaxref.com/ch6/hello.php" ;
    
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML += "<br /><br /><h1>Sending out 6 requests using Least Recently Used</h1><hr />";
    
    AjaxTCR.comm.cache.setOptions({size:3, algorithm:"LRU", expires:"none"});
    
    for (var i=0;i<6;i++)
    {
        var rand = Math.ceil(Math.random()*5);
        var options = { method: "GET",
                    payload: "delay=1&name=value" + rand,
                    onSuccess : handleResponse,
                    cacheResponse : true
                     };
                       
        AjaxTCR.comm.queue.add(url, options);
    }
 
}    
 
function clearResults()
{
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "";
}
 
function fullClearCache()
{
    AjaxTCR.comm.cache.clear();
    clearResults();
 
}
 
 
window.onload = function () 
{ 
    
 document.requestForm.requestButton.onclick = function () { sendRequest(this.form); };
 document.requestForm.autoButton.onclick = function(){fullClearCache();autoRunRequests();};
 document.requestForm.clearCache.onclick = fullClearCache;
 document.requestForm.clearResults.onclick = clearResults;
};

</script>

 
</head>
<body>
<div class="content">
<h1>Custom Cache Explorer</h1>
<form action="#" name="requestForm">
<fieldset>
 
<table width="100%">
<tr class="row">
    <td width="125">Enter your name:</td>    
    <td><input type="text" id="nametext" /></td> 
</tr>
<tr class="row">
<td>Max Cache Size:</td>
<td>
  <select name="cachesize">
      <option value="3">3</option>
    <option value="5">5</option>
    <option value="10">10</option>
   </select>
</td>
</tr>
 
<tr class="row">
<td>Algorithm: </td>
<td><select name="algorithm">
    <option value="FIFO">First In First Out</option>
    <option value="LFU">Least Frequently Used</option>
    <option value="LRU">Least Recently Used</option>
</select></td>
</tr>
 
<tr class="row">
<td>Expire Stale Data: </td>
<td><select name="expire">
    <option value="-1">None</option>
    <option value="1">1 minute</option>
    <option value="5">5 minutes</option>
    <option value="10">10 minutes</option>
</select></td>
</tr>
 
</table>
</fieldset>
  
<br />
  <input type="button" name="requestButton" value="Send Request" />
  &nbsp;<input type="button" name="autoButton" value="Autorun" />
  &nbsp;<input type="button" name="clearCache" value="Clear Cache" />
  &nbsp;<input type="button" name="clearResults" value="Clear Results" />
</form>
<br />
</div>
<div id="response" class="results">
    <div id="responseOutput">&nbsp;</div>
</div>
 
</body>
</html>

Enter your name:
Max Cache Size:
Algorithm:
Expire Stale Data: