Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

Article Center

All articles

Featured articles

Article categories

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

By Scott Fegette | Monday, March 24, 2014

Use jQuery Ajax to Load Remote Web Content

Use jQuery Ajax to load remote web content

What is Ajax?

Ajax stands for “Asynchronous JavaScript and XML,” a friendly term for when a webpage or application asks a server for new content, then displays it in the current page without having to reload. Although the X in Ajax originally stood for XML, the content being delivered often comes in a variety of forms today, including XML, HTML, JSON (JavaScript Object Notation), or just plain old text. Ajax content has become commonplace in modern web experiences, but writing the JavaScript required to actually load and display Ajax content by hand can still be a tedious process. And that’s where jQuery Ajax can step in to make your job easier.

How can jQuery help with Ajax content?

jQuery is a JavaScript library, which simplifies many tasks in JavaScript. It’s very popular with web designers and developers for dynamically updating a webpage’s Document Object Model (DOM), and changing its structure and content as needed.

Let’s dig into the basics of using jQuery to load Ajax content using a very simple example.

Building a simple content loader

To explore how to use jQuery Ajax in practice, we’ll build a simple content loader that requests a basic HTML file and loads it into a particular area of a webpage.

Why would you want to do this? Perhaps you have a few colleagues who need to update an area of your website, and you’d like to ensure that they don’t mistakenly edit other areas of the page, or even worse, break its layout and structure. Or you have a partner who publishes a small quote or testimonial on his or her website that you’d like to retrieve and syndicate on your own site. The sky’s the limit, but we’ll start small.

To complete this project, you’ll need to set up your webpage and the “container area” we’ll find and update with jQuery, and then add the jQuery code to request new remote content and display it in your page.

Step 1: The index page and content container

First, create a simple HTML file named index.html containing a single element on your page for jQuery to replace with content:

index.html

<html><head><title>Content Loader</title></head><body><h1>News</h1><div>My Content Area</div></body></html>

Simple, right? Next, we need to add an ID attribute to that element—essentially a unique name that nothing else on your webpage will share—so that jQuery can find it easily.

...
<div id="container">My Content Area</div>
...

When you load index.html into a web browser, you should see the following:

Example 1 - Unaltered HTML Page

We’ll replace the words “My Content Area” using jQuery in this tutorial.

Step 2: Downloading and installing jQuery

jQuery is a .js (JavaScript) file that that needs to be included in your page to use its features. To get a copy of jQuery, visit jquery.com/download, right-click the appropriate link, then select Save As… from the contextual menu and save the jQuery library alongside your index.html file. We’ll use the compressed, production version of jQuery 1.11.0 for this tutorial (jquery-1.11.0.min.js).

Next, add the jQuery library to your webpage’s section, so it can be used by the page. Putting this script block in the head section of your page ensures that jQuery reaches the browser before your content, and is ready to go when the rest of the page loads.

index.html

...
<head><title>Content Loader</title></head>
...

Step 3: Creating the remote content

Often remote content is generated from a database, or delivered in a more flexible format like XML, HTML or JSON. In this case, we’ll load some basic HTML from a file into our div. Create another HTML file in your text editor and name it content.html.

content.html

<h3>Headline</h3><p>This is our most important news item of the day.</p>

Save this file alongside your main index.html file, and we’re ready to tell jQuery how to load it into our page.

Step 4: Creating the loader script

Next, create one more file—script.js—into which we’ll write the JavaScript code that makes everything happen. Save it alongside your other project files, and let’s dive into jQuery itself.

A jQuery statement is very straightforward, and jQuery’s Ajax methods are no exception. Enter the following line of code into your script.js file:

$('#container').load('content.html');

That single statement is all you need to load remote content, but it needs to be placed in the correct location. Earlier, we placed jQuery in the section of index.html so it’s ready to go when our content loads. Our script, however, refers to the container in our index page. If we include it before our container , it won’t be able to find the container (which reaches the browser later), so we’ll put our script block right underneath our content container:

...
<h1>News Items</h1>
...

And we’re now ready to see what happens when it all comes together.

Step 5: Running the script and watching the results

Load (or refresh) index.html in your browser, and you now should see a very different result:

Example 2 - The updated webpage

There it is, our remote HTML content loaded into our container
.What happened underneath the hood? Let’s explore that jQuery code to see what it contains, and how it works.

$('#container').load('content.html');

The $ and first set of parentheses are how we tell jQuery the area of the page we want to affect, and the real key to jQuery’s power. We’ve specified our #container id within, so jQuery knows that’s the area we want to work with.

The next section tells jQuery what we want to do. jQuery’s method for loading remote Ajax content is named “load,” and it requires a file name (or URL) to grab whatever file or data is at that location, and load it into the area of the page we’ve specified. We’re simply pointing jQuery to our content.html file, which completes the statement and loads content.html into the #container area of our page.

Although this is a simple example of jQuery Ajax, it also highlights jQuery’s power and simplicity in identifying areas of your webpages and making dynamic changes to them.

Learn more about jQuery and Ajax

This tutorial on jQuery Ajax is just scratching the surface of what you can accomplish with jQuery. Check out our jQuery (and Ajax) courses at lynda.com to dig deeper into the jQuery API and all the amazing things you can do with it.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , ,

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.