What is Ajax (and what is it not)? Part 1 of 3

Posted in Accessibility, Ajax / Scripting, Resources, Web Standards

AjaxLately I’ve noticed a huge variance in the usage of the term Ajax. So I’ve decided to take some time to explore the topic and share my findings in a few blog posts. In this first post, I’d like to share some info from the original blog post that defined and popularized the new interaction design approach. I’ll include some historical details, various definitions, and even a few technical bits and pieces thrown in for good measure.

In the next post, I’m going to create a development sandbox to jump in and have fun implementing some popular examples in a controlled environment. I’m hoping to create a repository for my own future use as well as document competency in this area of web development. I’m not planning to reinvent the wheel here… there are a ton of great resources already available. I’m going to poke around and see what’s out there and then put together my own simple demos. Admittedly, some of the demos will be true Ajax (according to the original definition) and some will follow the more general purpose definition which I’ll call “animation effects” created with a combination of JavaScript, CSS, and other technologies. There are some great JavaScript frameworks, such as jQuery, Prototype, YUI, and Dojo, that dramatically simplify Ajax (and pseudo-Ajax) development. I’ll include a variety of examples using some of those frameworks as well.

In the last post, I’d like to explore the topic of Ajax accessibility. Is it true that Ajax creates websites that can’t be accessed by people with disabilities? Does Ajax hurt your website’s search engine ranking? Can Ajax be implemented in an accessible way? I’m not completely sure, but I’m hoping to find out! The Web Accessibility Initiative has created a development suite called Accessible Rich Internet Applications (WAI-ARIA) to help with accessible Ajax solutions. I’m really excited about ARIA’s possibilities, so I’ll spend some time exploring it as well.

Before we get into the specifics, let’s go back to the beginning, in early 2005, and examine Ajax’s humble beginnings. As described in Jesse James Garrett‘s original article Ajax: A New Approach to Web Applications, Ajax isn’t a downloadable component, browser plugin, or desktop application add-on. It’s a term used to describe “several technologies, each flourishing in its own right, coming together in powerful new ways.” Originally, Ajax was shorthand for “Asynchronous JavaScript + XML”. Soon after, it became apparent that it doesn’t necessarily need to include XML.

Ajax includes a few key ingredients:

  • standards-based presentation (XHTML, CSS)
  • dynamic display and interaction (Document Object Model)
  • data interchange and manipulation (XML, XSLT)
  • asynchronous data retrieval (XMLHttpRequest, also called XHR)
  • JavaScript to bring everything together

It’s the fourth item, asynchronous data retrieval, that makes it truly unique and exciting. Here’s an easier way to think about it: “grabbing data from the server and displaying it on the web page without refreshing the browser.” It’s a more seamless approach to present content to the viewer since everything else in the browser window stays put while a small area updates per the viewer’s mouse click or key press. You may have experienced this before without knowing that it used Ajax. Some popular websites that include extensive use of Ajax include Google Maps, Flickr, and Gmail.Using the less strict definition — not including the hidden round trip to the server — you may have seen things like accordion navigation, sortable tables, fading yellow highlights, and photo galleries. They don’t necessarily use Ajax, but I’m including them here since they’re so prevalent in web development today. I think you know what I mean… that ubiquitous “Web 2.0” look and feel on many social networking sites (including the glossy, lickable buttons and child-friendly rounded corners).

I think that’s enough introduction on Ajax for now. In the next post we’ll take a closer look at some individual Ajax elements and how they can be used to enhance a website.