Examples: Server Error Explorer

Server Error 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 - Server Error Explorer</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 showSuccess(response)
{
  var responseOutput = document.getElementById("responseOutput");    
  responseOutput.innerHTML = "Request id: "+response.requestID+ " try #"+ response.retryCount + " - <strong>SUCCESS:</strong> " + response.xhr.responseText;    
}
 
function showFail(response)
{
  var responseOutput = document.getElementById("responseOutput");    
  responseOutput.innerHTML = "Request id: "+response.requestID+ " try #"+ response.retryCount + " - <strong style='color:red'>FAIL:</strong> " + response.xhr.status + " " + response.xhr.statusText;    
}
 
function showProgress(request)
{
    var responseOutput = document.getElementById("responseOutput");    
    responseOutput.innerHTML = "Request id: "+request.requestID+ " try #"+ request.retryCount + " - Sent ( " + request.timespent + " )";     
}
 
function showRetryError(request)
{ 
 /* show error message */
 var responseOutput = document.getElementById("responseOutput");    
 responseOutput.innerHTML = "Request id:" + request.requestID + " retried " + request.retries  + " times - aborted request.";
 
 /* null the request to be sure */
 request = null;
}
 
function show200(response)
{
    var statusOutput = document.getElementById("statusOutput");
    statusOutput.innerHTML = "The request went through as expected!";    
}
 
function show404(response)
{
   var statusOutput = document.getElementById("statusOutput");
   statusOutput.innerHTML = "The page you requested could not be found.  Please check the URL.";
}
 
 
function sendRequests(form)
{
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "";
    
    var statusOutput = document.getElementById("statusOutput");
    statusOutput.innerHTML = "";
    
    var retries = form.retries.options[form.retries.selectedIndex].text;
    var status = form.status.options[form.status.selectedIndex].text;
    
    //create payload
    var payloadString = "delay=3&responsestatus=" + status;
        
    /* set the destination */
      var url =  "https://ajaxref.com/ch6/statusexplorer.php";
  
      /* define communication options */
      var options = { method: "GET",
                    onSuccess : showSuccess,
                  onFail : showFail,
                  retries: retries,
                  timeout: 5000,
                  onTimeout : showRetryError,
                  payload: payloadString,
                  showProgress: true,
                  onProgress: showProgress,
                  on200:show200,
                  on404:show404
                 };
  
      /* make the request */                 
      var theRequest = AjaxTCR.comm.sendRequest(url,options);
    if (theRequest)
       responseOutput.innerHTML = "Request id: "+theRequest.requestID+ " try #"+ theRequest.retryCount + " - Sent ";
    
    
}
 
window.onload = function () 
{ 
 document.requestForm.requestButton.onclick = function () { sendRequests(this.form); };
};

</script>

 
</head>
<body>
 
<div class="content">
<h1>Server Error Explorer</h1>
<form action="#" name="requestForm">
<fieldset>
<table width="100%">
<tr class="row">
<td width="100">Status: </td>
<td><select name="status">
    <option>200</option>
    <option>204</option>
    <option>403</option>
    <option>404</option>
    <option>500</option>
    <option>502</option>
    <option>503</option>
    <option>504</option>
    <option>505</option>
</select>&nbsp;Note: Try 504 to see automatic retries and 200 or 404 to see a custom message.</td></tr>
<tr class="row">
<td>Retries: </td>
<td><select name="retries">
    <option>0</option>
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select></td></tr>
</table>
 
</fieldset>
 <br />
  <input type="button" name="requestButton" value="Send Request" />
</form>
</div>
<br />
 
<div class="response">
<div id="responseOutput"></div><br />
<div id="statusOutput"></div>
</div>
 
</body>
</html>

Status:	Note: Try 504 to see automatic retries and 200 or 404 to see a custom message.
Retries: