Examples: Native Queue

Native Request Queue 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 - Native Queue</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 handleResponse(response)
{
    response.statusDiv.innerHTML = "Request #" + response.requestID + " - Received";        
}
 
function handleTimeout(response)
{
    response.statusDiv.innerHTML = "Request #" + response.requestID + " - Timed Out";        
}
 
function setValues(form)
{
    var url =  "https://ajaxref.com/ch6/timeoutexplorer.php";
 
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "";
    
    var timeout = form.timeout.checked;
    for (var i=1;i<=10;i++)
    {
        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};
        
        if (timeout)
            options.timeout = 3000;
                       
        //send request
        var request = AjaxTCR.comm.sendRequest(url, options);
        
        var div = document.createElement("div");
        div.id = "fullstatus" + i;
        
        var statusdiv = document.createElement("div");
        statusdiv.id = "status" + i;
        statusdiv.className = "status";
        div.appendChild(statusdiv);
        request.statusDiv = statusdiv;
        request.statusDiv.innerHTML = "Request #" + request.requestID + " - Sent";
        responseOutput.appendChild(div);    
    }        
}
 
 
window.onload = function () 
{ 
 document.requestForm.requestButton.onclick = function () { setValues(this.form); };
};

</script>

 
</head>
<body>
<div id="mainpage">
<div class="content">
<h1>Native Request Queue Explorer</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="100px">Set Timeout: </td><td><input type="checkbox" name="timeout" /></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
Set Timeout: