AHAH, Asychronous HTML and HTTP

Written by on November 29, 2005 in AHAH - 16 Comments

AJAX ? AHAH ! sounds funny, but AHAH now stands for Asychronous HTML and HTTP, a technique for dynamically updating web pages using JavaScript, involving usage of XMLHTTPRequest to retrieve (X)HTML fragments which are then inserted directly into the web page, whence they can be styled using CSS. Nothing new until now, except that inspite of retreiving XML, AHAH stands for retreiving (X)HTML.

AHAH is intended to be a much simpler way to do web development than AJAX : “Asynchronous JavaScript and XML.” Strictly speaking, AHAH can be considered a subset of AJAX, since (X)HTML is just a special kind of XML.

The main reasons that made AHAH exists :

  • The lack of custom XML schemas dramatically reduces design time
  • AHAH can trivially reuse existing HTML pages, avoiding the need for a custom web service
  • All data transport is done via browser-friendly HTML, easing debugging and testing
  • The HTML is designed to be directly embedded in the page’s DOM, eliminating the need for parsing
  • As HTML, designers can format it using CSS, rather than programmers having to do XSLT transforms
  • Processing is all done on the server, so the client-side programming is essentiall nil (moving opaque bits)

This is a sample code for sending an AHAH request


function ahah(url,target) {
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}

Then to receive an AHAH request


function ahahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ahah error:n" +
req.statusText;
}
}
}

I have added a new category for AHAH, also called JAH, for Just Asynchronous HTML, which was introduced on May 12, 2005 by Kevin Marks. The term “AHAH” was proposed by Ernest Prabhakar during the 2005 Web 2.0 conference, and later adopted as part of the REST-Enabled XHTML microformat for web services. AHAH, now I understand better, did you ?

Source Microformats

16 Comments on "AHAH, Asychronous HTML and HTTP"

  1. Daniele Florio December 12, 2005 at 1:02 pm · Reply

    Hi guys, I want to inform you, that I have developed a Degradable liveSearch in AHAH. It works with and without javascript enabled. Please visit it to :
    Degradable liveSearch (http://www.gizax.it/experiments/AHAH/degradabile/test/liveSearch.html)
    regards
    Daniele

  2. Greg January 1, 2006 at 12:22 pm · Reply

    AHAH looks like a quick and easy method for updating small webpage areas. Just for fun, I used it for the “total visits” counter here: http://www.greg.ch/flash (open a site and watch the number of visits change).

  3. Ivan January 26, 2006 at 6:21 pm · Reply

    You’ve got to be fucking kidding right?
    What’s next? A subset of AJAX that updates CSS? ACAH? sigh…
    PS: Great articles here, but this one…

  4. Daniele Florio May 19, 2006 at 11:07 am · Reply

    Hi guys,
    I’d like to show you my new experimental project:
    AHAH section
    [1]. http://www.gizax.it/ahahsection/

  5. Dexter July 24, 2006 at 4:29 am · Reply

    First, I tought it was a joke, but I realized that none of my application uses XML. I like the approach of AHAH for simple app. It’s light, no bloated prototype or other lib which I don’t need some fancy thing. Below is my AHAH creation. This page is all AHAH.
    http://www.ex-designz.net/englishlyrics/default.asp
    Dexter
    http://www.ex-designz.net

  6. Troels Wittrup October 6, 2006 at 3:51 pm · Reply

    OutPost is an AHAH/Hijax framework.
    See demo here: http://hijax.net/Demo

  7. Troels Wittrup October 6, 2006 at 3:55 pm · Reply

    OutPost is an AHAH/Hijax Framework.
    Try the demo: http://hijax.net/Demo

  8. si-rus October 27, 2007 at 7:30 am · Reply

    Hi gays,
    I am created very powerfull AHAH library
    Advantages:
    1) multithread
    2) full support GET and POST request
    3) separate history for each thread (for loading of a web pages)
    4) parsing and execution of script, link and style tags from loaded content
    5) upload file without reload
    6) preprocessor data response
    7) history for “Back” & “Forward” buttons
    8) direct link for AJAX request of HTML
    9) auto-filter of anchors – automatic trasformation to AJAX
    10) content trigger
    11) TITLE processing
    12) trap for document.write for every thread
    13) accelerate download of scripts – parallel download with serial apply
    14) list of support counters : Google Analytics, Rating@Mail.ru, and other
    15) support event onload & onunload of tag for every thread
    16) Opera bug fixed where setTimeout & setInterval in use Back/Forward AJAX history – by David Bloom (futuramagmail.com, add a “@” before gmail.com)
    17) two models request of HTML pages – one-to-one & one-to-many
    18) on & off option for correction relative path (href & src)
    19) capture & execute window.onload event
    20) FLY AJAX – transformation of content to AJAX on fly
    AHAH – more powefull & more difficult than only AJAX

  9. si-rus October 27, 2007 at 7:34 am · Reply

    This is link for previous post
    http://www.fullajax.ru

  10. Me December 19, 2007 at 7:42 pm · Reply

    Great si-ru – but it’s all in Russian. Useless. Any plans on writing your information in English??

  11. Anonymous August 20, 2008 at 10:55 pm · Reply

    Necesito ayuda para ver los demos de las librer

  12. Anonymous August 20, 2008 at 10:55 pm · Reply

    Necesito ayuda para ver los demos de las librer

  13. Json February 9, 2009 at 5:25 pm · Reply

    How do I convert this into an ONLOAD instead?
    1

  14. Json February 9, 2009 at 5:26 pm · Reply

    How do I convert this into an ONLOAD instead?
    href = “javascript:jah(‘prolist.php?pageNum_rsprojects=0′,’prolist’);”

  15. Edson Hilios April 17, 2009 at 9:24 pm · Reply

    Great article! I love json, but for template issues ahah is the best, with mvc i can make a partial and retrieve with ahah in any case i need, this is great if you are doing DRY on your project.
    Thanks for explaning the naming convention.

  16. Sohbet July 13, 2010 at 1:13 pm · Reply

    Hmm.. href = “javascript:jah(‘prolist.php?pageNum_rsprojects=0′,’prolist’);”
    ok.

Leave a Comment