Beginning Web Development, Silverlight, and ASP.NET AJAX

CHAPTER 11 ■ AJAX APPLICATIONS AND EMPOWERING THE WEB USER EXPERIENCE 263
The final piece of the puzzle is the callback. When you specify a callback function,
the XMLHttpRequest object will call it four times, setting the readyState property to the
values 1, 2, 3, and 4, respectively. These correspond to the following states:
1: Communication open
2: Message sent to server
3: Payload downloading from server
4: Payload download complete
The responseText property contains the returned values from the server.
So, if you are only interested in updating the page when the server has completed its
operation and sent its payload, then check the readyState for the value 4. You can see this
in action here:
function handleUpdate()
{
var ansDiv = document.getElementById("ans");
if(ajaxRequest.readyState == 4)
{
ansDiv.innerHTML = ajaxRequest.responseText;
}
}
This checks the readyState of the ajaxRequest, and when it is 4, it takes the
responseText and loads it into the element that is assigned to contain the answer.
If you run this application, you can see the effect. As you type in the text boxes, the
Ajax code will execute, calling the server and processing the return, loading it into the
answer , and giving a much more fluid user experience.
Again, as this is a simple case (multiplying two numbers), you could argue that you
don’t need a server, and thus don’t need Ajax—but it indicates the methodology that you
would use in a scenario where the mathematical functions may be too complex to do in
JavaScript, or may involve proprietary algorithms, as is the case with many financial analytics
calculations.
You can see it in action in Figure 11-4.