先简单介绍一下什么是DWR
DWR - Direct Web Remoting
ajax是一种提高web站点吸引力和实用性的书写web页面的方法。它从服务器端更新web页面的特殊区域,从而增强用户的交互性。它允许信息在短时间的延迟或不用刷新页面的情况下更新。
DWR减少了开发时间,也减少了一些可能的错误,这些错误是在提供常用的方法函数并消除一些与高交互性 web站点有关的重复性代码的时候产生的。
DWR是作为开源软件(ASL verssion 2.0)而可以免费得到的。它凭借它的广阔的库、例子和指南非常易于实现。把它结合到一个现有的站点是非常简单的,同样它也可以简单地与大多数java框架结合。
util.js
util.js包含了一些使用的方法,从而帮助你利用javascript(可能)从服务器端更新你的web数据。
你可以在DWR之外的地方使用它,因为它并不依赖与DWR而实现。
它包含四个页面处理函数:
1 getText()作用于select lists。
2 getValue[s]()、setValue[s]()作用于除tables、lists和images以外的大多数html元素。
3 addRows()和removeAllRows()用于编辑tables。
4 addOptions()和removeAllOptions()用于编辑lists(如:select lists、ul、ol)。
$() :
$函数(在javascript中,他的名字是合法的)的思想是从prototype引进的。一般说来,$ = document.getElementById。在以后你花大量时间进行ajax编程的时候,在合适的地方使用这种格式是很有益的。
'$'通过给定的ID在当前HTML页面找到元素,如果多于一个的参数被提交,它就会返回一个包含已找到元素的数组。这个函数从prototype的library中得到的灵感,而且,它还能更好的工作在不同的浏览器中。
一 :Generating Lists
DWR的一个功能可以给一个下拉列表(select list)添加选项,只需使用
1 DWRUtil.addOptions()
如果你在更新列表之前,希望保留一些选项,你需要写以下一些代码:
1 varsel = DWRUtil.getValue(id);
2 DWRUtil.removeAllOptions(id);
3 DWRUtil.addOptions(id,...);
4 DWRUtil.setValue(id,sel);
如果你想有个初始化选项,如:“please select”,你可以直接使用:
1 DWRUtil.addOptions(id,[ " Pleaseselect " ]);
二 :DWRUtil.addOptions 有5种调用方法:
1 :Array: DWRUtil.addOptions(selectid, array) 。selectid为目标ID,array为每一项的text。
2 :Array of objects (option text = option value):
DWRUtil.addOptions(selectid, data, prop) 用text和value的集合来为每一个数组元素创建一个选项,
pro参数指定text和value的值。
3:Array of objects (with differing option text and value):
DWRUtil.addOptions(selectid, array, valueprop, textprop) 用text和value的集合来为每一个数组元素创建一个选项,
valueprop确定value,textprop确定text。
4:Object: DWRUtil.addOptions(selectid, map, reverse) 为map中每一个属性(property)创建一个选项,
属性名作为选项的value,属性的value作为选项的text。这样做看起来是错的,但实际上这种做法的确是正确的。
如果reverse参数被设置为true,则属性的value还是被用做选项的value。
5:Map of objects: DWRUtil.addOptions(selectid, map, valueprop, textprop) 为map中的每一个对象创建一个选项,
valueprop指定选项的value,textprop指定选项的text。
三 :Generating Tables
DWRUtil.addRows() 从一个数组(第二个参数)取得值,创建table的每一行。从另一个数组(第三个参数)去得值,为table的每一行创建若干列。
四 :DWRUtil.getText(id)
可以根据id取得text的值,这个方法只能用于select list
五 :DWRUtil.getValue(id)
可以根据id取得value,使用这个方法,你不必在意div和select list的不同。
六 :DWRUtil.getValues()
getValues() is similar to getValue() except that the input is a Javascript object that contains name/value pairs. The names are assumed to be the IDs of HTML elements, and the values are altered to reflect the contents of those IDs. This method does not return the object in question, it alters the value that you pass to it.
这个方法和getValue()一样,只是它传入的是一个包含名字和数值的javascript对象.这个名字就是HTML元素的ID。这个方法不会返回任何对象,它只会将ID的value映射给传入的value。例:
1 functiondoGetValues() {
2vartext = " {
3div: null ,
4textarea: null ,
5select: null ,
6text: null ,
7password: null ,
8formbutton: null ,
9button: null
10 } " ;
11
12 // javascript对象
13 varobject = objectEval(text);
14 DWRUtil.getValues(object);
15 // toString
16 varreply = DWRUtil.toDescriptiveString(object, 2 );
17 // 转意
18 reply = reply.replace( / /n / g, " <br/> " );
19 // 显示
20 DWRUtil.setValue( " getvaluesret " ,reply);
21
22 }
七 :DWRUtil.onReturn
贴一段代码,暂时不理解,用onReturn和不用有什么区别
1 < script >
2functionsubmitFunction() {
3$( " alert " ).style.display = " inline " ;
4setTimeout( " unsubmitFunction(); " , 1000 );
5}
6
7functionunsubmitFunction() {
8$( " alert " ).style.display = " none " ;
9}
10 </ script >
11
12 < p >< inputtype = " text " onkeydown = " DWRUtil.onReturn(event,submitFunction) " />
13 < inputtype = " button " onclick = " submitFunction() " value = " GO " />
14 < spanid = " alert " style = " display:none;background:#FFFFDD;font-weight:bold; " > submitFunctioncalled </ span >
15 </ p >
八 :DWRUtil.selectRange
在一个input box里选一个范围
1 DWRUtil.selectRange( " sel-test " ,$( " start " ).value,$( " end " ).value);
九 :DWRUtil.setValue(id, value)
用ID找到元素,并更新value
十 :DWRUtil.setValues()
和setValue(id,value)一样,只是它需要的参数是个javascript对象,如:
1 DWRUtil.setValues( {
2div: " newdivcontent " ,
3password: " 1234567890 "
4 } );
十一 :DWRUtil.toDescriptiveString
带debug信息的toString,第一个为将要debug的对象,第二个参数为处理等级。等级如下:
1 0 :Singlelineofdebug单行调试
2 1 :Multi - linedebugthatdoesnotdigintochildobjects不分析子元素的多行调试
3 2 :Multi - linedebugthatdigsintothe2ndlayerofchildobjects最多分析到第二层子元素的多行调试
And so on. Level 2 and greater probably produce too much output.
总结:DWR不但屏蔽了许多client与server交互的重复且复杂的代码,而且还提供了一些常用的方法,一些思想还是从prototype
Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能
继承而来,并有一定的改进。同时,它也考虑到了与struts、hibernate、spring的结合问题。
需要注意的是,DWR是一种把服务器端的java代码通过javascript直接从浏览器调用的方法(DWR is a way of calling Java code on the server directly from Javascript in the browser.),而不是一个javascript的库(Generally speaking DWR is not a generic JavaScript library so it does not attempt to provide fill this need. However this is one of these really useful functions to have around if you are doing Ajax work.)能做到这么多,已经很难得了。
DWR自04年11月草案提出到现在的Version 1.1 beta 3(2005-12-29),已经更新发布了20多次了,但愿在ajax的发展大路上,能始终看见DWR的身影。
相关推荐
dwr包.rar dwr.jar engine.js util.js dwr-noncla.jar readme.txt JAR File: dwr.jar (1.08Mb) To DWR enable your web-app WAR File: dwr.war (4.62Mb) Demos/Examples of what DWR can do Sources: dwr-...
dwr javascript util.js engind.js 工具库 原js文件在dwr.jar中,不想找的同学就下载吧。
NULL 博文链接:https://yxwang0615.iteye.com/blog/981848
DWR(包括engine.js+util.js).rar
开发Dwr所需的jar包,js文件:dwr.jar engine.js util.js
dwr教程+dwr.jar+util.js+engine.js
util.js包含一些有用的函数function,用于在客户端页面调用,它可以和dwr分开,独立营用于你的系统中。 主要功能如下: 1、$() 获得页面参数值 2、addOptions and removeAllOptions 初始化下拉框 3、addRows and...
技术分享:DWR 处理各种form表单Selectoption,table等,List,Bean
dwr-1.1.1-util.js
dwr 例子 jar包 engine.jsutil.js 学习笔记 绝对超值。
dwr需要的js(searchaAuthor+engine.js+util.js).rar
自己整理的dwr中util.js的常用方法
这是dwr需要的engine.js和util.js,Engine.js与util.js不同之处在于,util.js是静态js文件,可以直接从jar文件中拿出来,页面可以直接引用;而engine.js则有部分动态内容,这决定了它必须经过servelt资源请求,在...
dwr-2.0-util.js
dwr城市选择的联动,util.js方法的使用,动态table
DWR是是关于开发web2.0...第7章.util.js的功能,含13小节;第8章.DWR进阶,含5小节;第9章.范例精讲——购物车,含8小节;第10章.附录,含常见问题(4节)和JavaScript高级应用(5节)。希望对于像我一样的初学者有所帮助^_^
springboot整合dwr实现js调用java方法,页面支持freemarker和jsp
默认的时候DWR将java void值转换成javascript的null值就是这样设置<convert converter="null" match="void"/>. 有时java.lang.Void也需要进行这样的转换,所以设置也是相似的<convert converter="null" match="java....