Examples: Timeout

Simple Timeout

Request will timeout after 5 seconds or sooner if you abort it

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 - Timeout</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 responseOutput = document.getElementById("responseOutput");    
  responseOutput.innerHTML = response.responseText;    
  document.getElementById('sendBtn').disabled = "";
  document.getElementById('abortBtn').disabled = "disabled";
}
 
function showProgress(request)
{
  var responseOutput = document.getElementById("responseOutput");
  responseOutput.innerHTML = "Request id:" + request.requestID + " loading (" + request.timespent + ")";    
}
 
function showError(request)
{
 var responseOutput = document.getElementById("responseOutput");    
 responseOutput.innerHTML = "Request id:" + request.requestID + " timed out.";    
 document.getElementById('sendBtn').disabled = "";
 document.getElementById('abortBtn').disabled = "disabled";    
 
 /* kill request object */
 request = null;
 
}
    
function sendRequest()
{
  /* set the destination */
  var url = "https://ajaxref.com/ch6/slowhello.php";
  
  /* define communication options */
  var options = { method: "GET",
                  onSuccess : showResponse,
                  timeout: 5000,
          onTimeout : showError,
          showProgress: true,
          onProgress: showProgress
                   };
  
  /* make the request */                 
  var theRequest = AjaxTCR.comm.sendRequest(url,options);
  
  /* change UI to request request in progress */
  if (theRequest)
   {
     document.getElementById('sendBtn').disabled = "disabled";
     var abortBtn = document.getElementById('abortBtn');
     abortBtn.disabled = "";
     abortBtn.onclick=function () {abortRequest(theRequest)};    
   } 
}
 
 
function abortRequest(request)
{
 /* abort the request */
 AjaxTCR.comm.abortRequest(request);
 
 /* change UI to reflect new state */
 document.getElementById('responseOutput').innerHTML = "Aborted request id:"+request.requestID;
 document.getElementById('sendBtn').disabled = "";
 document.getElementById('abortBtn').disabled = "disabled";
 
 /* kill the request object */
 request = null;
}
 
window.onload = function() { document.getElementById('sendBtn').onclick=sendRequest;}

</script>

 
</head>
<body>
<div class="content">
<h1>Simple Timeout</h1>
<p>Request will timeout after 5 seconds or sooner if you abort it</p>
<form action="#" name="requestForm">
    <input type="button" value="Send a Request" id="sendBtn" />
    <input type="button" value="Abort Request" id="abortBtn"  />
</form>
</div>
<br /><br />
 
<div id="responseOutput" class="response"></div>
 
</body>
</html>