What is Ajax?

If you’re like most PHP developers, you probably learned your craft the old-fashioned way. You learned how to define and build simple PHP pages, connect them to simple MySQL tables, and off you went. As you progressed through various skill levels, you learned how to create ever-more complex PHP functionality, and you learned how to join tables in MySQL and perform other advanced tasks.
Along the way, you probably picked up a number of client-side skills to bring your Web applications to life. You may have learned a bit about XHTML or CSS, maybe some JavaScript programming. Depending on the kinds of projects you’re used to, you may even have had the chance to work with Ajax to give your Web applications that Web 2.0, or “desktop,” feel. If your first experience with Ajax was anything like mine, however, you probably did too much work — hand-rolling your functions and struggling through the process of creating an Ajax-driven page.

For some, Ajax is still a mystery. It’s something that the “cool kids” and “bad boys” of Web development/interactivity do, and they’ve never had the time, patience, or skill to take it on. It’s a shame, too, because a lot of clients really like adding Ajax-style functionality — it makes Web applications easier to work with. If you’re one of these PHP developers, never fear: By the time you’re done reading this article, you’ll know enough to become a real Ajax pro.
This article shows how to use jQuery to easily add Ajax functionality to any PHP Web application. You’ll build a simple Web application with PHP and MySQL — a phone book containing names and phone numbers. The application has all the standard things you’d expect — a way to search for names or phone numbers, a MySQL table, etc. Next, you’ll add jQuery to the application, giving you the ability to search for names and phone numbers in real time, as you type. When you’re done, you should have a pretty good grounding in not only some jQuery basics but also in the fundamentals of Ajax.

The best way to describe Ajax is to compare it to what you already know. Most Web pages and applications work in synchronous mode. You click a link or a form’s Submit button, and the request is sent to the server, which then processes that request and sends back a response. The best way to sum up this model is “click, wait, view.” It’s a never-ending rinse-and-repeat cycle that you know all too well. In other words, if your page needed to show constantly updated information, you either had to put in some kind of auto-refresh hack or make the user refresh or click a link to make things happen.
Ajax changes all that. The first A in Ajax stands for asynchronous. Ajax allows you to create a page in any programming language, then refresh different parts of that page with information from a database or some other back-end server process. For example, say you have an e-commerce site that shows products for sale. On each product page, there are the usual items: headlines, sales copy, thumbnail photos, the number of items in stock.
Say you wanted to keep the site visitor updated on how many items were in stock. You could add an Ajax function that would run a separate PHP page containing a MySQL query, then repopulate the information on the original page without any input from the user or without regard to the synchronous nature of the click-wait-view pattern of events.
The j in Ajax stands for JavaScript, and that’s what powers all the behavior you get. That’s a blessing and a curse, really — a blessing because it’s all client-side code, so it’s portable and doesn’t affect the server; a curse for a lot of PHP developers because it’s a different environment than they’re used to. That’s where tools and frameworks like jQuery come in: They vastly simplify how you interact with Ajax, speeding our time to code completion.
What about the final two pieces: the + and the x? They stand for and XML, although the XML part is sometimes not really true. Plenty of Ajax applications work well without any XML code at all: They merely pass HTML or even plain text back and forth. It’s probably more accurate to have the x stand for XMLHttpRequest, as you’re using that object to retrieve data in the background, thereby not interfering with the display or behavior of the existing page.