在WebWork2.2中,引入了Dojo ( http://dojotoolkit.org ) 和DWR ( http://getahead.ltd.uk/dwr/ ) 两个新的部件来支持AJAX功能.
其中主要增加的特性包括:
- Remote Div Tag -- 远程区域块标签,通过异步调用获取内容,来动态更新Div.可以循环更新.
- Remote A Tag --远程链接标签,点击链接时进行一个远程异步调用,可以动态更新Div的内容.
- Tabbed Panelds --选项卡页面,和普通程序中的选项卡一样,可以有多个选项页面,每个页面的内容都可以设置(本地或者从远程获取),点击一个选项页,切换页面.
- Remote Form --远程表单,也就是提交但不刷新的表单,点击提交按钮,页面不刷新,通过远程异步调用,更新目标区域的内容.
- Form Validation --表单校验,在表单中的每个控件输入数据都可以进行即时的校验,主要使用的是DWR.这个在前面已经演示过了.
目前这几个控件在IE上表现的都有一些问题:
- 目前Remote Form在IE下不工作,在FireFox下正常工作.
- 目前动态刷新在IE上好像都有缓存问题,在FireFox下没有问题.(如果在结果页面增加清除缓存的代码,可以解决这个问题)
因为以前没有使用过AJAX,所以后面的文字基本是把webwork wiki上的文档翻译一下,然后按照webwork自带的ajax的教程使用并说明一下.
建议使用这几个标签之前,了解一下Dojo的工作原理,这样才能知其所以然.
清除缓存的代码:
<%
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
%> |
或者用html的meta来试试,不过那就包含在内容里了.
为了使用WebWork的AJAX组件,我们需要在页面里面根据Dojo的做法包含一些代码,例如ajax例子里面的commonInclude.jsp文件:
|
<%@ taglib prefix="ww" uri="/webwork" %>
<!--// START SNIPPET: common-include-->
<script language="JavaScript" type="text/javascript">
// Dojo configuration
djConfig = {
baseRelativePath: "<ww:url includeParams="none" value="/webwork/dojo/"/>",
isDebug: false
};
</script>
<script language="JavaScript" type="text/javascript"
src="<ww:url includeParams="none" value="/webwork/dojo/dojo.js" />"></script>
<script language="JavaScript" type="text/javascript"
src="<ww:url includeParams="none" value="/webwork/CommonFunctions.js" />"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.io.BrowserIO");
dojo.require("dojo.event.topic");
dojo.require("webwork.widgets.Bind");
dojo.require("webwork.widgets.BindDiv");
dojo.require("webwork.widgets.BindButton");
dojo.require("webwork.widgets.BindAnchor");
</script>
<!--// END SNIPPET: common-include-->
|
这个文件里面对Dojo进行了设置,包含dojo.js,并且引入了webwork实现的这几个装饰件的代码,在后面的每个例子中,都要包含这个文件,因此后面的介绍中将省略这个文件的介绍,要想了解更多信息,可以参考Dojo的文档.
注:AJAX对于WebWork来说还是一个新的特性,肯定会存在一些问题,我们要努力地去开发论坛上提意见 :)
2005-9-16:remote form 最新cvs上的版本已经可以在ie上运行.