Examples: Request Queue Explorer

Request Queue Explorer

Queue

ID	Priority

Processing

ID	Priority	Status

Completed

ID	Priority

Front End
Back End

view plain print

<!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 - Request Queue Explorer</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 showResponse(response)
{
  var processing = document.getElementById("statusTbodyProcessing");
  if (response.createTr)
      processing.removeChild(response.createTr);
 
  printRow(response.requestQueueID, response.priority, "statusTbodyComplete");
}
 
function showError(request)
{
  request.statusdiv.innerHTML = "Timed Out";
}
 
function showCreate(request)
{
  updateQueueTable();
  request.createTr = printRow(request.requestQueueID, request.priority, "statusTbodyProcessing");
  var td = document.createElement("td");
  //td.align = "top";
  td.valign = "top";
  td.appendChild(document.createTextNode("Sent"));
  request.createTr.appendChild(td);
  request.statusTd = td;
}
 
function showProgress(request)
{
    if (request.statusTd)
        request.statusTd.innerHTML = "Sent (" + request.timespent + ")";
 
}
 
    
function sendRequests(form)
{
  
  /* set the destination */
  var url =  "http://ajaxref.com/ch6/timeoutexplorer.php";
    
  var numberRequests = form.requests.options[form.requests.selectedIndex].text;
  var concurrentRequests = form.concurrentrequests.options[form.concurrentrequests.selectedIndex].text;
  
  AjaxTCR.comm.queue.requestQueueConcurrentRequests = concurrentRequests;
  for (var i=1;i<=numberRequests;i++)
     addRequest(form, "normal");
            
}
 
function addRequest(form, priority)
{
   /* set the destination */
   var url =  "http://ajaxref.com/ch6/timeoutexplorer.php";
    
   var options = { method: "GET",
          onSuccess : showResponse,
        onCreate : showCreate,
        showProgress : true,
        onProgress : showProgress
      };
    
      
    /* make the request */
    AjaxTCR.comm.queue.add(url,options,priority);
    updateQueueTable();
    
                
}
 
function removeRequest(form)
{
    var ID = form.requestID.value;
    AjaxTCR.comm.queue.remove(ID);
      updateQueueTable();
}
 
function updateQueueTable()
{
    var requestQueue = AjaxTCR.comm.queue.getAll();
    clearTable("statusTbodyQueue");
    
    for (var i=0;i<requestQueue.length;i++)
        printRow(requestQueue[i].options.requestQueueID, requestQueue[i].options.priority, "statusTbodyQueue");
}
 
function clearTable(table)
{
    var tbody = document.getElementById(table);
    for (var i=tbody.childNodes.length-1;i>0;i--)
    {
        if (!tbody.childNodes[i].id || tbody.childNodes[i].id.indexOf("header") == -1) 
            tbody.removeChild(tbody.childNodes[i]);
    }
}
 
function printRow(id, priority, table)
{
    var tbody = document.getElementById(table);
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.appendChild(document.createTextNode(id));
    //td1.align = "top";
    td1.valign = "top";
    tr.appendChild(td1);
    
    var td2 = document.createElement("td");
    //td2.align = "top";
    td2.valign = "top";
    td2.appendChild(document.createTextNode(priority));
    tr.appendChild(td2);
    tbody.appendChild(tr);
    
    return tr;
}
 
function clearQueue()
{
    if (window.confirm("Are you sure you want to clear the entire queue?"))
    {
        AjaxTCR.comm.queue.clear();
        clearTable("statusTbodyQueue");
    }
    //clearTable("statusTbodyProcessing");
    //clearTable("statusTbodyComplete");
        
    
}
 
 
window.onload = function () 
{ 
 document.requestForm.requestButton.onclick = function () { sendRequests(this.form); };
 document.requestForm.clearButton.onclick = function(){clearQueue();};
 document.requestForm.removeButton.onclick = function(){removeRequest(this.form);};
 document.requestForm.normalButton.onclick = function(){addRequest(this.form, "normal");};
 document.requestForm.fasterButton.onclick = function(){addRequest(this.form, "faster");};
 document.requestForm.nextButton.onclick = function(){addRequest(this.form, "next");};
};

</script>

 
</head>
<body>
<div class="content">
<h1>Request Queue Explorer</h1>
<form action="#" name="requestForm">
<fieldset>
<table width="100%">
 
<tr class="row">
<td width="175">Number of Requests: </td><td><select name="requests">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
</select>( <em>Requests will experience a random delay from 0 - 12 seconds</em> )</td>
</tr>
<tr class="row">
<td width="175">Number of Concurrent Requests: </td><td><select name="concurrentrequests">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
</select></td>
</table><br />
 
        <input type="button" name="requestButton" value="Send Batch Requests" />
<br /><br />
<hr />
 <br />
 
    <input type="button" name="normalButton" value="Add Normal Request" />&nbsp;
  <input type="button" name="fasterButton" value="Add Faster Request" />&nbsp;
  <input type="button" name="nextButton" value="Add High Priority Request" />&nbsp;
<br /><br />
<hr />
 <br />
  <input type="button" name="clearButton" value="Clear Entire Queue" />
  <input type="button" name="removeButton" value="Remove Queue Item : " />
  # <input type="text" size="3" name="requestID" id="requestID" />&nbsp;
  
</fieldset>
</form>
<br />
</div>
 
 
<div id="queue" class="response">
 
 
<br />
<table width="80%">
<tr>
<td align="top" valign="top"><h3>Queue</h3>
<table id="statusTable" border="1" cellpadding="5" cellspacing="0">
        <tbody id="statusTbodyQueue">
            <tr id="header1">
                <th width="100">ID</th>
                <th width="100">Priority</th>
            </tr>
        </tbody>
    </table>
</td>
<td align="top" valign="top"><h3>Processing</h3>
<table id="statusTable" border="1" cellpadding="5" cellspacing="0">
        <tbody id="statusTbodyProcessing">
            <tr id="header2">
                <th width="100">ID</th>
                <th width="100">Priority</th>
                <th width="100">Status</th>
            </tr>
        </tbody>
    </table>
</td>
<td align="top" valign="top"><h3>Completed</h3>
<table id="receivedTable" border="1" cellpadding="5" cellspacing="0">
        <tbody id="statusTbodyComplete">
            <tr id="header3">
                <th width="100">ID</th>
                <th width="100">Priority</th>
            </tr>
        </tbody>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>

Number of Requests:	( Requests will experience a random delay from 0 - 12 seconds )
Number of Concurrent Requests: