MON(FX)

Ajax Primer [Revived]

If you haven’t tried the ‘Client Login’ link in my header, give it a shot now. If your browser is up to date, you should see the whole page slide down to reveal a friendly login box.

This effect was achieved - you guessed it - with the power of Ajax. Before this site, I had seen many dynamic Web 2.0 sites that took advantage of Ajax but I didn’t really understand how it worked or the benefits it poised.

So just what is Ajax?

Well, to start with, Ajax stands for ‘Asynchronous Javascript and XML.’ What this means for the simple designer is that Ajax uses javascript technology to interact with the server behind the scenes, cutting down processing time and increasing usability. Ajax applications may include simple show/hide content frames like the example above, nifty drag-and-drop effects or more importantly, dynamically loading content into a DIV or IFrame without having to refresh the site.

This last trick is accomplished using XMLHttpRequest, a simple object that allows XML data to be sent and recieved behind the scenes. As you can tell, this opens the Pandoras box to an immense amount of dynamic new interfaces and content retrieval systems, improving on one of the most important factors of a website - usability.

Are there any downsides?

Just like how every force in the universe has an equal and opposite force, for every pro there must be a con. Right? Well, pseudo-philosophical rhetoric aside, Ajax might be a savior for one site and an anti-Christ for another. You should take precaution when using Ajax and not forget it’s primary usage - to aid in the efficiency and usability of the site.

When I first tried playing around with Ajax on my site, I found a couple of ways to achieve the effect I was after, but many were sluggish or slow when viewed in Internet Explorer. As much as I hate IE, browser compatibility is definitely something to consider when you develop a site. You don’t want to leave any potential visitors (or clients!) in the dark.

The main players in the world of ready-made Ajax Javascript libraries right now are Script.aculo.us and moo.fx. The Script.aculo.us collection uses the Prototype Javascript library, the scriptaculous.js javascript file and a couple of other files that work together to produce a very stable and large number of Ajax effects.

Script.aculo.us works and looks great on most browsers, but the total file size of just prototype.js alone exceeds 50kb. For anyone who has any experience with web optimization, you know that an added 50kb file can easily make a site that loads normally in 3-4 seconds take almost 10 more seconds for slow connections. Unfortunately, most of the world is still using connections with 56kbps or less and you can lose a considerable amount of traffic with a slow site. But that’s another topic to discuss.

This is where moo.fx comes into play. Mad4Milk’s moo.fx was developed exactly for this reason - it is essentially a stripped version of the Prototype framework and a couple of other scripts that aid in creating the effects. And the total file size? All of the files are a combined 12kb! As far as effects go, they are surely limited (to an extent I’m not sure of yet), but the popular ones that you’ll most likely use are offered by Prototype.lite.

So what’re you waiting for? Ajax is a fairly new technology that is pivotal in the new internet - Web 2.0 (as O’Reilly likes to call it). Take that much awaited redesign idea of yours and hop on the Ajax boat while you’re at it!

Here are a few links to help you get on the way…

• Wikipedia: Ajax
• Script.aculo.us
• Mad4Milk’s moo.fx
• Site Optimization Tool

Next up, I’m diving into Ruby on Rails headfirst!