Scott Fegette |
Monday, March 24, 2014
Let’s dig into the basics of using jQuery to load Ajax content using a very simple example.
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.
First, create a simple HTML file named index.html containing a single element on your page for jQuery to replace with content:
<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>
<div id="container">My Content Area</div>
When you load index.html into a web browser, you should see the following:
We’ll replace the words “My Content Area” using jQuery in this tutorial.
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.
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.
<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.
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:
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:
And we’re now ready to see what happens when it all comes together.
Load (or refresh) index.html in your browser, and you now should see a very different result:
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.
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.
Check out these popular Web courses.
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.