AHAH(Asynchronous HTML over HTTP)
2009-10-09 20:28
274 查看
from:http://www.openjs.com/articles/ajax/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.
The point of our exercise will be to load the contents of the
The code of the
Now the only file left is the three content files -
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');" mce_href="javascript:load('javascript.html');">JavaScript</a></li> <li><a href="javascript:load('ahah.html');" mce_href="javascript:load('ahah.html');">AHAH</a></li> <li><a href="javascript:load('ajax.html');" mce_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.htmlin to the
divwith the id 'content'. In the JavaScript section of the file we will declare the '
load' function...
<mce:script language="javascript" type="text/javascript" src="ahah.js" mce_src="ahah.js"></mce:script> <mce:script language="javascript" type="text/javascript"><!-- //Calls the library function 'ahah' - defined in 'ahah.js' file. function load(filename) { ahah(filename,"content"); } // --></mce:script>
The code of the
ahah.jsfile 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.htmland
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.htmlhere - remember that this is the whole file - nothing other than the shown data must be in that file.
<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" mce_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" mce_href="http://en.wikipedia.com/wiki/JavaScript">JavaScript</a> for more info on this language.</p>
相关文章推荐
- py-webkit-html-manipulator - Server side rendering, extraction and manipulation of HTML over HTTP. - Google Project Hosting
- UML类图中的各种箭头代表的含义(转自:http://www.cnblogs.com/damsoft/archive/2016/10/24/5993602.html)
- 正则表达式分类 区别 原文地址:http://www.cnblogs.com/chengmo/archive/2010/10/10/1847287.html 则表达式:在计算机科学中,是指一个用来描述
- python爬虫入门(转:http://www.cnblogs.com/voidsky/p/5490810.html)
- 3D文件查看软件 http://www.kubotekusa.com/products/kubotek_spectrum.html
- WebMethod属性详解(转http://liubiqu.cnblogs.com/archive/2005/06/06/168623.html)
- 电脑无端弹出“http://p.ecwan77.com/zt/lwzy/1.html”37玩广告为哪般?
- C#中Dictionary的用法及用途 原文转载自:http://www.cnblogs.com/linzheng/archive/2010/12/13/1904709.html
- LoadRunner中HTTP协议的录制及模式--“HTML –base scrīp”t和“URL-base scrīpt”
- VLC RTP Video Streaming over HTTP
- HTTP协议与HTML表单(再谈GET与POST的区别)
- XMPP over HTTP
- PE & ELF & .out http://blog.chinaunix.net/u2/64950/showart_525939.html
- 触发器入门 《转》http://www.cnblogs.com/ivy/archive/2008/06/11/1217613.html
- http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
- http://www.csee.wvu.edu/~xinl/source.html 突然发现无法登陆,现备份内容以便后续查询
- window下配置SSH连接GitHub、GitHub配置ssh key(转载自 http://jingyan.baidu.com/article/a65957f4e91ccf24e77f9b11.html)
- Convention Plugin(转http://www.blogjava.net/libin2722/articles/256525.html)
- BOSH (Bidirectional-streams Over Synchronous HTTP)
- http://www.pathname.com/fhs/pub/fhs-2.3.html