simple AHAH (Asynchronous HTML And HTTP) library

Just thought of sharing a very simple javascript AHAH library and quickly demo a simple usage in one line of code. AHAH works very similarly to AJAX but without the X of Ajax. It unables you to dynamically update your page content without a whole page refresh. Instead of parsing XML data back you could simply return html. Here is how simple it is to dynamically reload your page content using AHAH.

File: ahahlib.js

Step1: Create a javascript file and copy the code in the following steps.

Step2: Write the following function to specify the XMLHTTPrequest object from different browsers

function getXMLHTTPreq(){
try {
req = new XMLHttpRequest(); /* Firefox */
} catch (e){
try{
req = new ActiveXObject(“Msxml2.XMLHTTP”);  /* previous versions of IE7 */
} catch (e) {
try {
req = new ActiveXObject(“Microsoft.XMLHTTP”); /* IE7+ */
} catch (err) {
req = false;
}
}
}
return req;
}

Step3: Create a function to write the return text to the designated document page element

var http = getXMLHTTPreq(); //XMLHTTPrequest object
function responseAHAH(pageElement) {
var output = ”;
if(http.readyState == 4){
if(http.status == 200){
output = http.responseText;
document.getElementById(pageElement).innerHTML = output;
}
}
}

Step4: Create the function that will be called from your html

/* call this AHAH function for dynamic html content display*/
function getAHAH(url, pageElement, LoadingMessage)
{
document.getElementById(pageElement).innerHTML = LoadingMessage;
http.onreadystatechange
= function(){responseAHAH(pageElement);};
http.open(“GET”, url, true);
http.send(null);

}

Example:

<script language=”Javascript” src=”ahahlib.js”></script>

<input type=”text” id=”mypage” name=”mypage” size=50>
<input type=”button” onClick=”getAHAH(document.getElementById(‘mypage’).value, ‘displaydiv’, ‘Loading content…’)” value=”Display page content”>
<br>
<div id=”displaydiv”></div>

In the above example, we have an input text to let you display whatever page you want to.

In displayTasks.php you may have simple echo strings to complex server side data thrown from database.

<?php
echo “Task1:<br><b>Configure SQL Server…<b>”;
?>

In step2, the xmlhttprequest object property readyState reports on the status of the request where

0=uninitialized, 1=loading, 2=loaded, 3=interactive, 4=completed

The status property returns the HTTP status code as 200 returns a successful request.