jQuery Pocket Reference

Chapter 6. Ajax

Ajax is the popular name for web application programming techniques that use HTTP scripting to load data, without causing page refreshes. Because Ajax techniques are so useful in modern web apps, jQuery includes Ajax utilities to simplify them. jQuery defines one high-level utility method and four high-level utility functions. These high-level utilities are all based on the powerful low-level function jQuery.ajax(). The subsections that follow describe the high-level utilities first, and then cover the jQuery.ajax() function in detail. In order to fully understand the operation of the high-level utilities, you’ll need to understand jQuery.ajax(), even if you never need to use it explicitly.

The load() Method

The load() method is the simplest of all jQuery utilities: pass it a URL, which it will asynchronously load the content of, and then insert that content into each of the selected elements, replacing any content that is already there. For example:

// Load and display a status report every 60 seconds
setInterval(function() {
    $("#stats").load("status_report.html");
}, 60000);

We also saw the load() method in Simple Event Handler Registration where it was used to register a handler for “load” events. If the first argument to this method is a function instead of a string, it behaves as an event handler registration method instead of as an Ajax method.

If you only want to display a portion of the loaded document, add a space to the URL and follow it with a jQuery selector. ...