What is AJAX?

If you spend a lot of time on the Internet reading up on web technologies you likely have come across the term AJAX. While you might be thinking this might just be the domain of indie web apps and social media sites such as Facebook, there are a lot of good reasons to look at implementing the technology on corporate, sales, customer service and other client facing websites. But first, lets define what it is and what it isn’t.

AJAX stands for Asynchronous JavaScript and XML and is a term that was coined by Jesse James Garrett of Adaptive Path in an article written in 2005. The technologies that make up AJAX have been around for a long time, but the combination of them together is what makes it really a useful tool. The Asynchronous component of AJAX in web browsers dates back to Microsoft’s XMLHttpRequest ActiveX object, which was implemented in Internet Explorer 5, and is now part of every other major browser as a DOM API.

JavaScript is a client side scripting language found in all browsers and is used in everything from simple calculators, animation and form validation to complete desktop-style web applications. The JavaScript component in AJAX talks to the XHMLHttpRequest object in order to send and receive data from the server, and processes and displays that data to the end user. The data that is sent to and from the web servers makes up the X component of AJAX and although it stands for XML in this case, other data formats are used such as JSON, plain text, and HTML.

Benefits

To better understand the benefits of using AJAX in your website let’s look at the typical way a web page loads. An end user will type a URL into the browser or click on a link resulting in an HTTP request being sent out to the server from the browser. The server will return the requested content back to the browser, provided that the content is at the requested address. That HTTP request will include the entire web page consisting of the page title, navigation, page content, sidebars, footers, etc. The end user will then click on another link and so on. Each time this happens, the full page of HTML will be returned. So what if you only want to get a small bit of data, such as an updated stock quote, or a list of news headlines? Well then you have to reload the entire page.

Using AJAX we can send a request for that specific bit of data as a background instead of reloading the entire page. The results of this are that the data being transferred is small therefore the rate of transfer is much quicker. That may seem like a trivial detail, but think of the difference between using a desktop application and a web application: when you are using a desktop application the results of an action are generally expected to be immediate. For example, loading a Microsoft Word document. You click on the file menu, then open, select the file and then the file opens. All of those steps have immediate results and happen within the context of the Word window. You don’t have to reload the application every time you do an action, unlike clicking on a link on a web page. Each time your browser requires data from the server the entire web page is returned.

AJAX provides a faster and more responsive way to deliver that data. You don’t have to wait for the entire page to load, just the specific data content that you actually need to load, resulting in a better user experience. Why is that important? Consider the purpose of your website. Do you sell products online? The more efficient you make it for customers to discover and purchase your products, the higher your conversion rate will be. Is your site for investor relations? Easy access to timely and important information can influence your investors’ decisions and keep them better informed of your corporation’s activities. Is your site a key part of your sales process? You want to make it easy for your potential customers to find the information essential to their purchasing decisions.

Example Use Cases

Here are a few examples of how AJAX can improve your website:

Live Product Search

A traditional search consists of a user typing in a search term followed by the website displaying a search results page. Using AJAX you can provide a live result below the search box, display product titles or categories as the user is typing, allowing them to refine their search faster and even click right on the product they are looking for in the live results. See the search area on www.amazon.ca and www.ebay.ca for an example of this.

Live Stock Information

Display live stock quote information, historical data and news releases. Google Finance displays financial information on a page that constantly updates: http://www.google.ca/finance?q=INDEXNASDAQ%3A.IXIC

Knowledge Base Search

Display possible answers to customers’ questions while they are typing into the search form.  Take a look at how a great hosting company integrates this: http://kb.mediatemple.net/ (tip: start typing in ‘email’)

Quick Product Detail View

Provide a quick overview of product details without displaying an entire page on the product. This allows customers to quickly compare products without having to go back and forth between the product list and the product details. Take a look at how Gap implements this: http://www.gap.com/browse/category.do?cid=15043

Steve Thompson
Web Development Lead