在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上運行.