AHAH - Ajax Lite?
Thanks are due to David Hansson, Kevin Marks and Ernest Prabhakar for the original article at microformats.org that inspired this tutorial
As described elsewhere on this site, we can return server data to our Ajax application as text (using the responseText property of our XMLHTTPRequest call) or as XML (using the responseXML call).
In the many situations where we simply wish to update the content of HTML elements on our page, it becomes difficult to justify the added complication of using XML. Using the responseText property, we can persuade our server to return properly-formatted (X)HTML directly into the page, where it can be styled and presented via standard CSS techniques. The need for XML parsing, XSLT transformations and the like, all disappear.
This technique is coming to be known as AHAH (Asynchronous HTML and HTTP) and seems ideal as a lightweight, easy-to-implement method for building Ajax-style applications whose sole purpose is to run in a browser and update an HTML page.
The mathods for forming the XMLHTTPRequest have been covered in some detail elsewhere on this site, as have the means of sending the XMLHTTPRequest. Now let's examine how those two functions may be combined into our AHAH call:
<![CDATA[
function callAHAH(url, pageElement, callMessage, errorMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest();
/* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
/* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
/* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange
= function() {responseAHAH(pageElement, errorMessage);};
req.open("GET",url,true);
req.send(null);
}
]]>
Here we combine the creation of the XMLHTTPRequest object and the sending of the request into a single Javascript function, to which we pass four parameters: url, the address of the server routine we wish to call; pageElement, the id of the HTML element we wish to update; callMessage, some text to show in pageElement while the request is being carried out; and finally errorMessage, a message to display if our request should fail for any reason.
As can be seen from the code, our function calls a response handler called responseAHAH. To this we pass as arguments the identity of the page element we want to update, and the error message to display should our call fail. Let's look at the code for this function:
<![CDATA[
function responseAHAH(pageElement, errorMessage) {
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML
= output;
} else {
document.getElementById(pageElement).innerHTML
= errorMessage+"\n"+responseText;
}
}
}
]]>
We can combine these two functions into a remote javascript file, and simply link it to our application, making AHAH very easy to use, and even to retro-fit into legacy HTML pages.
Before using any software from this site, please see the Terms
|
