JavaScript: The Definitive Guide, 6th Edition

Ajax with jQuery

Ajax is the popular name for web application programming techniques that use HTTP scripting (see Chapter 18) to load data as needed, 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 a single 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 and it will asynchronously load the content of that URL and then insert that content into each of the selected elements, replacing any content that is already there. For example:

// Load and display the latest 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 ...