Examples: Applied Dependency

Applied Dependency Example
Data Table with XML + XSLT

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=iso-8859-1" />
<title>Chapter 6 : Networking Considerations - Applied Dependency (Data Table XML + XSLT)</title>
<link rel="stylesheet" href="https://ajaxref.com/ch6/bookmarks.css" media="screen" />

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

</script>

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

</script>

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

</script>

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

</script>

<script type="text/javascript">

 
var gXsltProcessor;
 
 
//EVEN THOUGH THIS IS SENT FIRST, IT IS BAD TO ASSUME IT IS RETURNED FIRST.
function handleXSLResponse(response)
{
    gXsltProcessor = new XSLTProcessor();
       gXsltProcessor.importStylesheet(response.xhr.responseXML);
    updateStatus();
    
}
 
 
function handleXMLResponse(response)
{
    try{
        var responseOutput = document.getElementById("responseOutput");
        //BAD ASSUMPTION THAT XSLTPROCESSOR IS ALREADY SET
        var resultDocument = gXsltProcessor.transformToFragment(response.xhr.responseXML, document);
        responseOutput.appendChild(resultDocument);
    }
    catch(e)
    {
        handleError(e);
    }
     
    updateStatus();
    
}
 
function updateStatus()
{
    var outstandingRequests = AjaxTCR.comm.stats.getRequestCount("active")
    if (outstandingRequests == 1)
        (document.getElementById("status")).innerHTML = "Awaiting " + outstandingRequests + " response";
    else if (outstandingRequests == 0)
        (document.getElementById("status")).innerHTML = "";
    else
        (document.getElementById("status")).innerHTML = "Awaiting " + outstandingRequests + " responses";
}
 
function calculateDelay(latency)
{
    //calculate delay
    var delay = 0;
    switch(latency)
    {
        case "None":
            delay = 0;
            break;
        case "Low":
            delay = 1;
            break;
        case "Medium":
            var random = Math.floor(Math.random()*3);
            delay = random + 2;
            break;
        case "High":
            var random = Math.floor(Math.random()*7);
            delay = random + 4;
            break;
        case "Random":
            var random = Math.floor(Math.random()*11);
            delay = random;
            break;
    }
        
    return delay;
}
 
 
function prepareRequests(form)
{
    var url =  "https://ajaxref.com/ch6/xsltdependency.php";
    var latency = form.latency.options[form.latency.selectedIndex].text;
    var sequence = form.sequence.checked;
    
    gXsltProcessor = null;
    
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "";
    
    /* Send first request */
    var requestID = 1;
    var payload = "file=xsl&delay=" + calculateDelay(latency);
    
    var options = {method:"GET",
                   onSuccess: handleXSLResponse,
                   payload : payload
                  };
    if (sequence)
        options.enforceOrder = true;
    AjaxTCR.comm.sendRequest(url, options);
    
    /* Send second request */
    requestID = 2;
    payload = "file=xml&delay=" + calculateDelay(latency);
    var options = {method:"GET",
                   onSuccess: handleXMLResponse,
                   payload : payload
                  };
    if (sequence)
        options.enforceOrder = true;
    AjaxTCR.comm.sendRequest(url, options);
    
    (document.getElementById("status")).innerHTML = "Awaiting " + AjaxTCR.comm.stats.getRequestCount("active") + " responses";
    (document.getElementById("response")).style.visibility = "visible";
}
 
function processResponse(responseXML)
{
    var responseOutput = document.getElementById("responseOutput");
    var resultDocument = gXsltProcessor.transformToFragment(responseXML, document);
       responseOutput.appendChild(resultDocument); 
}
 
function handleError(e)
{
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "Error Occurred: " + e.message;
    responseOutput.style.color = "red";
    return true;
 
}
 
window.onload = function () 
{ 
 document.requestForm.requestButton.onclick = function () { prepareRequests(this.form); };
};

</script>

 
</head>
<body>
<div class="content">
<h2>Applied Dependency Example<br />
<em>Data Table with XML + XSLT</em></h2>
<form action="#" name="requestForm">
<fieldset>
<table width="100%">
 
<tr class="row">
<td width="125">Latency: </td>
<td><select name="latency">
     <option>None</option>
     <option>Low</option>
     <option>Medium</option>
     <option>High</option>
     <option>Random</option>
    </select></td>
</tr>
 
<tr class="row">
<td>Force Sequencing: </td>
<td><input type="checkbox" name="sequence" /></td>
</tr>
 
</table>
</fieldset>
  
<br />
  <input type="button" name="requestButton" value="Send Requests" />
</form>
<br />
 
<div id="response" class="results" style="visibility:hidden;">
    <div id="status"></div>
    <div id="responseOutput">&nbsp;</div>
</div>
</div>
</body>
</html>

Latency:
Force Sequencing:

Examples: Applied Dependency

Applied Dependency Example Data Table with XML + XSLT

Applied Dependency Example
Data Table with XML + XSLT