AHAH - new buzz word

With courtesy ajax magazine
AHAH (Asychronous HTML and HTTP) is the result of applying both of those principles to the incredibly Web 2.0 buzzworthy AJAX. Strictly speaking, AHAH is simply a subset of AJAX, albeit a subset that openly de-emphasizes the X in AJAX.



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

Comments

Popular Posts