jQuery load()

Updated March 21, 2023

Introduction to jQuery load()

The load() method of jQuery is used to get data from the server and place the HTML or text response in an element in the DOM. So, basically, it is a combination of two conventional methods of most scripting languages – the global get method and the respective methods to get the element in DOM and set their contents. If the element selector does not correspond to any element in the DOM, the load method is not called.

Syntax of load() Method

The syntax of the load() method has three variants based on the number of optional parameters passed to the method.

• The basic and the most elementary syntax is as follows:

$(<element>).load(<url>);

This method will fetch the contents at the specified url and insert it into the element. This is a simple get call with no data passed along with the request.

• The advanced syntax expects some parameters as follows:

$(<element>).load(<url>, <data>);

Here data is sent along with the request object to the server. This is useful in cases when your server expects some data or some parameters along with the request object. A simple example would be the id of the person whose details are requested from the server.

• Then there is the third syntax which includes a callback function:

$(<element>).load(<url>, <data>, [complete]);

Here complete is the callback function, which is called when the request to the server is completed. A request to the server is considered complete post the receipt of the response and the DOM manipulation of the element. A very important point to note here is that this callback function is called once for every element in the selector.

How does the load Method Work?

Let’s see behind the scenes of the load method.

Step 1 – It begins with finding the element in the DOM.

Step 2 – If the element is found, the next step is to send an AJAX request to the server at the specified url. An AJAX is an Asynchronous JavaScript and XML call. Since they are asynchronous, they do need a page refresh.

Step 3 – Once the response is received from the server, the next step is to insert the DOM element’s response. jQuery uses the browser’s innerHTML property to manipulate the contents of the element.

Step 4 – Now is the time to execute any callback functions, if present.

Examples of jQuery load()

Let us look at some of the examples of the load() method.

It looks like this in Chrome:

This is the playground for most of the jQuery related concepts. We would be using this playground throughout this article.

Now, fire up your browser and go to any websites which are built upon jQuery. For the purpose of this article, we need a server that can return us data. What better website than the encyclopedia of data – Wikipedia (https://en.wikipedia.org/wiki/JQuery). Fortunately, it is built upon the jQuery framework as well. Serves our purpose.

Open the developer console.

Next, we identify the element we would like to modify the contents of. Let’s modify the complete body of the page. From the Elements tab in the developer window, you would see that the element is this:

<div id="bodyContent" class="mw-body-content">

This element is uniquely defined through an id attribute bodyContent. We would use this id as a selector.

Now, we would fetch data from Wikipedia’s JavaScript page and insert it into the jQuery page’s content. Go to the console tab and type the following command:

$("#bodyContent").load("https://en.wikipedia.org/wiki/JavaScript");

As you press enter, notice that the jQuery page’s entire content now has JavaScript page’s content.

Ignore the error – this is because our experiment resulted in implementing one object model more than once, which caused Wikipedia’s code to throw an error. Next, go back to the Elements tab and search for the bodyContent element again.

Notice the change in the entire HTML content of the element. It now looks like this:

You could also display an alert when the entire operation is successful through the load method’s complete function parameter. Go back to the console tab and type the following command:

$("#bodyContent").load("https://en.wikipedia.org/wiki/JavaScript", function(){
alert("Okay!!!");
});

Elements of load Method

The load() method of jQuery fetches HTML from the URL and uses the returned HTML to fill the selected elements; let’s look at a few elements.

Loading Page Fragments

The load() method also allows us to load a fragment of the content instead of the entire content. Let’s see how to do this.

$("#bodyContent").load("https://en.wikipedia.org/wiki/JavaScript #History");

Go ahead and give it a try to see the results for yourself. Also, go to the JavaScript page and search for the element by the id History. Verify whether the results are indeed accurate.

So what happened here? jQuery did load the entire contents of the url but parsed it to find the element suffixing the url and inserted only the element’s innerHTML contents into the destination element in the DOM.

Executing Scripts

There is a fundamental difference between when jQuery implements the load method with a selector appended to the url and without a selector appended to the url.

In the former case, the scripts from the url are executed. Whereas in the latter case, the scripts are omitted. Thus,

Executes scripts - $("#bodyContent").load("https://en.wikipedia.org/wiki/JavaScript");
Does not execute scripts - $("#bodyContent").load("https://en.wikipedia.org/wiki/JavaScript #History");

Conclusion – jQuery load()

So, we have covered the load() function of jQuery in this article. We have understood how the load method works behind the scenes and in-depth as well. It is recommended to practice the method more with different kinds of data. This will help you get a better understanding of how the function works.

Recommended Articles

This is a guide to jQuery load(). Here we discuss some of the examples of the load() method along with the Loading Page Fragments. You may also have a look at the following articles to learn more –

1. JQuery fadeToggle effects
2. jQuery prepend()
3. jQuery Clone()
4. jQuery append()