BlogJava-LiuTing-随笔分类-Ajax学习http://www.blogjava.net/LiuTing/category/22603.htmlzh-cnMon, 21 May 2007 01:23:59 GMTMon, 21 May 2007 01:23:59 GMT60DWRUtils API 使用方法http://www.blogjava.net/LiuTing/archive/2007/05/20/118676.htmlLiuTingLiuTingSun, 20 May 2007 04:46:00 GMThttp://www.blogjava.net/LiuTing/archive/2007/05/20/118676.htmlhttp://www.blogjava.net/LiuTing/comments/118676.htmlhttp://www.blogjava.net/LiuTing/archive/2007/05/20/118676.html#Feedback0http://www.blogjava.net/LiuTing/comments/commentRss/118676.htmlhttp://www.blogjava.net/LiuTing/services/trackbacks/118676.html$("precloneNode1suf") 取得该对象;

DWRUtil.selectRange("selectRangeBasic", 5, 15) 选中selectRangeBasic文本框里面从第五个字符到第15个字符之间的字符.

DWRUtil._getSelection("selectRangeBasic") 得到selectRangeBasic文本框里选中的字符.

var arrayFive = [ 'One', 'Two', 'Three', 'Four', 'Five' ];
DWRUtil.addOptions('addOptionsBasic', arrayFive); 将数组添加到下拉菜单里面去;

DWRUtil.getValue('addOptionsBasic') 得到 addOptionsBasic 对象的值;
DWRUtil.getValue("precloneNode1Inner1suf", { textContent:true }); 后面加个参数,在 precloneNode1Inner1suf元素为"UL" 时,它返回了元素里面得值,也就是说去掉了HTML标签部分.

DWRUtil.getText('addOptionsBasic') 得到下拉框 addOptionsBasic 显示的文本;

var arrayObject = [
{ name:'One', value:'1' },
{ name:'Two', value:'2' },
{ name:'Three', value:'3' },
{ name:'Four', value:'4' },
{ name:'Five', value:'5' }
];
DWRUtil.addOptions('addOptionsObject1', arrayObject, "name"); 将数组添加到下拉菜单里面去;后面的参数是确定那个是给用户显示的文本,同时也是值;

DWRUtil.addOptions('addOptionsObject1', arrayObject, "name","value"); 同上,不过后面参数是: 3=文本;4=值;

var map = { one:1, two:2, three:3, four:4, five:5 };
DWRUtil.addOptions('addOptionsMap1', map); 同上, one 是值;1 是文本;
DWRUtil.addOptions('addOptionsMap1', map,true); 同上, 1 是值;one 是文本;

-------------------------------------------------------------------------------------
<ul id="removeItems">
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>

如果是列表显示,如上;则上面所有方法和select 下拉框使用一样;
-------------------------------------------------------------------------------------
DWRUtil.cloneNode('cloneNode1', { idPrefix:'pre', idSuffix:'suf' });克隆一个节点,参数一为要克隆的节点的id,第二个参数是在克隆的节点id前面加pre,后面加suf.(注意:如果该节点有子节点的话,子节点的名字也一样加)

DWRUtil.addRows(id, array, cellfuncs, [options]);
原理:

for each member in array
for each function in cellfuncs
create cell from cellfunc(array[i])
循环数组,循环函数,建立单元调用函数;(顺序决定)

例如:
DWRUtil.addRows('addRowsBasic', arrayFive, [
function(data) { return data; },
function(data) { return data.toUpperCase(); },
function(data) {
var input = document.createElement("input");
input.setAttribute("type", "button");
input.setAttribute("value", "DOM Test");
input.setAttribute("onclick", "alert('" + data + "');");
return input;
},
function(data) { return "<input type='button' value='innerHTML Test' onclick='alert(\"" + data + "\");'>"; }
]);

高级部分:
第四个参数为对单元的高级操作,主要下面的两个方法;
function defaultRowCreator(options) {
return document.createElement("tr");
};

function defaultCellCreator(options) {
return document.createElement("td");
};

例子:
DWRUtil.addRows( "demo2",[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ] , cellFuncs, {
rowCreator:function(options) {
var row = document.createElement("tr");
var index = options.rowIndex * 50;
row.style.color = "rgb(" + index + ",0,0)";
return row;
},
cellCreator:function(options) {
var td = document.createElement("td");
var index = 255 - (options.rowIndex * 50);
td.style.backgroundColor = "rgb(" + index + ",255,255)";
td.style.fontWeight = "bold";
return td;
}
});

其中 options 参数的属性可用的为:(没试过,自己试试吧)

rowData: the element value from the array (the same for all cells in a row)
rowIndex: the key (if map) or index (if array) from the collection
rowNum: The row number counting from 0 in this section (so if you are using tbody, it counts rows in the tbody and not the whole table)
data: The 'computed' data value for the cell (cellCreators only)
cellNum: The cell number that we are altering counting from 0 (cellCreators only)


DWRUtil.setValues(); 批量设置值;
var settings = {
setValuesDiv:"setValuesDiv",
setValuesSpan:"setValuesSpan",
setValuesSelect:"two",
setValuesText:"setValuesText",
setValuesPassword:"AB",
setValuesTextarea:"setValuesTextarea",
setValuesButton1:"B1-Two",
setValuesButton2:"B2-Two",
setValuesRadio1:true,
setValuesRadio2:false,
setValuesRadio3:"one",
setValuesRadio4:"two",
setValuesCheckbox1:true,
setValuesCheckbox2:false
};
DWRUtil.setValues(settings);

DWRUtil.getValues(empty);批量获取值;
var empty = {
setValuesDiv:null,
setValuesSpan:null,
setValuesSelect:null,
setValuesText:null,
setValuesPassword:null,
setValuesTextarea:null,
setValuesButton1:null,
setValuesButton2:null,
setValuesRadio1:null,
setValuesRadio2:null,
setValuesRadio3:null,
setValuesRadio4:null,
setValuesCheckbox1:null,
setValuesCheckbox2:null
};
DWRUtil.getValues(empty);

DWRUtil.useLoadingMessage("Ping");//类似gmail那个样子,在右上角显示加载"ping";可用自定样式,具体查询;http://getahead.ltd.uk/dwr/browser/util/useloadingmessage

DWRUtil.toDescriptiveString("id",数字);弹出调试信息,数字为0,1,2.一级比一级高.

DWRUtil.onReturn(event, submitFunction);一般在form表单里面,防止在文本框上按回车就提交表单.
例如:
<input type="text"
onkeypress="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()"/>

LiuTing 2007-05-20 12:46 发表评论
]]>DWR框架实现Ajaxhttp://www.blogjava.net/LiuTing/archive/2007/05/20/118675.htmlLiuTingLiuTingSun, 20 May 2007 04:45:00 GMThttp://www.blogjava.net/LiuTing/archive/2007/05/20/118675.htmlhttp://www.blogjava.net/LiuTing/comments/118675.htmlhttp://www.blogjava.net/LiuTing/archive/2007/05/20/118675.html#Feedback0http://www.blogjava.net/LiuTing/comments/commentRss/118675.htmlhttp://www.blogjava.net/LiuTing/services/trackbacks/118675.html      Ajax是时下比较流行的一种web界面设计新思路,其核心思想是从浏览器获取XMLHttp对象与服务器端进行交互. DWR（Direct Web Remoting）就是实现了这种Ajax技术的一种web框架. 最近做的项目中我也将它用上了,感觉很是方便,比如动态生成javascript代码,隐藏的http协议,java代码和javascript交互的是javascript的对象(或字符串).  下面是我整理的文档.
  DWR主要由两部门组成。javascript与web服务器通信并更新web页；运行在web服务器的Servlet处理请求并把响应发回浏览器。

   1  .  配置web.xml
<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

  2    当我们想看dwr自动生成的测试页时,可在java代码
servlet中加
<init-param>
  <param-name>debug</param-name>
  <param-value>true</param-value>
</init-param>

这个参数DWR默认是false.如果选择true.我们可以通过url http://localhost:port/app/dwr ,你就可以看到你部署的每个DWR class。并且可以测试java代码的每个方法是否运行正常。为了安全考虑，在正式环境下你一定把这个参数设为false.

3  log信息配置

我喜欢用log4j输出日志,那么在log4j.properties下加，log4j.logger.uk.ltd.getahead.dwr = debug。这样可以看DWR的调试日志。

4  配置dwr.xml (和web.xml同目录)
 
<create creator="new" javascript="JDate">
<param name="class" value="java.util.Date"/>
</create>

这里的多数元素都是可选的 - 你真正必须知道的是指定一个creator和一个javascript名字。

creator属性 是必须的 - 它用来指定使用那种创造器。

默认情况下DWR1.1有8种创造器。它们是：

  • new: 用Java的new关键字创造对象。
  • none: 它不创建对象，看下面的原因。 (v1.1+)
  • scripted: 通过BSF使用脚本语言创建对象，例如BeanShell或Groovy。
  • spring: 通过Spring框架访问Bean。
  • jsf: 使用JSF的Bean。 (v1.1+)
  • struts: 使用Struts的FormBean。 (v1.1+)
  • pageflow: 访问Beehive或Weblogic的PageFlow。 (v1.1+)

javascript属性 用于指定浏览器中这个被创造出来的对象的名字。你不能使用Javascript的关键字。

scope属性 非常类似servlet规范中的scope。 它允许你指定这个bean在什么生命范围。选项有"application", "session", "request" 和"page"。这些值对于Servlet和JSP开发者来说应该相当熟悉了。

scope属性是可选的。默认是"page"。如果要使用"session"需要cookies。当前的DWR不支持ULR重写。

param元素 被用来指定创造器的其他参数，每种构造器各有不同。例如，"new"创造器需要知道要创建的对象类型是什么。每一个创造器的参数在各自的文档中能找到。请查看上面的链接。

include和exclude元素 允许创造器来限制类中方法的访问。一个创造器必须指定include列表或exclude列表之一。如果是include列表则暗示默认的访问策略是"拒绝"；如果是exclude列表则暗示默认的访问策略是"允许"。


5 dwr.jar下载后放lib下

源码浅析

dwr的设计很象webwork2的设计,隐藏http协议,扩展性，兼容性及强。

通过研究uk.ltd.getahead.dwr.DWRServlet这个servlet来研究下dwr到底是如何工作的。

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

这样/dwr/*下的所有的请求都是由这个servlet来处理,到底生理了什么呢,我们还是以例子来说明吧.

1 web服务器启动，DWRServlet init()方法调用，init主要做了以下工作。
设置日志级别、实例化DWR用到的单例类（这些类在jvm中只有一个实例对象）、读去配置文件（包括dwr.jar包中的dwr.xml,WEB-INF/dwr.xml. config*.xml）。
2 请求处理
DWRServlet.doGet, doPost方法都调用processor.handle(req, resp)方法处理。Processor对象在init()方法中已经初始化了。 

代码
public void handle(HttpServletRequest req, HttpServletResponse resp)  
        throws IOException  
    {  
        String pathinfo = req.getPathInfo();  
        if(pathinfo == null || pathinfo.length() == 0 || pathinfo.equals("/"))  
        {  
            resp.sendRedirect(req.getContextPath() + req.getServletPath() + '/' + "index.html");  
        } else 
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/index.html"))  
        {  
            doIndex(req, resp);  
        } else 
        if(pathinfo != null && pathinfo.startsWith("/test/"))  
        {  
            doTest(req, resp);  
        } else 
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/engine.js"))  
        {  
            doFile(resp, "engine.js", "text/javascript");  
        } else 
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/util.js"))  
        {  
            doFile(resp, "util.js", "text/javascript");  
        } else 
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/deprecated.js"))  
        {  
            doFile(resp, "deprecated.js", "text/javascript");  
        } else 
        if(pathinfo != null && pathinfo.startsWith("/interface/"))  
        {  
            doInterface(req, resp);  
        } else 
        if(pathinfo != null && pathinfo.startsWith("/exec"))  
        {  
            doExec(req, resp);  
        } else 
        {  
            log.warn("Page not found. In debug/test mode try viewing /[WEB-APP]/dwr/");  
            resp.sendError(404);  
        }  
    } 

dwr/*处理的请求也就这几种。

（1）dwr/index.html，dwr/test/这种只能在debug模式下使用，调试用。
dwr/engine.js，dwr/util.js，dwr/deprecated.js当这个请求到达，从dwr.jar包中读取文件流，响应回去。（重复请求有缓存）
（2）当dwr/interface/这种请求到来，（例如我们在index.html中的 <script type='text/javascript' src='dwr/interface/JDate.js'></script>）DWR做一件伟大的事。把我们在WEB-INF/dwr.xml中的
<create creator="new" javascript="JDate">
<param name="class" value="java.util.Date"/>
</create>
java.util.Date转化为javascript函数。
http://localhost:port/simpledwr/dwr/interface/JDate.js看看吧。
细节也比较简单，通过java反射，把方法都写成javascript特定的方法。（我觉得这些转换可以放到缓存里，下次调用没必要再生成一遍，不知道作者为什么没这样做）。
（3）dwr/exec
javascript调用方法时发送这种请求，可能是XMLHttpRequest或IFrame发送。
当然，javascript调用的方法签名与java代码一致，包括参数，还有javascript的回调方法也传到了服务器端，在服务器端很容易实现。回调方法的java的执行结果 返回类似 <script>callMethod(结果)<script>的javascript字符串,在浏览器执行。哈，一切就这么简单，巧妙。

我这里还有DWR中文文档. http://www.blogjava.net/Files/LiuTing/DWR中文文档.rar






LiuTing 2007-05-20 12:45 发表评论
]]>