Developing AJAX Applications with jQuery
- Simple AJAX Calls
- Processing XML Responses
- Global AJAX Events
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Almost all modern web applications enhance the user interaction with AJAX: Dynamic content is fetched in the background (asynchronously) from the web server and used to update the web pages. Support for AJAX calls is thus a major requirement that popular browser libraries simply have to address, and jQuery fits the bill amazingly well.
jQuery supports all data formats used by AJAX applications:
- HTML fragments can be copied directly into the web page elements.
- XML documents can be processed with the rich set of jQuery selectors and DOM traversal calls.
- JavaScript code is downloaded and evaluated by the jQuery library.
- JSON structures are evaluated and passed to the callback functions.
- Text responses are passed transparently to the callback functions.
The library also provides numerous API calls with varying complexity:
- The .load() method loads HTML fragment into a web element.
- The $.get() call loads the requested document and calls a callback function that processes it.
- The low-level $.ajax() call allows you to specify numerous parameters that affect the HTTP request and its handling.
Finally, global AJAX handlers can be used with the callback functions to provide application-wide functionality (for example, handling common errors, or the display of the "famous" loading indicator).
In this article, we'll use the jQuery library to implement a simple Frequently Asked Questions (FAQ) application, previously described in my articles "Introduction to HIJAX" and "Enhance Your AJAX Applications with Visual Cues.
Simple AJAX Calls
The first AJAX call in the FAQ application loads the list of categories from the web server (using the categories.asp server-side script), copies them into a placeholder (UL with ID=toctop) already present in the initial web page, and activates the links to individual categories.
The server-side script has been modified to return an HTML fragment when called with the mode=ajax parameter. This fragment is simply inserted into the target UL with a single jQuery call:
$("#toctop").load("categories.asp?mode=ajax")
Links in the returned HTML fragment could be activated automatically with the live events functionality added in jQuery release 1.3, or through a callback function. We'll use the latter method to ensure compatibility with older jQuery releases (in case you're already using an older version of the jQuery library on your website).
Due to the powerful selectors and event-binding methods of jQuery, all the links in the returned HTML code are activated with a single JavaScript line. Embedding that line in an anonymous function that's supplied as the callback parameter to the load method completes the solution:
function loadCategories() {
$("#toctop").load("categories.asp?mode=ajax",function() {
$("#toctop a").click(expandCategory);
});
}
We only need to register the loadCategories function with jQuery as a ready handler, and the AJAX call is executed (and the list of categories inserted into the web page) as soon as the original HTML is loaded:
$(loadCategories);