AHAH(Asynchronous HTML over HTTP)
AHAH or Asynchronous HTML over HTTP is a much simpler version of AJAX. Using AHAH approach in JavaScript you can display external XHTML pages inside your HTML page. The beauty of the script is that it is very simple - the underling code is just twenty lines!
The difference between AJAX and AHAH is the return data fomat. AJAX will load an XML file - then the developer will have to make the code that will parse the XML, extract the data and then display the results. In AHAH the approach is much simpler - the data to be fetched is XHTML - the code just has to fetch it - as the browser is already equipped to handle HTML and will display the result with no further help from the developer.
Use
For example, lets say we need to create a page with tabs - each tab will put some content in the main area - but the full thing must be dynamic - linking to another page won't do. The code of the main page will be...
<ul id="tabs">
<li><a href="javascript:load('javascript.html');">JavaScript</a></li>
<li><a href="javascript:load('ahah.html');">AHAH</a></li>
<li><a href="javascript:load('ajax.html');">AJAX</a></li>
</ul>
<div id="content"></div>The point of our exercise will be to load the contents of the javascript.html in to the div with the id 'content'. In the JavaScript section of the file we will declare the 'load' function...
<script language="javascript" type="text/javascript" src="ahah.js"></script>
<script language="javascript" type="text/javascript">
//Calls the library function 'ahah' - defined in 'ahah.js' file.
function load(filename) {
ahah(filename,"content");
}
</script>The code of the ahah.js file as given below...
function ahah(url, target) {
document.getElementById(target).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}Now the only file left is the three content files - javascript.html, ahah.html and ajax.html. The important thing to remember about this is that you should not include the standard HTML stuff like <html><body> etc. in this page - just the content with all the HTML formatting - I am just providing the code for just the file javascript.html here - remember that this is the whole file - nothing other than the shown data must be in that file.
<h1>JavaScript</h1> <p><b><u>JavaScript</u></b> is Netscape's cross-platform, object-based scripting language for client and server applications. It has dominated the world of internet scripting languages for a long time now. With the arrival of new programming methods like <a class="tooltip" title="AJAX : Asynchronous JavaScript and XML" href="http://en.wikipedia.com/wiki/AJAX">AJAX</a>, it is much more popular now than ever before.</p> <p>See the wikipedia article on <a href="http://en.wikipedia.com/wiki/JavaScript">JavaScript</a> for more info on this language.</p>
Use you imagination to create the other two files. Now open the page on a browser to see the magic. See the live example...
Comments
in the AHAHDone will not work by simply using innerHTML. So you can use
var el = document.getElementById(target)
content = xmlHttp.responseText;
rng = document.createRange(); //Necessary for text insertion in DOM
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content); //Create htmlFrag from string (parsing html)
while (el.hasChildNodes())
el.removeChild(el.lastChild); //Element contents
el.appendChild(htmlFrag);
this will work in all Firefox/mozilla clones and better before cleaning the old content if you are replacing the new contents with the existing contents
<a href="load('javascript.html');">
should be:
<a href="javascript:load('javascript.html');">
bye
kokko
on firefox it works fine! damn fine!
I´d never received a "time execution" error before... the html being parsed to the content div, has an embedded element using java applet..
im doing a lot of work on it, hope i can get it to work in IE too!
any ideas? :)
* Before including HTML through AHAH/AJAX, check your DIV/SPAN is NOT INSIDE a FORM TAG :) (check also for tables) bye bye
I just gave up after 2 hours trying, Is there anyone who have been able to make it work on IE?
req.onreadystatechange = function() {ahahDone(url, target);};
it is:
req.onreadystatechange = ahahDone;
function ahahPost(url,target,formid) {
var params = '';
var elem = document.getElementById(formid).elements;
for(var i = 0; i < elem.length; i++) {
if (elem[i].type == "checkbox") {
if (elem[i].checked) {
params += elem[i].name + '=' + elem[i].value + '&';
}
}
else {
params += elem[i].name + '=' + elem[i].value + '&';
}
}
params = params.slice(0,params.length-1);
document.getElementById(target).innerHTML = 'loading data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", params.length);
req.setRequestHeader("Connection", "close");
req.send(params);
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ahahDone(target);};
req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", params.length);
req.setRequestHeader("Connection", "close");
req.send(params);
}
}
}
The idea here is to design your <form> as you would any other, with a slight tweak to the action of your form:
<form method="post" id="yourform" action="javascript:ahahPost('your-url.php', 'targetdiv', 'yourform');">
Now add form elements as normal and design it as you wish, and add a regular old submit button as usual. The function iterates through your form, gathers up it's various elements' values, forms the appropriate http request and fires it off, with the results coming back to your targetdiv like the normal ahah function.
I've tested this with the standard form elements - text, textarea, checkboxes (you'll see they needed a little workaround else they all appear checked), radio buttons, etc. I'm hoping this works for submission of files but have not tested that yet... at first glance I assume it might but there might be something missing yet to support file uploads.
Yes???
I am starting to become some kind of madman because of the problem I encounter with ahah.
Here is the thing, I implemented it in a webpage (rather complicated one) en modified it a bit. When I tested the thing, it just didn't work (ahah error: 0).
I tried tons of thing and finally just took the codes from you exemple and guess what ? Not working, even with the same sources as you have (it's working on your link but not my website, I just don't understand).
Any help?
Thanks in advance.
Wow! Thank you for making the AHAH POST handler. I'm adding it permanently to my library.
But I have a question: I want to send some data to a PHP script then the former ( the PHP script ) returns a HTML document that I'm supposed to retrieve then display ( of course ). How will the code look like? Can anyone give me a precision about the callback function?
Thanks.
this is not new.... XHTML == XML -> true.;.. :) this is old old old....
anyhow nice invention... ask for the patent.
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.