PART II
Chapter 5: Developing an Ajax Library 191
<title>Ready State Revisited</title>
<link rel="stylesheet" href="global.css" type="text/css" media="screen" />
<script src="http://ajaxref.com/ch5/ajaxtcr.js" type="text/javascript"></script>
<script type="text/javascript">function sendRequest()
{
var url = "http://ajaxref.com/ch3/helloworldslow.php";
var readyStateOutput = document.getElementById("readyStateOutput");
readyStateOutput.style.display = "";var options = { method: "GET",
onCreate: handleResponse,
onOpen: handleResponse,
onSent: handleResponse,
onLoading: handleResponse,
onReceived : handleResponse,
onSuccess: handleResponse
};
AjaxTCR.comm.sendRequest(url, options);
}function handleResponse(response)
{
var readyStateOutput = document.getElementById("readyStateOutput");
readyStateOutput.innerHTML += "readyState: " + response.xhr.readyState + "<br/>";
}window.onload = function ()
{
document.requestForm.requestButton.onclick = function () { sendRequest(); };
};
</script>
</head>
<body>
<div class="content">
<h1>Readystate Monitor</h1><br />
<form action="#" name="requestForm">
<input type="button" name="requestButton" value="Make Request" />
</form><br />
</div>
<div id="readyStateOutput" class="results" style="display:none;"></div>
</body>
</html>The previous example suffers a bit because in order to show the readyState changes,
the request was slowed down, but not knowing that, it might appear to have hung. As you
have seen previously, it is usually a good idea to show progress of communication. You
have already seen short messages and the ever-present spinning circle animated GIF image.
These can easily be added into the library. First, to ease the ability to show messages during