Examples: Prefetch

Custom Prefetch

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 Prefetch</title>
<link rel="stylesheet" href="https://ajaxref.com/ch6/global.css" type="text/css" media="screen" />

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

</script>

<script type="text/javascript">

 
var gStart = 0;
 
function sendRequest(curstart, isPrefetch)
{
  if (curstart > 500 || curstart < -500) 
        return;
 
  var payload = "start=" + curstart;
    
  var url = "https://ajaxref.com/ch6/customprefetch.php";
  var options = {method : "GET",
               async : true,
               payload: payload,
               isPrefetch : isPrefetch,
               curstart : curstart,
               onSuccess : handleResponse,
               onPrefetch : handlePrefetch,
               cacheResponse : true
               
            };
 
 AjaxTCR.comm.sendRequest(url,options);
}
 
function handlePrefetch(response)
{
 
 
}
 
function handleResponse(response)
{
   var message;
    if (response.fromCache)
        message = "Served From Cache";
    else
        message = "Served From Server";
        
   printResults(response.xhr.responseText, message, response.curstart);
}
 
 
function printResults(responseText, message, curstart)
{
        document.getElementById("cacheStatus").innerHTML = message;
        var min, max;
        min = max = -1000;
        var response = AjaxTCR.data.decodeJSON(responseText);
        var responseOutput = document.getElementById("responseOutput");
        responseOutput.innerHTML = "";
        
        var table = document.createElement("table");
        table.width="75%";
        var tbody = document.createElement("tbody");
        
        var tr = document.createElement("tr");
        tr.className = "row";
        var th = document.createElement("th");
        th.width = "125";
        th.appendChild(document.createTextNode("Number"));
        tr.appendChild(th);
        
        th = document.createElement("th");
        th.appendChild(document.createTextNode("Value"));
        tr.appendChild(th);
        tbody.appendChild(tr);
        
        for (var i=0;i<response.length;i++)
        {
            if (min == -1000)
                min = response[i].number;
                
            tr = document.createElement("tr");
            tr.className = "row";
            var td = document.createElement("td");
            td.appendChild(document.createTextNode(response[i].number));
            tr.appendChild(td);
            
            td = document.createElement("td");
            td.appendChild(document.createTextNode(response[i].value));
            tr.appendChild(td);
            tbody.appendChild(tr);
        }    
        
        max = response[i-1].number;
        table.appendChild(tbody);
        responseOutput.appendChild(table);
        
        gStart = curstart + 25;
        
        sendRequest(gStart, true);
        
}
 
 
 
 
window.onload = function () 
{ 
 sendRequest(gStart, false);
 document.requestForm.requestButtonNext.onclick = function () { sendRequest(gStart, false); };
 document.requestForm.requestButtonPrevious.onclick = function () { sendRequest((gStart-50), false); };
};

</script>

 
</head>
<body>
<div class="content">
<h1>Custom Prefetch</h1>
<form action="#" name="requestForm">
<h3 id="cacheStatus"></h3>
<div class="results" id="responseOutput"></div>
<br />
<input type="button" name="requestButtonPrevious" value="Previous" />
<input type="button" name="requestButtonNext" value="Next" />
</form>
</div>
</body>
</html>