Vincent Thinking

All about Vincent's work and life

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  34 随笔 :: 0 文章 :: 183 评论 :: 0 Trackbacks

什么是AHAH?
AHAH:(Asychronous HTML and HTTP)
简单来说,AHAH是一种利用JavaScript动态更新web页面的技术.他通过XMLHTTPRequest来获得动态的html,填充到 web页面中。

和AJAX的关系?
AHAH被认为是一种比AJAX(Asynchronous JavaScript and XML)更简单的web开发方式,严格意义上来说AHAH是AJAX的一个子集,因为(X)HTML本身及时一个特殊形式的XML,但是最为子集的AHAH却有特殊的和有用的特性:
1.无需定义XML schemas可以使设计时间大幅减少

2.使用已有的HTML页面从而避免必须提供特殊的Web服务

3.所有的数据通过浏览器可识别的HTML传输,从而可以很容易的调试和测试

4.HTML直接包含在页面的DOM对象中,无需解析

5.HTML设计者可以使用CSS来格式化显示,无需程序员使用XSLT转换

6.所有的处理都在服务器端完成,客户端不需要编写任何程序

实事上,任何内容的最终都是要转化成浏览器可识别结果,展现在浏览器上。很难想象出转化成自定义的XML格式比HTML有什么优点

参考ahah.js 和 jah.js

Send AHAH Request

 1 function ahah(url,target) {
 2    // native XMLHttpRequest object
 3    document.getElementById(target).innerHTML = 'sending';
 4    if (window.XMLHttpRequest) {
 5        req = new XMLHttpRequest();
 6        req.onreadystatechange = function() {ahahDone(target);};
 7        req.open("GET", url, true);
 8        req.send(null);
 9    // IE/Windows ActiveX version
10    } else if (window.ActiveXObject) {
11        req = new ActiveXObject("Microsoft.XMLHTTP");
12        if (req) {
13            req.onreadystatechange = function() {ahahDone(target);};
14            req.open("GET", url, true);
15            req.send();
16        }
17    }
18 

Receive AHAH Request
 1 function ahahDone(target) {
 2    // only if req is "loaded"
 3    if (req.readyState == 4) {
 4        // only if "OK"
 5        if (req.status == 200 || req.status == 304) {
 6            results = req.responseText;
 7            document.getElementById(target).innerHTML = results;
 8        } else {
 9            document.getElementById(target).innerHTML="ahah error:\n" +
10                req.statusText;
11        }
12    }
13 }

Executing Javascript

由于浏览器在插入HTML的时候并不会执行<script>标签中的代码,所以你可以利用下面的方法来解决 document.getElementById(target):

 1 var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
 2 var bOpera = (navigator.userAgent.indexOf('Opera') != -1);
 3 var bMoz = (navigator.appName == 'Netscape');
 4 function execJS(node) {
 5   var st = node.getElementsByTagName('SCRIPT');
 6   var strExec;
 7   for(var i=0;i<st.length; i++) {     
 8     if (bSaf) {
 9       strExec = st[i].innerHTML;
10     }
11     else if (bOpera) {
12       strExec = st[i].text;
13     }
14     else if (bMoz) {
15       strExec = st[i].textContent;
16     }
17     else {
18       strExec = st[i].text;
19     }
20     try {
21       eval(strExec);
22     } catch(e) {
23       alert(e);
24     }
25   }
26 }
27 

注意:
1.由于IE返回的tag标志都是大写,所以你必须搜索SCRIPT而不是script.在firefox中也保留大写的形式.
2.不要用//的注释方式,用/**/的方式来代替,在每一个声明句后面加';'

(未完..)
posted on 2006-01-09 09:31 Vincent Thinking 阅读(71731) 评论(2)  编辑  收藏 所属分类: Work

评论

# re: AHAH 介绍 2006-02-09 20:43 charon~
兄弟,你这个用innerHTML载入javascript代码是工作不了的.
在ie下面,如果innerHTML = xxx,并且xxx中包含script标签的话,在设置的时候都会被丢弃,此时再用getElementById取回Node,其node.getElementsByTagName('SCRIPT');是空。
而且,这片文章是翻译的吧  回复  更多评论
  

# re: AHAH 介绍 2006-02-10 09:57 Vincent Thinking
Hi charon:

脚本确实被插入到了 innerHTML 中,可以 alert 一下看看。但是会有一种例外情况存在,那就是如果脚本在 innerHTML 内容开头的话,那么 IE 浏览器将会忽略掉这段脚本,而 Moziila/Firefox 和 Opera 却不会。

所以你可以在插入的脚本前加入一段内容:
<span style="display: none">hack ie</span>
这样脚本就不会被忽略了。 当然,如果你不是IE的话,完全没有必要插入这段代码。

PS:这是翻译的 ^_^,只是一篇介绍,没有实践过,有兴趣的话,可以试一下  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: