Starting the Process Over Again
Finally, showPoll starts the entire process over by scheduling a call to the original doPoll function in 15 seconds time using setTimeout, as shown below:
Example 2.25. appmonitor1.js (excerpt)
var pollHand = setTimeout(doPoll, 15000);
The fact that the code continuously invokes the doPoll function means that once the page loads, the HTTP requests polling the fakeserver.php page will continue to do so until that page is closed. The pollHand variable is the interval ID that allows you to keep track of the pending operation, and cancel it using clearTimeout.
The first parameter of the setTimeout call, doPoll, is a pointer to the main function of the application; the second represents the length of time, in seconds, that must elapse between requests.
Full Example Code
Here's all the code from our first trial run with this simple monitoring application.
Example 2.26. appmonitor1.js
var start = 0;
var ajax = new Ajax();
var doPoll = function() {
start = new Date();
start = start.getTime();
ajax.doGet('/fakeserver.php?start=' + start, showPoll);
}
window.onload = doPoll;
var showPoll = function(str) {
var pollResult = '';
var diff = 0;
var end = new Date();
if (str == 'ok') {
end = end.getTime();
diff = (end - start)/1000;
pollResult = 'Server response time: ' + diff + ' seconds';
}
else {
pollResult = 'Request failed.';
}
printResult(pollResult);
var pollHand = setTimeout(doPoll, 15000);
}
function printResult(str) {
var pollDiv = document.getElementById('pollDiv');
if (pollDiv.firstChild) {
pollDiv.removeChild(pollDiv.firstChild);
}
pollDiv.appendChild(document.createTextNode(str));
}
In a bid to follow good software engineering principles, I've separated the JavaScript code from the markup, and put them in two different files.
I'll be following a similar approach with all the example code for this book, separating each example's markup, JavaScript code, and CSS into separate files. This little monitoring app is so basic that it has no CSS file. We'll be adding a few styles to make it look nicer in the next chapter.
Running the App
Try loading the page in your browser. Drop it into your web server's root directory, and open the page in your browser.
If the fakeserver.php page is responding properly, you'll see something like the display shown in Figure 2.3.
Figure 2.3. Running the simple monitoring application
Further Reading
Here are some online resources that will help you learn more about the techniques and concepts in this chapter.
JavaScript's Object Model
Check out these two chapters on objects from the Client-Side JavaScript Guide for version 1.3 of JavaScript, hosted by Sun Microsystems. The first chapter explains all the basic concepts you need to understand how to work with objects in JavaScript. The second goes into more depth about JavaScript's prototype-based inheritance model, allowing you to leverage more of the power of object-oriented coding with JavaScript.
This is a brief introduction [37] to creating private instance variables with JavaScript objects. It will help you get a deeper understanding of JavaScript's prototype-based inheritance scheme.
XMLHttpRequest
Here's a good reference page [38] from the Apple Developer Connection. It gives a nice overview of the XMLHttpRequest class, and a reference table of its methods and properties.
This article [39], originally posted in 2002, continues to be updated with new information. It includes information on making HEAD requests (instead of just GET or POST), as well as JavaScript Object Notation (JSON), and SOAP.
This is XULPlanet's exhaustive reference [40] on the XMLHttpRequest implementation in Firefox.
Here's another nice overview [41], which also shows some of the lesser-used methods of the XMLHttpRequest object, such as overrideMimeType, setRequestHeader, and getResponseHeader. Again, this reference is focused on implementation in Firefox.
This is Microsoft's documentation [42] on MSDN of its implementation of XMLHttpRequest.
Summary
XMLHttpRequest is at the heart of AJAX. It gives scripts within the browser the ability to make their own requests and get content from the server. The simple AJAX library we built in this chapter provided a solid understanding of how XMLHttpRequest works, and that understanding will help you when things go wrong with your AJAX code (whether you're using a library you've built yourself, or one of the many pre-built toolkits and libraries listed in Appendix A, AJAX Toolkits). The sample app we built in this chapter gave us a chance to dip our toes into the AJAX pool -- now it's time to dive in and learn to swim.
Next Month
Chapter 3. The "A" in AJAX
The "A" in AJAX stands for "asynchronous," and is what makes AJAX development so powerful. In Chapter 3 you will develop a working application showing how AJAX can be used to make multiple requests to a server without the user ever leaving the currently loaded page.
About This Article
Glossary
[19] http://www.w3.org/MarkUp/2004/xhtml-faq
[20] http:/glossary.php?q=O#term_10
[21] http://www.sitepoint.com/glossary.php?q=U#term_67
[22] http://www.sitepoint.com/glossary.php?q=M#term_31
[23] http://www.sitepoint.com/glossary.php?q=F#term_45
[24] http://www.sitepoint.com/glossary.php?q=X#term_32
[25] http://www.sitepoint.com/glossary.php?q=U#term_67
[26] http://www.sitepoint.com/glossary.php?q=A#term_61
[27] http://www.sitepoint.com/glossary.php?q=J#term_65
[28] http://www.sitepoint.com/glossary.php?q=%23#term_2
[29] http://www.sitepoint.com/glossary.php?q=O#term_27
[30] http://www.sitepoint.com/glossary.php?q=I#term_30
[31] http://www.sitepoint.com/glossary.php?q=S#term_14
[32] http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10
[33] http://www.sitepoint.com/glossary.php?q=%23#term_2
[34] http://www.sitepoint.com/glossary.php?q=C#term_21
[35] http://docs.sun.com/source/816-6409-10/obj.htm
[36] http://docs.sun.com/source/816-6409-10/obj2.htm
[37] http://www.crockford.com/javascript/private.html
[38] http://developer.apple.com/internet/webcontent/xmlhttpreq.html
[39] http://jibbering.com/2002/4/httprequest.html
[40] http://www.xulplanet.com/references/objref/XMLHttpRequest.html
[41] http://kb.mozillazine.org/XMLHttpRequest
[42] http://msdn.microsoft.com/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp
Report a bug