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 so very simple - the underling code is just twenty lines!
The difference between AJAX and AHAH is about XML. 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.
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="load('javascript.html');">JavaScript</a></li>
<li><a href="load('ahah.html');">AHAH</a></li>
<li><a href="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"></scirpt>
<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...
More Links
Filed Under...
Categories : javascript ajax ahah web developmentTechnorati Tags: javascript ajax ahah web development
5 Comments:
Very interesting stuff. Great job :)
Hi,
I'd like to show you my new project about AHAH. I've performed AHAH function. Please visit :
http://www.gizax.it/ahahsection
regards,
Daniele
Gizax Studios, Internet Accessibility
http://www.gizax.it
www.fullajax.ru - very powerfull AHAH library. Unfortunately, documentation only russian...
AJAX & AHAH library for multithreaded loading of a web pages and other data
Advantages:
1) multithread
2) full support GET and POST request
3) separate history for each thread (for loading of a web pages)
4) parsing and execution of script, link and style tags from loaded content
5) upload file without reload
6) preprocessor data response
7) history for "Back" & "Forward" buttons
8) direct link for AJAX request of HTML
9) auto-filter of anchors - automatic trasformation to AJAX
10) content trigger
11) TITLE processing
12) trap for document.write for every thread
13) accelerate download of scripts - parallel download with serial apply
14) support event onload & onunload of tag body for every thread
15) Opera bug fixed where setTimeout & setInterval in use Back/Forward AJAX history
16)and other ...
Library tested with Firefox 2.0+, Internet Explorer 6.0+, Opera 9.0+, Safari 3.0+
www.fullajax.ru - очень мощная AJAX & AHAH библиотека для мультипоточной загрузки веб странииц и других данных
Функциональные фозможности:
1) мультипоточность
2) полная поддержка GET и POST запросов
3) раздельная история для каждого потока загрузки веб страниц
4) парсинг и выполнение скриптов, линков и стилей подгружаемых в контенте веб страниц
5) аплоад (загрузка на сервер) файлов без перезагрузки
6) препроцессор ответа запроса данных
7) история для кнопок "Назад" и "Вперед"
8) прямые сылки на AJAX запросы веб страниц
9) авто-фильтр якорей - автоматическое преобразование ссылок в АЯКС
10) триггер контента
11) обработчик TITLE
12) ловушка для document.write для каждого потока
13) ускоритель загрузки скриптов - паралельная их загрузка с последовательным применением
14) поддержка событий onload & onunload тега body для каждого потока
15) исправлен баг в Опере при использовании setTimeout & setInterval во время Назад/Вперед AJAX навигации по истории
16)и многое другое
Библиотека протестирована на Firefox 2.0+, Internet Explorer 6.0+, Opera 9.0+, Safari 3.0+
Thanks a lot.
Very interesting.
Post a Comment