Examples: Request Queue

Simple Request Queue

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

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

</script>

<script type="text/javascript">

 
 
 
function handleResponse(response)
{
    response.statusDiv.innerHTML = "Request #" + response.userID + " - Received";        
}
 
function handleTimeout(response)
{
    response.statusDiv.innerHTML = "Request #" + response.userID + " - Timed Out";        
}
 
function setValues(form)
{
    var url =  "http://ajaxref.com/ch6/timeoutexplorer.php";
 
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "";
    
    var requestQueue = form.requestqueue.checked;
    AjaxTCR.comm.queue.requestQueueConcurrentRequests = 2;
    for (var i=1;i<=10;i++)
    {
        var div = document.createElement("div");
        div.id = "fullstatus" + i;
        
        var statusdiv = document.createElement("div");
        statusdiv.id = "status" + i;
        statusdiv.className = "status";
        div.appendChild(statusdiv);
        statusdiv.innerHTML = "Request #" + i+ " - Sent";
        
        var payload = "delay=0";
        if (i==1)
            payload = "delay=5";
        else if (i==2)
            payload = "delay=7";
        
        var options = {payload : payload,
                       onTimeout : handleTimeout,
                       onSuccess : handleResponse,
                       timeout: 3000,
                       userID: i,
                       statusDiv: statusdiv};
        
        //send request
        if (requestQueue)
            AjaxTCR.comm.queue.add(url, options);
        else
            AjaxTCR.comm.sendRequest(url, options);
        
        
        responseOutput.appendChild(div);    
    }        
}
 
 
window.onload = function () 
{ 
 document.requestForm.requestButton.onclick = function () { setValues(this.form); };
};

</script>

 
</head>
<body>
<div id="mainpage">
<div class="content">
<h1>Simple Request Queue </h1>
<form action="#" name="requestForm">
<fieldset>
<table width="100%">
<tr class="row">
<td colspan="2">In the example 10 requests will be sent.  
<ul>
    <li>Request #1 : 5 second response delay</li>
    <li>Request #2 : 7 second response delay</li>
    <li>Request #3 - 10 : no added delay</li>
</ul>
</td>
</tr>
<tr class="row">
<td width="130px">Use Request Queue: </td><td><input type="checkbox" name="requestqueue" /></td>
</tr>
</table>
</fieldset>
 
 
<br />
  <input type="button" name="requestButton" value="Send Requests" />
</form>
<br />
</div></div>
 
<div id="responseOutput" class="response"></div>
 
</body>
</html>

In the example 10 requests will be sent. Request #1 : 5 second response delay Request #2 : 7 second response delay Request #3 - 10 : no added delay
Use Request Queue: