What is Ajax?

Ajax stands for "Asynchronous JavaScript and XML". Once merely a party trick of Web 1.0 sites, Ajax has now firmly established itself as the wunderkind component of interactive Web 2.0 and Web 3.0 sites. Despite its impressive resumé, don't forget that on a functional level, everything that is done with Ajax can also be done without Ajax—its only function is to enhance user experience. Any site built with Ajax can be fully operational without Ajax, albeit with more mouse clicks.

The following is a simple but relevant example: go to http://www.pandora.com or http://www.google.com and try searching for something. You'll notice that search results appear without you having to submit the form.

You didn't have to click anything. This is the magic of asynchronous JavaScript. You received your search results and the page did not have to reload. We have all been on websites where we had to click a button to submit a form, but the user experience is smoother when Ajax is used.

To help demonstrate how this all happens, have a look at the following diagrams that compare a "normal" search form to an Ajax search form. In a normal search form, the user requests the first page containing the search form, and then a second page is requested when the user submits the form. Two page requests are made, both by the user.

The Ajax search form also makes two page requests, but instead of the user making both requests, the user requests only the first page, then the page makes the second request. The Ajax page acts like a browser.

Can you see how the Ajax scenario might be harder to debug? Instead of any error messages being delivered to you, they are delivered to the page that made the request, and unless you are looking for them, you might never realize that a problem occurred.

The slick features and smooth interface that Ajax sites provide come at a price. Special JavaScript functions have to be loaded and there are hidden dependencies on other pages. In short, Ajax-enabled pages are larger and thus slower to load, and their added complexity makes them more difficult to test and troubleshoot. As you design and develop plugins and pages, be sure to evaluate whether the clean Ajax interface is an absolute necessity or merely a "nice to have".

WordPress includes jQuery, a popular JavaScript library that makes it easy to perform Ajax tasks. Most importantly, jQuery solves many of the cross browser issues that plague many JavaScript functions. If you have never used jQuery before, then this chapter will introduce you to some of what it can do. If you are already familiar with jQuery, this chapter will show you how well it integrates with WordPress.

"Why use Ajax?" you might ask yourself. To answer that question, it's worthwhile to review the mechanics of how a web page works. When a browser requests a page, the web server constructs it using server-side technology such as PHP and then sends the assembled page to your browser. After the page request has been fulfilled, it is out of PHP's hands. JavaScript, however, can run client-side on the user's browser. It is for this reason that it is extremely valuable. It can do things long after PHP has packed up and gone home.