Making a Web Site Cool with AJAX

Updated: January 18, 2008

Amazingly, the answer is essentially yes. Here's an example of what that means. Let's say that your client wants a set of pages to have tabs as one of the "minor" changes. Using AJAX and, for example, the Yahoo AJAX User Interface, it would actually take longer to copy existing content to the new tabbed pages than it would to implement those new tabs.

Welcome to the World of AJAX

Even more amazing: It's all done in simple JavaScript and CSS and in the same way, some AJAX code snippets make it just as easy to programmatically remove unwanted tabs. The secret behind this power is in throwing away the standard metaphor of "fill-in/delete the blanks and submit the form and catch the resulting returned Web page" and replacing it with a new paradigm of "in-place requests" through simple calls to XLMhttpRequest. The resulting calls — accomplished through creative usage of both JavaScript and PHP residing both in your local browser as well as on your server —accomplish the magic.

You can see some real-world examples of AJAX Web pages at two well-known Web sites: Google Maps and Ask. Play around with a map and try dragging it (left- and right-clicks will zoom in or out on the mapped area), or on look at how responsive the query box is when asking a question. You can further notice some AJAX magic via the drop-down box that pops up on Google's main page: It should be obvious from the speed with which the items appear in the box that something out of the ordinary is happening. Note that items on the list change as you type.

You can easily add these and other fancy features to a site that you've built. This is all done for free using the easily downloaded AJAX toolbox from Yahoo. There are zillions of AJAX snippets scattered all over the Web, and generally speaking, they are freely available. Some good ones are available at Be warned, however, that not all of these AJAX snippets are entirely browser-based JavaScript; some require PHP-enabled servers, and some even require ASP.NET server technology. Just make sure to check what is required for these snippets.

Just about every AJAX script will always provide a routine called XMLHttpRequest, the event handler at the center of all AJAX-type code. Basically, this routine is set up to process all the events as a "callback" function, something at the heart of Windows programming and a routine that is translated well into other operating systems and browsers. This is why the majority of properly written AJAX code tends to be transportable across different operating systems and browsers.

Before diving headfirst into the code, you should carefully review the DOM (Document Object Model) thoroughly. Making efficient usage of some of the more intricate aspects of the DOM is paramount to becoming a more-then-competent AJAX programmer. A complete understanding of the DOM leads to truly sophisticated Web pages.

A great DOM reference can be found in the book "Dynamic HTML: The Definitive Reference," a must-read for any serious AJAX programmer or for any wannabe serious AJAX programmer. Another must-have item for your AJAX bookshelf is "Modern Web Design Using Javascript and DOM.

The absolute definition of the request object can be found at W3C's official site. This document requires a very careful and thoughtful read, however: there are a number of gotchas open to interpretation by the unwary, seemingly standard and required practice when dealing with W3C documents.

The AJAX programmer must implement the XMLHttpRequest object so that it is able to handle just about any browser that comes across The Web site, including Internet Explorer (early and recent versions), Firefox, Safari, Opera and others. The code sample at the end of this article will do just that when placed in the standard index or default .htm file:

Note that the Internet Explorer portion of the code is more complicated. One portion has to handle the earlier versions of the browser, while the other takes care of the newer ones. Further note how clean the code for the other browsers has become. This code basically creates a new request handler and assigns a variable, xmlHttp, to it for later processing.

Once a request handler has been created, simple JavaScript inside a basic .htm file will generate events, such as when a key is pressed. Each such event itself has a status that must be checked for completion before being processed further.

A list of status codes and a simple event handler follow:

Status Code Table
State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete

The .open method takes three arguments. The first will indicate whether the standard "GET" or "POST" form submission is used, defining whether the action to be taken will be exposed within the submitted form or through the URL. This determines how the "action" target will handle the eventual event. POST is usually used for sending information to the server, GET for retrieving information. Always put the method type in uppercase.

The second argument indicates the target of the submission (in this case "tryme.asp").

The third argument will indicate whether this is an asynchronous call, indicated by a "TRUE" value, or a synchronous call, indicated by a "FALSE" value. The underlying heart of AJAX is that it just about every call to the target will be asynchronous, not something most Web developers are used to. Generally speaking, a synchronous call will lock up the Web page until it is finished transmitting to the server, the server processes incoming data, then transmits an entire page back. Rather inefficient if you only need to update a single text field, for example.

Basically, a properly constructed AJAX page will allow that, once an field in the form is active, the request function will be called for every key entered into that field or upon selecting an item in a 'SELECT' field.

It is important to understand that he "Request Server" can either be on a remote machine or on the same machine as the browser. The secret of AJAX is that there is no need for a Submit button any longer: Once the page is loaded it can interact with the "Request Server" without having to reload the page. This gives extraordinary flexibility, interactive capabilities and lightning-fast responses.

Note that even though AJAX does not require entire pages be submitted or posted for processing allowing for individual form elements to submit, is still important to check the status return from a submission: A 200 code still means OK, a 404 code still indicates that the target was not found.

The following real-world examples show how useful AJAX can be.

Zoom It

A very interesting snippet from comes Janos Pal Toth and can be found at this page. Cutting to the chase, you can download this script, upload that to your server and access it. You can see an example at this site. Once you are running it, you'll see a magnifying rectangle in each image. Left-click and drag on the magnifier to increase/decrease its size. Right- click and drag to increase/decrease the magnification factor. As you'll see when you download the entire script it's trivial to replace the "test.jpg" image with one of your own — on your own server, of course!

Instant Thumbnails

Another interesting AJAX script that can help demonstrate the versatility of AJAX can be found at Highslide JS. This AJAX snippet provides for lightning- fast thumbnail-to-full-size views of JPEGs, where the full-size view is draggable and is compliant with CSS — think custom borders — allowing for such elements as in-depth and potentially active captions. This is all entirely in JavaScript and using standard HTML and DHTML combined with CSS — sort of cool in its own right.


Probably one of the easiest and most impressive AJAX enhancements both to show and implement is the ability to include a simple way to show the so-called "accordion effect" — a means for comfortably showing more information than the screen real estate would normally allow. This trick can be easily seen in the directory at this site.

Featured Research
  • Empty the Airport Lounge

    When it comes to budgeting, travel time and expenses typically make up one of the larger allocations for growing companies. But did you know that there was an alternative that could save you time, money, and spare your employees jet-lag? Businesses that utilize video conferencing see a 30% reduction in travel costs. And while you might think your employees will get upset about the loss of flight status, only 15% are worried about the reduced travel and their frequent flier status. more

  • 10 Reasons to Invest in Video Conferencing

    Have you been on the fence about implementing a video conferencing solution for your business? Not quite sure if your employees will utilize it or are concerned about the costs being too high? The modern workforce is adapting and evolving with more and more employees working remotely, it is essential that they have the tools to be able to communicate effectively. more

  • Checklist for Setting Up an In-House Contact Center

    As customer service continues to become the most important competitor differentiator, can you honestly state that your business ranks among the best in your industry? 93% of organizations expect that contact volume will either remain constant or increase over the next two years. It is absolutely essential that you have a contact center that has been set up for success. more

  • 2017 Business Intelligence Trends

    It's long been thought that business intelligence (BI) could only be utilized by highly trained analysts and was therefore unattainable for most businesses. However, advancements in BI have made it so that everyone can utilize BI solutions to help shape business decisions and drive companies bottom lines. more

  • Your Phone System and Your Bottom Line

    Businesses have been using phones to drive increases to their bottom lines for almost a century now. Telephony, much like the rest of the business world, has seen drastic changes with the increase in technological advancement. Voice Over Internet Protocol (VoIP), has enabled companies to connect with consumers at levels that have been seen as unheard of before. And trust us when we say this, it is doing wonders for the bottom line. more