6 Things You Can Only Do In Ajax

by barce on July 18, 2006

This article was originally slated to be published in Webmonkey. I opted against having it published in favor of a more technical and useful article on caching in order to improve web server performance. But Webmonkey got bought up by Conde Nast. Here’s the article that was slated to be published, but is now published here:

Hidden beneath many of the so-called Web 2.0 websites is Ajax.

What’s Ajax? Ajax stands for Asynchronous Javascript and XML. It’s something of a misnomer since XML isn’t necessary for making a web page with Ajax effects on them. Also, the “asynchronous” in Ajax is misleading. Synchronous systems are controlled by a central clock. It’s really hard to see if there ever really was such a thing as synchronous Javascript.

Rather than looking at the words in the acronym, it’s best to look at the websites that use Ajax techniques.

You can check out the demos of Ajax techniques at Scriptaculous.

Also, if you take a look at GMail, Flickr, GoogleMaps, Ma.gnolia and the 37signals set of web applications, you’ll notice four technologies that stand out to make Ajax:

1) XMLHttpRequest — the little Javascript hack that makes “asynchronous Javascript” possible. This object will exchange data with a web server so that your web page doesn’t have to reload. Lots of great Javascript jockeys took a lot of time and care to make Javascript libraries so that you don’t have to deal with the internals too much. But for those of you that like the path of pain or hate hearing RTFM, the working draft can be found at the w3c’s.

A great Javascript library for using Ajax techniques is prototype.

2) XML — you can use xml to transfer data between your web page and the web server, but if you dig deep into the source code of certain sites that use Ajax techniques you’ll notice that

3) The DOM — the Document Object Model allows you to uniquely identify different parts of a web page so that you can use javascript to modify those different parts.

4) CSS – Cascading Style Sheets are a powerful way to apply site wide changes to different (X)HTML tags.

By combining these four technologies together, you can do pretty cool, neat effects on a web page that you’d be hard pressed to do with any other technology. In fact, I’m so confident that you’d use Ajax instead of any other technology that I’ve come up with a list of 6 things that you can only do in Ajax. You might want to try it using a Java Applet, or Flash. I’d be curious to hear what happens. Flash and Flex is catching up pretty quickly.

For previous webmonkey articles to get you up to speed on Ajax, I highly recommend “Ajax: It’s Good for what Rails You” by Paul Adams.

This article will show you 6 things that you can only do with Ajax:

  1. Notifications w/o Reload
  2. Lightbox & Thickbox
  3. AjaxTerm
  4. Livesearch
  5. Edit in place w/Ajax
  6. Flexstore on Rails

1) Look Ma, No Hands: Notifications without Reload

By using javascript’s setTimeout function, you can update a web page without having to re-load. A great example of this can be found in GMail, where you’re automatically notified if you’ve got mail without having to reload a page. No more pressing that check mail like a lab rat, unless you want to.

Also there are an array of chat programs that use Ajax techniques.

http://ajaxian.com/by/topic/chat/

If you’re familiar with trying to get a java chat applet to work on your OS X or Linux browser, you’ll be glad that Ajax is around.

2) Just dim the lights a bit to get us in the mood for… coding: Lightbox Gone Wild & Thickbox

Lightbox by Lokesh Dhakar allowed you to create a photo gallery where you could click on a thumbnail, pull up a medium to large sized photo, and dim everything else in the background. It’s a pretty cool effect that you can check out on the demo page.

Now what happens when you Ajax-ify lightbox? You can find out at the Lightbox Gone Wild demo:

http://particletree.com/examples/lightbox/

You can also find out at the thickbox demo page, too: http://jquery.com/demo/thickbox/ You can not only bring up pictures, but you can bring up text & forms that were called using the XMLHTTPRequest object, and have those show up brightly in contrast to a dim background. Moreover, you can have the forms post data to a webserver triggering any sort of CRUD (create, read, update, delete) function on your favorite database.

3) Is Ajax just some shell game?

Yes, it is when you’ve got a tool like AjaxTerm.

Don’t you just hate it when you’re at a public terminal and don’t have access to a command-line shell?

AjaxTerm allows you to turn your browser into a unix command-line shell. In the case of the picture below, I’m using irssi which was invoked in bash:

Ajax Term Example

This is definitely the coolest use of Ajax I’ve run into so far.

You can set up your PC to have the AjaxTerm script written in Python to run over SSL. If you’re at an internet cafe and without your laptop, you can point your browser to the IP address of your PC, and voila, a shell for logging in.

4) Don’t get nervous all because you’re live.

With livesearch you can type in letters and get your search results right away without having to hit the submit button.

You can find an example of livesearch for Amazon products at MyBigRiver.com.

But if you hate commercialism, you can check out a BitFlux demo. Try typing in ‘php.’

For a tutorial on how to implement livesearch check out php magazine: http://ajax.phpmagazine.net/2006/02/explore_amazon_web_services_wi.html For the latest news on livesearch, check out Ajaxian.

5) Flickr’s Ajax based, Edit-in-place functionality is not only cool but it can save a media intern hours when it comes to updating entry names.

Instead of waiting for the browser to re-load each time you update a picture’s name, you can just move on to the next picture and update it’s name.

A great tutorial for edit-in-place can be found at 24ways: 24ways.org/advent/edit-in-place-with-ajax

6) So does all this Ajax mean that Flash is dead? Not really.

In fact Christoph Coenraets came out with a hybrid of a shopping cart that’s Ajax and Flash. Time to flex those coding muscles. The tutorial is on his website. With Flex on Rails you can use a slider to control which search results come up. You can get realtime results.

Are there only 6 things that you can only do in Ajax? Or that you’d rather do in Ajax? I hope these 6 great ideas by some great web developers get you brainstorming about more new ideas.

There’s a fabulous list of Web 2.0 related sites that just might be using Ajax.

The beauty of the Web is that if you see something that isn’t Ajax’d you can just go out there and code it thanks to the resources on this website as well as the Internet.

{ 2 comments… read them below or add one }

Eric July 18, 2006 at 11:43 pm

Nice work….
As a designer I admit to have fallen BEHIND in my coding knowledge…this is very helpful for something I have just recently been hearing about (on NoEnd)!
Thx,
eM

Amit September 20, 2006 at 1:15 am

Cool

Leave a Comment

Previous post:

Next post: