Please navigate to the bottom of the page for Table of Contents

Thursday, June 2, 2011

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.

3 comments:

  1. I really like what you have covered whole in your jquery series.
    thanks,
    H

    ReplyDelete
  2. This is an excellent straight forward example and clearly presented explanation. Thank you.

    ReplyDelete
  3. Once you know what you want to see, then you can figure out where you want to stay.
    Situs Poker Online International resorts and hotels are common around the island and are great places to stay when you want easy beach access.

    For cheaper and more authentically Cuban accommodations,
    DominoQQ you can choose from all sorts of hotels and guest houses. Whether you stay in the capital of Havana, or decide to stop in some of the smaller towns, there is always going to be somewhere you can rent a room. Known as "casa particulares", there are small guest houses where people offer rooms for rent in their own homes. It's a common feature in Cuba and a way to same some money because the costs are usually quite low.

    These are basically all the details you need before you plan your Cuba voyage.BandarQ Once you have a travel plan worked out, all that's left is getting things booked and head out.

    Terri has traveled the world and is always looking forward to her next adventure.Domino 99 She prefers to visit new and exciting places instead of the usual destinations.

    ReplyDelete