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.
Download from Wow! eBook <www.wowebook.com>
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.
The overall plan
In order to demonstrate how to integrate Ajax into your WordPress plugins, we've chosen a textbook example: automatically showing search results. Later in this book, we'll use Ajax to do more complicated things, but first we're going to cover the basics by breathing life into the standard search widget.
If you don't have the search widget enabled on your site, enable it now so you can see what we're talking about. In the WordPress manager, click on the Appearance | Widgets link and then drag the Search widget into the Primary Widget Area so that it becomes active. On a tangential note, WordPress uses Ajax to save your widget selections without you having to click anything.
Take a look at your home page to verify that you see the search widget. Try searching for a few terms to get a feel for how this process works.
Pretty basic, eh? You've seen this type of thing before, but let's take a moment to talk about what is really going on here. On a technical level, here is what happens when you perform a simple search:
1. You type a search term, for example, "sparky".
2. You submit the form—in this case it submits to same page via the "GET"
method. After submitting, you can see the query term in your URL, for example, http://yoursite.com/?s=sparky.
3. The data is sanitized and a database query is constructed.
4. The database executes the query and returns zero or many rows matching the criteria.
5. The results are formatted and displayed on the results page.
We don't want to change the behavior of the normal results page—we just want to have some "live" results that appear without the user having to submit the form. So in order to do that, we need to do a few extra things.
A common Ajax implementation for this type of situation uses the following components:
• The original page (just as we have with our standard search form)
• Another page that executes a search and provides "naked" search results that are meant to be dynamically inserted into the original page
• An Ajax script on the original page that fetches the data from the other page and inserts it dynamically into the original page
Remember that the other page's sole purpose is to provide a payload meant for the original page; it is never visited by the normal user. The original page uses a CSS selector to designate where this payload will be placed, for example, <div id="ajax_search_results_go_here"></div>.