Raw Thought

by Aaron Swartz

A Brief History of Ajax

New technology quickly becomes so pervasive that it’s sometimes hard to remember what things were like before it. The latest example of this in miniature is the technique known as Ajax, which has become so widespread that it’s often thought that the technique has been around practically forever.

In some ways it has. During the first big stretch of browser innovation, Netscape added a feature known as LiveScript, which allowed people to put small scripts in web pages so that they could continue to do things after you’d downloaded them. One early example was the Netscape form system, which would tell you if you’d entered an invalid value for a field as soon as you entered it, instead of after you tried to submit the form to the server.

LiveScript became JavaScript and grew more powerful, leading to a technique known as Dynamic HTML, which was typically used to make things fly around the screen and change around in response to user input. Doing anything serious with Dynamic HTML was painful, however, because all the major browsers implemented its pieces slightly differently.

Shortly before web development died out, in early versions of Mozilla, Netscape showed a new kind of technique. I don’t think it ever had a name, but we could call it Dynamic XML. The most vivid example I remember seeing was a mockup of an Amazon.com search result. The webpage looked just like a typical Amazon.com search result page, but instead of being written in HTML it was a piece of XML data which was then rendered for the user by a piece of JavaScript. The cool part was that this meant the rendering could be changed on the fly — there were a bunch of buttons that would allow you to sort the books in different ways and have them display using different schemes.

Shortly thereafter the bubble burst and web development crashed. Not, however, before Microsoft added a little-known function call named XMLHttpRequest to IE5. Mozilla quickly followed suit and, while nobody I know used it, the function stayed there, just waiting to be taken advantage of.

XMLHttpRequest allowed the JavaScript inside web pages to do something they could never really do before: get more data.1 Before, all the data either had to be sent with the web page. If you wanted more data or new data, you had to grab another web page. The JavaScript inside web pages couldn’t talk to the outside world. XMLHttpRequest changed that, allowing web pages to get more data from the server whenever they pleased.

Google was apparently the first to realize what a sea change this was. With Gmail and Google Maps, they built applications that took advantage of this to provide a user interface that was much more like a web application. (The startup Oddpost, bought by Yahoo, actually predated this but their software was for-pay and so they didn’t receive as much attention.)

With Gmail, for example, the application is continually asking the server if there’s new email. If there is, then it live updates the page, it doesn’t make you download a new one. And Google Maps lets you drag a map around and, as you do so, automatically downloads the parts of it you want to look at inline, without making you wait for a whole new page to download.

Jesse James Garrett of Adaptive Path described this new tactic as Ajax (Asynchronous Javascript And XML) in an essay and the term immediately took off. Everyone began using the technique in their own software and JavaScript toolkits sprung up to make doing so even easier.

And the rest is future history.

Both systems were relatively ill-supported by browsers in my experience. They were, after all, hacks. So while they both seemed extremely cool (KnowNow, in particular, had an awesome demo that allowed for a WYSIWYG SubEthaEdit-style live collaboration session in a browser), they never really took off.

Now apparently there is another technique, which I was unaware of, that involved changing the URL of an iframe to load new JavaScript. I’m not sure why this technique didn’t quite take off. While Google Maps apparently used it (and Oddpost probably did as well), I don’t know of any other major users.


  1. As my commenters point out — and as I well knew, but momentarily forgotten — this isn’t really true. Before XMLHttpRequest, people used a trick of not closing the connection to the server. The server would keep adding more and more to the page, never saying it had finished downloading. Ka-Ping Yee used this technique to make a real-time chat system based on an animated GIF. And the ill-fated startup KnowNow used a similar technique with JavaScript to allow for live-updating pages. 

You should follow me on twitter here.

December 22, 2005

Comments

That’s not quite right. There’s a rich history of IE only apps fetching more data from the server. Most used a hidden IFrame to simulate xmlhttprequest (I think that’s how KnowNow did it, there were a number of web desktop companies around 2000 that were doing those tricks). To the best of my knowledge, Google Maps used xslt parsing in the browser and iframes, not xmlhttprequest, a pretty circa 2001 set of browser tricks.

The real sea change, believe it or not, was Orkut. From what I recall, Orkut was the first to use xmlhttprequest for something “functional”, if you call attributing stars to your friends functional.

Backing up Aaron’s point though, to give an idea of how useless people thought the xmlhttprequest was, it wasn’t until Orkut that there was a real cross-browser reason to have implemented that command.

I back that up with a post from dave hyatt announcing Safari 1.2 in feb 04.

http://weblogs.mozillazine.org/hyatt/archives/2004_02.html

I wonder if anyone at google might have tipped him off that xmlhttprequest might be important for more than rating your friends ;-) Gmail was announced just 2 months later (although safari support came later)

Saying “”XMLHttpRequest is now supported, which means that those of you subscribed to Orkut can now rate your friends. ;)” seems a off the mark considering today only Brazilians give their friend’s stars in orkut, and millions of dollars are riding on the AJAX wave now.

-jamie

posted by jamie scheinblum on December 22, 2005 #

Asynchronous webpages have a richer and longer history than the part you mention here. Though there are probably others, KnowNow is the pioneer most familiar to me in this realm; they had interactive HTML applications in around 2000 or 2001.

“XMLHttpRequest allowed the JavaScript inside web pages to do something they could never do before: get more data.”

That’s not true. There have always been a variety of methods to get more data. In 1999, i discovered a way to get more data pushed from the server even without any Javascript or automatic reloading. Even on a page of pure HTML, one can achieve this with a progressively rendered animated GIF; http://zesty.ca/chat/ is a simple chat program based on this idea. Perhaps it wasn’t so practical, but i thought it was pretty neat, and that we’d be able to play interactive board games using this technique. Maybe someone will yet think of a useful way to apply it today.

posted by Ping on December 22, 2005 #

I’m not a Microsoft apologist but I think credit has to go to Outlook Web Access as the first major use of techniques now referred to as Ajax. Unfortunately, you really need to try it to see how rich of an interface it is. Here’s a demo: https://www.microsoft.com/seminar/shared/asp/view.asp?url=/Seminar/en/20031218TNT1-96d3/manifest.xml&rate=0

But Microsoft totally dropped the ball with the best version only supporting Win IE. For me, cross-platform is one of the key attributes of Ajax.

posted by pwb on December 22, 2005 #

a9.com use the iframe trick. So do a lot of other sites - it has a big benefit over XMLHttpRequest in that the browser back button can be used to navigate back through hidden iframe changes, so if you’re smart you can use the trick to get the back button to work more or less as the user expects it to.

posted by Simon Willison on December 24, 2005 #

async javascript and XML were here long before gmail and gmaps… im memory serves correctly, msft has had a pretty rich, asynchronous version of outlook web access available since at least 98.

in 99, LivePerson released a hosted customer service chat module that stores could add to their websites; it’s biggest selling point was how well it worked on all browsers, with no plugins or downloads. It was all javascript, mostly using the iFrame approach (I know, i was lead dev).

If you want to credit google with anything, credit them with standing

posted by chris hollander on December 24, 2005 #

I am dissapointed to learn that Al Gore had nothing to do with AJAX … can you please double check ?

posted by Rubber Duck on December 25, 2005 #

OWA wasn’t just a rich asynchronous version of outlook — it was the reason XmlHttpRequest was invented and added to a browser (in this case, IE only, of course…)

posted by dbt on December 29, 2005 #

You could always do remote scripting using JS around a Java class in the MS world since at least 3-4 years ago…

posted by joe_akture on December 29, 2005 #

Another way is to append a new script element to the body of a page. Internet explorer doesn’t like that way though.

posted by Greg on December 29, 2005 #

Microsoft’s version is not even called XMLHttpRequest — for it exists long before Mozilla’s own implementation. In fact, Moz’s version was implemented modeling after IE’s ActiveX object sometime back in 2002.

And the usage of XMLHttpRequest has been there way before Google. OWA was an example. The Python app server I worked on used it to do XML-RPC calls back in 2002, and that was only because I saw how other IE-only webapps did it and stole the code :)

Somehow everyone is now praising Google for their “innovation”.

posted by Scott Yang on January 4, 2006 #

So: As far as I can tell there is no particular support for it in web.py. Are there plans to add it? Or is the approach to use a separate library targeted to XMLHTTPRequest?

posted by cuetip on January 4, 2006 #

What’s the benefit to putting any Ajax-specific stuff on the server side? In fact, I don’t think web.py even has any HTML-specific stuff! It might be a little easier to program if there’s direct Python integration like Nevow does, but it’s not worth the user experience hit.

posted by Aaron Swartz on January 4, 2006 #

Is Ajax is really safe. Because it does all processing on client side.

posted by Sangram Gawali on May 4, 2006 #

Does anyone realise the real beauty of google maps:- the map data? I imagine the geocoding and server technology behind that would have taken far more work and innovation then the user interface - not to mention collecting all the data together in the first place. Not many blogs seem to mention that.

posted by Markavian on July 6, 2006 #

That’s because Google bought the map data from someone else, as you can see in the lower right hand corner of every map.

posted by Aaron Swartz on July 28, 2006 #

who is the one that made up ajax

posted by kassy on February 1, 2007 #

I have been using AJAX in intranet/internet develoment since the early 90’s. A major implimentation was the North Yorkshire Police’s intranet. All the AJAX features were there, we just didn’t call it AJAX.

While Microsoft and Google should take credit for making AJAX a broadly known system, poor old web dev pro’s have been the people “really” leading this change!

posted by George on February 11, 2007 #

Greetings,

     Through best practices of a pure "Ajax service" I have

developed a manner for implementing history style behavior in Ajax applications. It involves a new HTML Microformat and doesn’t require polling, two features I thought were particularly appealing. If you’re interested in a method for handling the infamous back/forward buttons in Ajax applications the full article can be read here.

http://positionabsolute.net/blog/2007/07/javascript-history-service.php

Cheers, Matt

posted by Matt Foster on July 24, 2007 #

i am using ajax since last 2 years for developing WEB applications , but here i stuck up .. how to solve the Issue of History maintanance while using AJAX ! well i have tried iframe , even the issue is resolved … but is there any other way to create history by using javascript ..instead of using iFrame .

Amit Aher

posted by Amit A . Aher on August 14, 2007 #

You can also send comments by email.

Name
Site
Email (only used for direct replies)
Comments may be edited for length and content.

Powered by theinfo.org.