JavaScript Libraries On page 531, we implemented about 30 lines of JavaScript code to execute the simplest of Ajax use cases. And there are undoubtedly browser-specific issues that our simplistic Ajax code does not account for. To reduce the amount of JavaScript code you need to write for Ajax requests, and to make sure that 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. The Prototype Library For the rest of this chapter, we 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 is the JavaScript from page 531, rewritten with Prototype: function showDateAndTime() { new Ajax.Updater("dateDIV", // DIV to update "dateAndTime.ajax", // URL { method: "get" }); // HTTP method } }
In the preceding code fragment, we are using the Prototype Ajax.Updater object to perform the Ajax call and to update the dateDIV's inner HTML when the Ajax call is done. Note the reduction of code from the listing on page 531: We reduced about 30 lines of JavaScript to two lines. That is a whopping 94 percent reduction in code, and as an added bonus, we are guaranteed that our code will run on every significant browser. Not a bad return on investment. For more information about Prototype, visit the Prototype homepage at http://prototype.conio.net. The Fade Anything Technique Library It is 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 lets you fade elements in a page. You can also control the fade's animation rate, starting and ending colors, and duration. We use the Fade Anything Technique library in the remaining examples in this chapter whenever we use Ajax to update elements in a page. For more information about the Fade Anything Technique library, see http://www.axentric.com. | 