Examples: Connection Speed

Connection Rate 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 - Connection Speed</title>

<script type="text/javascript">

 
var gPageStartTime = (new Date()).getTime();

</script>

 
 
<link rel="stylesheet" href="https://ajaxref.com/ch6/global.css" type="text/css" media="screen" />

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

</script>

<script type="text/javascript">

 
 
function showResponse(response)
{
    var requestTime = (response.endTime - response.startTime)/1000;
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML += "Request Time: " + requestTime + "<br />";
}
 
function prepareRequests(form)
{
    document.getElementById("responseOutput").innerHTML = "";
    
    var data = "Nulla suscipit. Quisque a felis. Duis dui augue, vestibulum nec, ultrices id, ornare vehicula, justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur malesuada turpis euismod orci. Pellentesque iaculis. Duis enim. Nulla magna ipsum, molestie nec, ullamcorper at, ullamcorper vitae, purus. Curabitur ac nisi nec justo condimentum rutrum. Aenean suscipit. Nunc convallis lacus porta purus. In et urna id odio sagittis mattis. Etiam viverra fusce.";
    
    var calculate = form.calculate.options[form.calculate.selectedIndex].value;
    var packetSize = form.packetSize.options[form.packetSize.selectedIndex].value;
    var runs = form.runs.options[form.runs.selectedIndex].value;
    
    var url = "https://ajaxref.com/ch6/specs.php";
    var options = {onSuccess: showResponse};
    if (calculate == "download")
    {
        options.method = "GET";
        options.payload = "responseSize=" + packetSize;
    }
    else
    {
        options.method = "POST";
        options.payload = "packet=";
        for (var i=0;i<packetSize;i++)
            options.payload += AjaxTCR.data.encodeValue(data);
            
        if (calculate == "roundtrip")
            options.payload += "&responseSize=" + packetSize;
    }
    
    for (var i=0;i<runs;i++)
        AjaxTCR.comm.queue.add(url,options);
}
 
 
window.onload = function () 
{ 
 
 var pageEndTime = (new Date()).getTime();
 var pageLoadTime = (pageEndTime - gPageStartTime)/1000;
 document.getElementById("pageLoadOutput").innerHTML = "Page Load Time: " + pageLoadTime;
 
 document.requestForm.requestButton.onclick = function () { prepareRequests(this.form); };
};

</script>

 
</head>
<body>
<div class="content">
<h1>Connection Rate Explorer</h1>
<form action="#" name="requestForm">
<fieldset>
 
<table width="100%">
<tr class="row">
<td width="125">Calculate:</td>
<td>
  <select name="calculate">
      <option value="roundtrip">Round-trip</option>
    <option value="upload">Upload</option>
    <option value="download">Download</option>
   </select>
</td>
</tr>
<tr class="row">
<td width="125">Packet Size:</td>
<td>
  <select name="packetSize">
      <option value="1">500B</option>
    <option value="2">1kB</option>
    <option value="10">5kB</option>
    <option value="20">10kB</option>
    <option value="50">25kB</option>
    <option value="100">50kB</option>
   </select>
</td>
</tr>
<tr class="row">
<td width="125">Runs:</td>
<td>
  <select name="runs">
      <option value="1">1</option>
    <option value="3">3</option>
    <option value="5">5</option>
   </select>
</td>
</tr>
</table>
</fieldset>
  
<br />
  <input type="button" name="requestButton" id="requestButton" value="Send Requests" />
</form>
<br />
</div>
<div id="response" class="results">
    <div id="pageLoadOutput">&nbsp;</div>
    <div id="responseOutput">&nbsp;</div>
</div>
 
</body>
</html>

Calculate:
Packet Size:
Runs: