Home > Web 2.0, Web Technologies > simple AHAH (Asynchronous HTML And HTTP) library

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.

ahah

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.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: