WebWork2.2新特性(九) AJAX之Remote Div Tag

首先,我们把wiki上的文档"使用"一下: 原文地址http://wiki.opensymphony.com/display/WW/Remote+DIV+Tag

Remote DIV 标签和普通的Html的DIV标签工作方式是一样的,但是它可以通过标签内指定的一个网址来装载它的内容.

属性

名称描述
id (必有) DIV的ID
href (必有) 用来获取内容的网址
delay 第一次装载内容需要延迟多长时间 (毫秒)
updateFreq 多长时间重新取一次内容 (毫秒)
loadingText 装载内容中对用户显示的文字 (特别是取内容的时候要花费很长的时间
errorText 如果取内容时发生了错误,向用户显示的提示
showErrorTransportText true/false - 当获取内容有问题的时候,是否把错误信息当作内容显示
listenTopics 监听的Topic名称(多个逗号分割), 将会导致此DIV重新获取内容
afterLoading 获取内容后要执行的Javascript代码

其他功能

使用javascript代码我们还可以刷新内容,停止或者开始刷新组件.例如一个id是"remotediv1"的div组件:

开始刷新的javascript代码:

remotediv1.start();

停止刷新的javascript代码:

remotediv1.stop();

刷新内容的javascript代码:

remotediv1.bind();

 

翻译完毕(注:原文是会被随时修改的,请以原文为主)

其中href的地址会自动加上Web App的前缀,如果你已经自己写上了,就不会在加了,所以要避免子目录和web app同名.

 
Remote DIV标签我觉得最值得关注的特性包括:

  •  可以自己重新装载自己的内容
  •  可以监听Topic,也就是别的动作可以引发更新内容的行为
  •  JavaScript代码可以控制它的行为
     
     

首先我们来看Remote Div标签的最简单的一个例子example1.jsp:

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%@ taglib prefix="ww" uri="/webwork" %>
 <html>
 <head>
     <title>Ajax Examples</title>
     <jsp:include page="../commonInclude.jsp"/>
 </head>
 <body>
 <ww:div id="once"  theme="ajax"   cssStyle="border: 1px solid yellow;"   
  href="/AjaxTest.action"   delay="5000"   loadingText="loading...">Initial Content</ww:div>
 </body></html> 

:了解commonInclude.jsp,请阅读"AJAX之介绍".


我们再来看example1.jsp这个文件,内容非常简单,使用了一个ww:div标签,设置了一个id,使用的是ajax这个模板(如果你想定义自己的模板,请务必参考ajax模板的编写方法),设置读取内容的url为"/AjaxTest.action",设置延迟5000毫秒后读取内容,装载内容时显示的文本设置为"loading...",div显示时的初始内容时"Initial Content".

是的,很简单,在打开网页5秒后,标签会自动去访问"/AjaxTest.action",并把获取的内容设置为Div的内容.


我们再来看一个定时自动刷新的例子:

<ww:div  id="twoseconds"    cssStyle="border: 1px solid yellow;"   href="/AjaxTest.action"
         theme="ajax" delay="2000"  updateFreq="3000" errorText="There was an error">Initial Content</ww:div> 

这个标签产生的结果每3秒钟刷新一次DIV的内容,和上面的差不多,只是多了一个updateFreq设置.

此标签还有一个afterLoading属性,使用方法如下:

<ww:div  ......   afterLoading=’alert("done")’>Initial Content</ww:div> 

或者

<ww:div  ......   afterLoading="alert(\"done\")">Initial Content</ww:div> 


注意:目前使用afterLoading="alert(’done’)"的方法好像有点问题,好像是dojo内部处理引发的问题.

 

监听Topic是通过JavaScript代码或者其他部件来触发的,使用JavaScript的示例如下:

<ww:div   id="once"    theme="ajax"     cssStyle="border: 1px solid yellow;"  href="/ajax/test1.jspa"
         delay="5000"  loadingText="loading..."    listenTopics="scud1"   >Initial Content</ww:div> 

这个Div标签将监听Topic为"scud1"的事件.

我们可以使用一个普通按钮来触发事件:

 <script type="text/javascript">
  function scud1() { dojo.event.topic.publish( "scud1", "alert(’test’);" ); }
 </script>
 <INPUT type="button" onclick="scud1()" value="click"> 

点击这个按钮,将会导致Div标签重新装入内容. 注意一个Div标签可以监听多个Topic,用逗号分割即可.

至于使用其他部件触发事件的代码,我们将会在使用Remote A Tag时用到.

 

 

posted on 2005-09-10 22:21 Scud(飞云小侠) 阅读(887) 评论(0)  编辑  收藏 所属分类: WEB


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


网站导航:
 
<2005年9月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

导航

统计

公告

文章发布许可
创造共用协议:署名,非商业,保持一致

我的邮件
cnscud # gmail


常用链接

留言簿(14)

随笔分类(113)

随笔档案(103)

相册

友情链接

技术网站

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜