AJAX and PHP

Client-Side Techniques with Smarter JavaScript
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
Note that you cannot load the script locally, directly from the disk using a file://
resource. Instead, you need to load it through HTTP. To load it locally, you would need
to mention the complete access path to the .txt file, and in that case you may meet a
security problem that we will deal with later.
Supposing that the HTTP request was successfully initialized and executed asynchronously, the
handleRequestStateChange method will get called every time the state of the request changes. In
real applications we will ignore all states except 4 (which signals the request has completed), but
in this exercise we print a message with each state so you can see the callback method actually
gets executed as advertised.
The code in handleRequestStateChange is not that exciting by itself, but the fact that it's being
called for you is very nice indeed. Instead of waiting for the server to reply with a synchronous
HTTP call, making the request asynchronously allows you to continue doing other tasks until a
response is received.
The handleRequestStateChange function starts by obtaining a reference to the HTML element
called myDivElement, which is used to display the various states the HTTP request is going through:
54
// function that handles the HTTP response
function handleRequestStateChange()
{
// obtain a reference to the element on the page
myDiv = document.getElementById("myDivElement");
// display the status o the request
if (xmlHttp.readyState == 1)
{
myDiv.innerHTML += "Request status: 1 (loading) ";
}
else if (xmlHttp.readyState == 2)
...
...
When the status hits the value of 4, we have the typical code that deals with reading the server
response, hidden inside xmlHttp.ResponseText:
// when readyState is 4, we also read the server response
else if (xmlHttp.readyState == 4)
{
// continue only if HTTP status is "OK"
if (xmlHttp.status == 200)
{
try
{
// read the message from the server
response = xmlHttp.responseText;
// display the message
myDiv.innerHTML += "Request status: 4 (complete). Server said: ";
myDiv.innerHTML += response;
}
catch(e)
{
// display error message
alert("Error reading the response: " + e.toString());
}
www.it-ebooks.info