jQuery AJAX functions part 1–the load() method

jQuery is rapidly gaining popularity in many web applications and most of the modern frameworks (including ASP.NET) are providing official support for this lightweight and powerful framework. As such, most of the web developer and SDET interviews now make sure that the interviewee knows and understands the jQuery concepts. This includes (but is not limited to) selectors, getters, setters, events, effects, ajax, plugins and UI library concepts.

In the next few posts, we will discuss the jQuery AJAX functions. There are 3 categories of questions: Explain the basic jQuery load() method; Explain the jQuery utility functions; and lastly, the king of all functions: Explain the jQuery ajax() function. In this post we will focus our attention on the load() function.

Basic load() method

The simplest AJAX method in jQuery is the load() method; given a URL, it will asynchronously load its contents and display it dynamically on the page (in the element specified).  In it’s simplest form, the load function looks something like this:

$('div').load('CurrentStatus.html');

A more complete example might be when you combine this functionality with a timer to update some element on a periodic basis.

// Load and display the current status every minute
setInterval(function() {
        $("#currentStatus").load("CurrentStatus.html");
    }, 60000);

The code above will get the entire contents of the specified web page. The load() function also allows you to get partial page content. The trick is to add a space to the URL and follow it with a jQuery selector. When the URL has loaded, the selector you specified will be used to select the portions of the loaded HTML to be displayed:

// Load the temperature section of the weather report
$('#db_status').load("CurrentStatus.html #DB");

The complete signature of the load() method takes in two additional optional parameters

.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
 

url - A string containing the URL to which the request is sent.
data - A map or string that is sent to the server with the request.
complete(responseText, textStatus, XMLHttpRequest) - A callback function that is executed when the request completes.

Passing data to the load() method

If you pass in a string as the data, it is appended as a query string parameter. On the other hand, if you pass in an object, it is converted to name=value pairs. For example, the first call is passed as query string data and the second example shows an object that is passed to the call.

// Load the status for a particular server
$('#status').load("CurrentStatus.html", "server=db01");
    
// pass an object as data specifying an interval of day
$('#status').load("CurrentStatus.html",
{ server:'DB01', interval:'1day' });

Executing a callback function

The second optional parameter is a callback function that will execute on completion of the load() method.

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

One important fact to note is that the POST method is used if data is provided as an object; otherwise, GET is assumed.