Examples: Retry

Simple Retry

Request will timeout in 5 seconds or sooner if you abort it. Will retry 3 times.

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 - Retry</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.xhr.responseText;    
  document.getElementById('sendBtn').disabled = "";
  document.getElementById('abortBtn').disabled = "disabled";
}
 
function showProgress(request)
{
  var responseOutput = document.getElementById("responseOutput");
  responseOutput.innerHTML = "Request id:"+request.requestID+ " try #"+ request.retryCount + " ( " + request.timespent + " )";    
}
 
function showRetry(request)
{ 
 /* show error message */
 var responseOutput = document.getElementById("responseOutput");    
 responseOutput.innerHTML = "Retrying request";
}
 
function showTimeoutError(request)
{
 var responseOutput = document.getElementById("responseOutput");    
 responseOutput.innerHTML = "Request id:" + request.requestID + " timed out.";    
 document.getElementById('sendBtn').disabled = "";
 document.getElementById('abortBtn').disabled = "disabled";    
}
    
function sendRequest()
{
  /* set the destination */
  var url = "https://ajaxref.com/ch6/slowhello.php";
  
  /* define communication options */
  var options = { method: "GET",
                onSuccess : showResponse,
              timeout: 3000,
              retries: 3,
              onRetry : showRetry,
              onTimeout : showTimeoutError,
              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);
 
 /* show abort message */
 document.getElementById('responseOutput').innerHTML = "Request id:"+request.requestID+" user aborted.";
 
 /* change UI to reflect new state */
 document.getElementById('sendBtn').disabled = "";
 document.getElementById('abortBtn').disabled = "disabled";
 
 /* null the request just to be sure */
 request = null;
}
 
window.onload = function() { document.getElementById('sendBtn').onclick=sendRequest;}

</script>

 
</head>
<body>
<div class="content">
<h1>Simple Retry</h1>
<p>Request will timeout in 5 seconds or sooner if you abort it.  Will retry 3 times.</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>