Thursday, November 24th, 2005

AHAH: Asychronous HTML and HTTP

Category: Ajax, Programming

<p>The Microformats people have been talking about a minimalist subset of Ajax: Asychronous HTML and HTTP (AHAH). In AHAH, HTML snippets are injected directly onto existing elements. There’s also a tiny library function available that accepts two arguments: a page element and a URL for the HTML snippet.

In Kevin Marks’ demo, “change” is a run-of-the-mill div we’re going to update:

<div id=”change”>All this will pass</div>

And here’s how we turn “change” into a little star:

jah(‘star.html’,'change’);

Yes, innerHTML under the covers.

XML has no monopoly on Ajax (despite the name!), and a really, really, simple approach like AHAH might be the best thing for some Ajax applications.

Posted by Michael Mahemoff at 3:25 pm
14 Comments

++++-
4 rating from 24 votes

14 Comments »

Comments feed

How about asking browser developers to support client-side includes?
<div src=”star.html” />

Comment by Mike D — November 24, 2005

This is only “DHTML”,is not “AJAX”.
:)

Comment by ahong — November 24, 2005

A shame it doesn’t implement browser history solutions or bookmarking. Then this truly would be something.

Comment by John Vilsack — November 24, 2005

I think the biggest problem with AHAH is that innerHTML is really only well supported under the HTML doctype and not under the strict XHTML (as XML) doctype. But this is exactly how I do it. I pregenerate the HTML UI on the server side and then feed it to the client via AHAH. (I love that acronym!) I also get a kick how it was “discovered” this year… Can I claim prior art? :)

Comment by Jonathan Snook — November 24, 2005

Is this not essentially AJAX?
Don’t see how it is any lighter or user friendly…

Comment by Roark — November 25, 2005

This ‘technique’ has been used for ages.
I don’t call it Ahah, I simply call it Ajax.
After all, responseText is as much a XMLHttpRequest property as responseXML is, isn’t it..

Comment by M. Dellen — November 25, 2005

It *IS* Ajax to a degree, only because most people consider “DHTML” a dirty word because of the browser-hell days of 4.0.

We’ve used this technique in a webapp for a couple of years now. There are javascript libraries out there that will parse html and generate and install DOM objects for browsers without innerHTML support, but I can’t recall where they are. Our “target” is IE (though we use Firefox more in development because javascript debugging is better) so we’ve kept innerHTML.

The real trick is to encapsulate the javascript entirely. We’ve embedded this technique in a few JSP taglibs so the other developers more familiar with html and java but not javascript can still use this with ease.

Comment by Joe Shelby — November 25, 2005

Impressive stuff!

Comment by Allan R. — November 25, 2005

I had this exact same idea. I have had bad experiences with DHTML/JavaScript, but I also see the advantages of AJAX. Using innerHTML seemed like a low-risk way of implementing AJAX. I didn’t know there was a term for it though.

A nice side-effect is that it wouldn’t be too hard to implement it in a way that allowed fallback to standard HTTP request/reponse model (although that would require maintaining full state [i.e. HTML] on server side).

Comment by Michael Slattery — November 25, 2005

Useful!

Comment by Azer Koçulu — December 4, 2005

Hi guys, I’ve developed a first example of degradable AHAH. Please visit it :

(1). http://www.gizax.it/experiments/AHAH/degradabile/articolo_degradabile.html

you can try it with and without enabled Javascript

Bye Daniele

Comment by Daniele Florio — December 9, 2005

Degradable liveSearch in AHAH

http://www.gizax.it/experiments/AHAH/degradabile/test/liveSearch.html

Daniele

Comment by Daniele Florio — December 12, 2005

>Hi guys, I’ve developed a first example of
>degradable AHAH. Please visit it :
>http://www.gizax.it/experiments/AHAH/degradabile/articolo_degradabile.html
>you can try it with and without enabled Javascript

I have a better one.
Login component: http://www.superinterface.com/jspcontrols/login-fragment-ajax/index.jsp
Tab panel: http://www.superinterface.com/jspcontrols/tabcontrol/index.jsp

Try turning off Javascript at any moment and see how the components behave. Unlike Daniele’s example, in my case address bar is not polluted with query parameters, and user experience does not change. You need to click Back button only once to leave the page.

See the description here: http://jspcontrols.sourceforge.net/

Comment by Michael Jouravlev — December 26, 2005

>Hi guys, I’ve developed a first example of
>degradable AHAH.

A more elegant way of doing this…

a href="file.ext" onclick="jah(this.href,'container');return false;"

Comment by Walter Wlodarski — March 7, 2006

Leave a comment

You must be logged in to post a comment.