Getting Started with AJAX in jQuery

By Akash Mehta
2008-05-11


Introduction to jQuery

AJAX is probably the biggest thing you can add to your site; with AJAX, you can dramatically increase functionality, and give your end users more usable web applications. But AJAX is tricky to get started with - it usually requires very complex JavaScript knowledge. In this tutorial, I'll show you how to get started with AJAX using the jQuery JavaScript framework.

This tutorial requires basic knowledge of HTML, and a decent grasp of CSS and JavaScript. You'll need a copy of the jQuery framework; download it from jQuery.com. I'm using version 1.2.3, but these samples should work with any 1.x release.

jQuery is a simple yet powerful JavaScript framework that's easy for all web developers to get started with. At its core, it provides a layer to simplifying common JavaScript tasks, from page manipulation to basic effects and even AJAX. It leverages existing knowledge by incorporating CSS and HTML concepts where possible, and doesn't require significant JavaScript knowledge.

Internally, jQuery is just a JavaScript object. It provides all its functionality through pure JavaScript; if you've read our JavaScript tutorial, you'll have no trouble at all. The jQuery code is a downloadable JavaScript file, which can then be included on your web pages just like any other JavaScript file. Insert a script tag in the head of your HTML and you're all set to use jQuery.

jQuery actually provides its standard jQuery object under the name $ - the dollar symbol. For example, when we want to use the get() method on the jQuery object, we can call $.get(). $ is simply an alias for jQuery, the actual name of the object; the symbol just saves you a bit of typing. When referring to the actual jQuery function, you can use $() instead of jQuery(). There are really only two JavaScript concepts jQuery introduces that you may not be familiar with: factory functions, and method chaining.

Factory functions

When working with jQuery, often you'll want to be working with something. For example, you might want to be working with a particular area of the page, or a particular section of an AJAX request response. We use the jQuery factory function to tell jQuery what to work with. Consider this example:

var domhandle = document.getElementById("somedivid");
doSomethingTo(domhandle);

This code snippet would find an element on the page with the id "somedivid" and tell the doSomethingTo() function to work on it. In jQuery, we would achive the same with this:

$("#somedivid").doSomething();

There are two things to note here - first, the factory function jQuery() (alised as $()) has been called and passed the ID of the DOM element; second, we call doSomething() directly. The first section is an example of jQuery selectors, which allow us to select elements on the page using standard CSS selectors. jQuery supports CSS 1-3, and a bit of XPath. You can easily select elements on the page without complex DOM calls using CSS selectors with jQuery. Once we have called the factory function, the jQuery object knows we are working with the element with the id "somedivid", and will be working with this when we call the doSomething() method on the jQuery object.

Method chaining

Technically, the jQuery() factory function is returning us the jQuery object. The object's methods we can call can also return the jQuery object. Recall that, within an object, you can refer to the current object as this. Now, you can also return values from within a function/method. So why not return this? That's exactly what jQuery does.

When you select a DOM element in jQuery using the factory function - $() - jQuery internally remembers what you are working on. You can then call most of the methods on the jQuery object in succession, but because each method returns the actual jQuery object, you can keep calling them without using the factory function again. Consider this example:

$("#somedivid").doSomething();
$("#somedivid").doSomethingElse();
$("#somedivid").doSomethingElse();

In jQuery, this could be shortened to:

$("#somedivid").doSomething().doSomethingElse().doSomethingElse();

This is because, at the completion of each function, we return (no pun intended) to the jQuery object, and can continue. The exception is when want to use the factory function again to work on something else; then we need another call (typically another line of code). This is one of the strengths of jQuery; it can be very compact and succinct, saving you time and making your code more maintainable.

Tutorial Pages:
» Introduction to jQuery
» Building a simple AJAX login form
» The jQuery behaviours
» Putting it all together
» Further reading

Related Tutorials: » GWT Basics: AJAX Programming with Java » AJAX Accessibility for Websites » AJAX and PHP Form Processing » The obligatory 'My Ajax Tutorial' Post » A Designer's Guide to Prototyping Ajax » Ajax Wireframing Approaches