AJAX applications with jQuery

In the midst of the often amorphous constellation of ideas and efforts known as Web 2.0, there are refreshingly concrete examples of great technologies being created and used by enthusiastic developers. John Resig's jQuery is an excellent example.

JQuery is a JavaScript library that makes writing JavaScript, including sophisticated Web 2.0 effects and Asynchronous JavaScript and XML (AJAX) behavior easier, faster and cleaner. JQuery's motto is "Writing JavaScript code should be fun."

Beginners may wonder why one would use a JavaScript library. Rather than writing all your JavaScript functionality from scratch -- often times "reinventing the wheel" -- you can leverage the power of a library for common tasks, leaving you free to concentrate on the unique, creative portions of your project. JQuery is a particularly well-written and clever library, and it also happens to be tiny -- the uncompressed version is a mere 15KB.

Two notable strengths of the jQuery project are: 1) the momentum of the community working on the project and contributing extensions and 2) the importance placed on documentation. The project Web site has plenty of documentation to help you understand and use jQuery, as well as a number of handy tutorials that help new folks get up and running.

From the jQuery Web site, you can can download the latest version of the library, get plugins and extensions, and access the documentation.

Let's explore a simple, hands-on example. To complete this exercise, you need only a Web browser with JavaScript enabled and your favorite text editor. The example is fairly generic so you can adapt it to your specific needs. Because AJAX is so useful, we'll try out jQuery's AJAX module.

AJAX enables you to create Web pages that asynchronously exchange small chunks of information with a back-end server, thus avoiding full page loads. For example, if you want to change one specific part of the page based on the action of the user -- say, recalculating the total in a shopping cart when the user adjusts a quantity -- rather than forcing the user to wait for a new version of the entire page to load, you can simply update the portion that needs updating, leaving the user free to continue using the page uninterrupted.

There are two major components to our example: a Web page that uses jQuery to perform an AJAX request and render the results, and a server-side script that answers the request for data.

For the purposes of keeping this example down to a manageable size, we simply use canned HTML rather than build a true database-querying script. However, in the real world, your script will query a database via a server-side script based on the parameters passed in by the AJAX query.

The steps we take are as follows:

1. Create a simple Web page and a simple, external CSS stylesheet.

2. Write the AJAX query using jQuery.

3. Install our canned server response.

4. Test.

In our hypothetical situation, the Web page is the front end for a discussion forum. When the user selects the discussion thread, we update the page with the contents of that thread.