Examples: Race Condition - Using custom session

Race Conditions

Activity

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 - Race Conditions</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 handleResponse(response)
{
    document.getElementById("responseOutput").innerHTML += response.xhr.responseText + "<br />";
        
    if (AjaxTCR.comm.stats.getRequestCount("active") == 1)
        (document.getElementById("statusSpan")).innerHTML = "Awaiting 1 response";
    else if (AjaxTCR.comm.stats.getRequestCount("active") == 0)
    {
        if (response.fetchSession != 1)
            AjaxTCR.comm.sendRequest("https://ajaxref.com/ch6/session2.php", {payload : "expected=value2", fetchSession:1, onSuccess:handleResponse});
        else    
        {
            (document.getElementById("statusSpan")).innerHTML = "Requests Complete";
            document.getElementById("requestButton").disabled = false;
        }
    }
    else
        (document.getElementById("statusSpan")).innerHTML = "Awaiting " + AjaxTCR.comm.stats.getRequestCount("active") + " responses";
                
    
}
 
function prepareRequest(val, delay)
{
    var url = "https://ajaxref.com/ch6/racesession.php";
    var payload = "delay=" + delay + "&sessionval=" + val;
    document.getElementById("responseOutput").innerHTML += "Attempting to set session variable to: <span class='" + val + "'>" + val + "</span><br />";
    
    var options = {method:"GET",
                   onSuccess: handleResponse,
                   onProgress: tickTimer,
                   payload : payload,
                   showProgress: true
                  };
                  
    AjaxTCR.comm.sendRequest(url, options);
    
    (document.getElementById("statusSpan")).innerHTML = "Awaiting " + AjaxTCR.comm.stats.getRequestCount("active") + " responses";
    (document.getElementById("response")).style.visibility = "visible";
}
 
function showProgressDisplay()
{
    document.getElementById("requestButton").disabled = true;
    document.getElementById("fullTimer").style.display = "";
    var timerSpan = document.getElementById("timerSpan");
    timerSpan.innerHTML = "0";
}
 
function tickTimer(request)
{
    var timerSpan = document.getElementById("timerSpan");
    timerSpan.innerHTML = request.timespent;
}
 
window.onload = function()
{
    document.requestForm.requestButton.onclick = function () 
    { 
        showProgressDisplay();
        prepareRequest('value1', 10);
        setTimeout(function(){prepareRequest('value2', 0);}, 2000);
    };
}

</script>

 
</head>
<body>
<div class="content">
<h1>Race Conditions</h1>
<form action="#" name="requestForm">
    By pressing the button below, two requests will be sent to set a session variable.  <br />
    The first will try to set the variable to <span class="value1">value1</span> and will have a delay of 10 seconds.<br />
    The second will try to set the value to <span class="value2">value2</span> and will have no delay.<br />  
    At the end of the calls, we will see what the session variable actually is. <br /> 
    <span class="value2">value2</span> is the expected value as that was the last one to be set.  <br /><br />
  <input type="button" name="requestButton" id="requestButton" value="Set Session Variables" />
</form>
<hr />
</div>
<div id="response" class="results" style="visibility:hidden;">
    <h2>Activity</h2>
    <div id="status"><span id="statusSpan"></span><span id="responseSpan"></span><span id="fullTimer" style="font-weight:bold;display:none;"> Time Elapsed: <span id="timerSpan"></span><img border="1" src="progressbar.gif" id="spinner" style="display:none;" /></span></div><br />
    <div id="responseOutput" class="data"></div>
</div>
</body>
</html>