JavaScript Libraries
On pages 5–6, we implemented about 30 lines of JavaScript code to implement the simplest of Ajax use cases. And there are undoubtedly browser-specific issues for which our simplistic Ajax code does not account.
To reduce the amount of JavaScript code you need to write for Ajax requests, and to make sure those requests succeed across multiple browsers, you should use a JavaScript library that neatly encapsulates those boring details and sharp edges in convenient JavaScript objects.
Prototype
For the rest of this short cut, we’ll use the Prototype JavaScript library to take care of our Ajax calls. Prototype is a popular library that has Ajax support, among other things, built in. For example, here are those 30-some lines of JavaScript from pages 5–6, rewritten with Prototype:
In the preceding code fragment, we’re using the Prototype Ajax.Updater object to perform the Ajax call and update the dateDIV’s inner HTML when the Ajax call is done. Note the reduction of code from the fragment on pages 5–6: We reduced approximately 30 lines of JavaScript to two lines. That’s a whopping 90 percent reduction in code, and as an added bonus, we’re guaranteed that our code will run on every significant browser. Not a bad return on investment.
For more information about Prototype, visit the Prototype home page at http://prototype.conio.net.
The Fade Anything Technique Library
It’s a good practice to provide visual cues for regions of a Web page that you update with Ajax. One of the most popular visual cues is a slow fade from one color to another, typically from yellow to the default background color.
The Fade Anything Technique library is a scant 91 lines of JavaScript that let you fade elements in a page. You can also control the fade’s animation rate, starting and ending colors, and duration. We will use the Fade Anything Technique library in the remaining examples in this short cut whenever we use Ajax to update elements in a page. For more information about the Fade Anything Technique library, see www.axentric.com.