Examples: Monitor Connection Statistics

Monitor Connection Stats

Front End
Back 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 - Monitor Connection Stats</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 showResponse(response)
{
  var statusDivId = "status" + response.userID;    
  document.getElementById(statusDivId).innerHTML = "Request id: " + response.userID + " - Received on Attempt #" + response.retryCount;
}
 
function showError(request)
{
  var statusDivId = "status" + request.userID;
  document.getElementById(statusDivId).innerHTML = "Request id: " + request.userID + " - Timed Out";
}
 
function showFail(request, message)
{
  var statusDivId = "status" + request.userID;
  document.getElementById(statusDivId).innerHTML = "Request id: " + request.userID + " - Failed: " + message;
}
 
function showProgress(request)
{
  var statusDivId = "status" + request.userID;
  document.getElementById(statusDivId).innerHTML = "Request id: "+request.userID+ " try #"+ request.retryCount + " ( " + request.timespent + " )";
}
    
function sendRequests(form)
{
  /* clear anything in the response output area */
  var responseOutput = document.getElementById("responseOutput");
  responseOutput.innerHTML = "";
    
  /* set the destination */
  var url =  "https://ajaxref.com/ch6/timeoutexplorer.php";
 
  var numberRequests = form.requests.options[form.requests.selectedIndex].text;
  var timeoutTimeOption = (form.timeouttime.options[form.timeouttime.selectedIndex].text * 1000);
  var retryOption = form.retries.options[form.retries.selectedIndex].text;
  var payload = "";
  if (form.fail.checked)
      payload = "fail=1";
    
  var theRequests = new Array();
  for (var i=1;i<=numberRequests;i++)
    {
         /* define communication options */
          var options = { method: "GET",
              onSuccess : showResponse,
            onFail : showFail,
            timeout: timeoutTimeOption,
            retries: retryOption,
            onTimeout: showError,
            showProgress: true,
            onProgress: showProgress,
            userID:i,
            payload: payload
          };
                
        var statusdiv = document.createElement("div");
        statusdiv.id = "status" + i;
        statusdiv.className = "status";
 
        responseOutput.appendChild(statusdiv);
            
        
        /* make the request */                 
          theRequests[i] = AjaxTCR.comm.sendRequest(url,options);
        if (theRequests[i])
          statusdiv.innerHTML = "Request #" + theRequests[i].userID + " - Sent";        
    }        
}
 
 
window.onload = function () 
{ 
 /* Set up collection of results */
  AjaxTCR.comm.stats.collect("https://ajaxref.com/ch6/storeresults.php");
    
 document.requestForm.requestButton.onclick = function () { sendRequests(this.form); };
};

</script>

 
</head>
<body>
<div id="mainpage">
<div class="content">
<h1>Monitor Connection Stats</h1>
<form action="#" name="requestForm">
<fieldset>
<table width="100%">
<tr class="row">
<td colspan="2">
    <ol>
        <li>Send some various requests without a page reload</li>
        <li>Reload the page to trigger an unload page</li>
        <li>Follow this <a href="linkresults.txt" target="_blank">link</a> to see your various network statistics from the previous run</li>        
    </ol>    
</td>
</tr>
 
<tr class="row">
<td width="175">Timeout Time (In Seconds): </td><td><select name="timeouttime">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
 
</select> ( <em>Requests will experience a random delay from 0 - 12 seconds</em> )</td>
</tr>
<tr class="row">
<td width="175">Number of Requests: </td><td><select name="requests">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option selected="selected">4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
</select></td>
</tr>
<tr class="row">
<td width="175">Retries: </td><td><select name="retries">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select></td>
</tr>
<tr class="row">
<td width="175">Random Fails: </td><td><input type="checkbox" name="fail" checked="checked" /></td>
</tr>
</table>
</fieldset>
 
 
<br />
  <input type="button" name="requestButton" value="Send Requests" />&nbsp;</form>
<br />
</div></div>
 
<div id="responseOutput" class="response">
 
</div>
 
</body>
</html>

Send some various requests without a page reload Reload the page to trigger an unload page Follow this link to see your various network statistics from the previous run
Timeout Time (In Seconds):	( Requests will experience a random delay from 0 - 12 seconds )
Number of Requests:
Retries:
Random Fails: