Examples: Sequence

Sequence Explorer

Payload	Status

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 - Sequence</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 prepareRequests(form)
{
    /* Clean up last request */
    var tbody = document.getElementById("statusTbody");
    for (var i=tbody.childNodes.length-1;i>0;i--)
    {
        if (!tbody.childNodes[i].id || tbody.childNodes[i].id != "header") 
            tbody.removeChild(tbody.childNodes[i]);
    }
        
    var url =  "https://ajaxref.com/ch6/dependency.php";
    var phrase = "Makes Sense?";
    var concurrentRequests = form.concurrentrequests.options[form.concurrentrequests.selectedIndex].text;
    
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "";
    
    if (form.requestqueue.checked)
        AjaxTCR.comm.queue.requestQueueConcurrentRequests = concurrentRequests;
    
    for (var i=0; i < phrase.length;i++)
    {
        var payloadString = "payload=" + AjaxTCR.data.encodeValue(phrase.charAt(i)); 
        
        /* define communication options */
          var options = { method: "GET",
              onSuccess : showSuccess,
            onReceived : showReceived,
            onOpen : showOpen,
            onSent : showSent,
            payload:payloadString,
            symbol: phrase.charAt(i)
            
          };
        
        /* add enforce order if selected */
        if (form.responsequeue.checked)
            options.enforceOrder = true;
            
        var tbody = document.getElementById("statusTbody");
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.appendChild(document.createTextNode(phrase.charAt(i)));
        tr.appendChild(td);
      
        td = document.createElement("td");
        tr.appendChild(td);
        tbody.appendChild(tr);
      
        options.symbolStatus = td;
  
        
        if (form.requestqueue.checked)
            AjaxTCR.comm.queue.add(url,options);
        else
            AjaxTCR.comm.sendRequest(url,options);
            
        showOutstanding();
    }        
}
 
function showOutstanding()
{
  var status = document.getElementById("status");
  var outstandingRequests =  AjaxTCR.comm.stats.getRequestCount("active");
  var queueRequests = AjaxTCR.comm.queue.getSize();
  
  if (outstandingRequests == 1)
    status.innerHTML = "Awaiting " + outstandingRequests + " response";
  else if (outstandingRequests == 0)
            status.innerHTML = "";
  else
    status.innerHTML = "Awaiting " + outstandingRequests + " responses";
    
  if (queueRequests == 1)
    status.innerHTML += "<br />1 request in Queue";
  else if (queueRequests > 1)
    status.innerHTML += "<br />" + queueRequests + " requests in queue";
    
      
}
 
function showSent(request)
{
  request.symbolStatus.innerHTML = "Sent";
}
 
function showOpen(request)
{
  request.symbolStatus.innerHTML = "Request Created";
}
 
function showReceived(response)
{
    response.symbolStatus.innerHTML = "Received";
}
 
function showSuccess(response)
{
  showOutstanding();
      
  var responseOutput = document.getElementById("responseOutput");
  responseOutput.innerHTML += response.xhr.responseText;
  
  response.symbolStatus.innerHTML = "Processed";
}
 
 
window.onload = function () 
{ 
 document.getElementById("requestButton").onclick = function () { prepareRequests(this.form); };
};

</script>

 
</head>
<body>
<div class="content">
<h1>Sequence Explorer</h1>
<form action="#">
 
<fieldset>
<table width="100%">
<tr class="row">
 <td width="150">Use Request Queue: </td>
 <td><input type="checkbox" name="requestqueue" />&nbsp;
 Concurrent Requests: 
 <select name="concurrentrequests">
 <option>1</option>    
 <option>2</option>
 <option>4</option>
 <option>12</option>
 </select></td>
 
</tr>
<tr class="row">
 <td width="150">Use Response Queue: </td>
 <td><input type="checkbox" name="responsequeue" /></td>
</tr>
</table>
</fieldset>
 
<br />
<input type="button" id="requestButton" value="Send Requests" />
</form>
 
<br />
 
<div id="response" class="results">
    <div id="status"></div>
    <div id="responseOutput">&nbsp;</div>
    
</div>
<br />
<table id="statusTable" border=1 cellpadding=5 cellspacing=0>
        <tbody id="statusTbody">
            <tr id="header">
                <th width="100">Payload</th>
                <th width="100">Status</th>
            </tr>
        </tbody>
    </table></div>
</body>
</html>