AJAX with jQuery: The Beginning

Posted on 26. Mar, 2009 by Shawn McCool in AJAX, JavaScript, Screencasts, Web Development

This is the first in a series of screencasts that I’m creating to highlight the AJAX functionality present in the open source Javascript framework jQuery. In this screencast I give a brief overview of AJAX as well as delve into our first jQuery command.

* SCRIPT *

AJAX stands for Asynchronous JavaScript and XHTML (or XML, depending on who you ask).

Since you’re watching this you probably already know that it’s a technology that allows us to send and receive data to and from a web server without having to reload our web page.

I’ve already created a project for us and have included the most recent copy of jQuery. So, let’s go ahead and create an index.html file.

Now, I’m going to go ahead and include the jQuery script file and add script tags and a container to work with.

It’s probably important to add that we should never actually mix JavaScript and HTML in the same file. But, we’re going to go ahead and do it here for demonstration purposes.

jQuery comes stock with a handful of powerful AJAX commands. For now, we’re going to focus on the load command. The load command allows us to replace the HTML in a wrapped set with HTML that we’re pulling from another file on our website.

What we’re going to do is we’re going to want to wait until the DOM has loaded by using the ready command and then once the DOM has loaded let’s go ahead and select the console and pull in some HTML from a file called listitems.html. We haven’t actually created this file yet so let’s go ahead and do that.

Let’s go ahead and create an unordered list with the firstList class and we’ll go ahead and copy and paste that and create a second list.

Alright, so we can imagine this as a side navigation or something along those lines. Let’s go back to our index.html file and we’re ready to run.

So, let’s load the page and as you can see it loads in the contents of the listitems.html file.

Let’s go ahead and add a button for more interactivity. We’ll go ahead and name it actionButton. Next, we’ll want to bind the click event of the action button and execute our AJAX load.

Let’s go ahead and reload the page. We have our click me button. We click it and it loads the content.

One of the reasons the load command is so powerful is that it allows us to define a selector. We can actually use a selector to select a subset of content from the listitems.html file. An example would be if we wanted to just select the content from the second list. We could tell it that we want to select anything with the class secondList.

So, we’ll save it and load. Click, and we only pull back the second list. We can drill down even deeper by only selecting the even list items.

As you can see we were able to accomplished a lot with very little code. But, we’re just beginning to scratch the surface of the functionality that jQuery provides for AJAX interactions.

And with that we conclude the first screencast on AJAX with jQuery. My name is Shawn McCool. Thanks for watching.