JS调用Java函数--DWR框架

Posted 2020-06-14

(1)dwr与ssh框架整合教程dwr框架介绍。

DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许 在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。它包含两个主要的部分:允许javascript从WEB服务器上一 个遵循了AJAX原则的Servlet中获取数据.另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内 容.DWR采取了一个类似AJAX的新方法来动态生成基于JAVA类的JavaScript代码.这样WEB开发人员就可以在JavaScript里使 用Java代码就像它们是浏览器的本地代码(客户端代码)一样;但是Java代码运行在WEB服务器端而且可以自由访问WEB 服务器的资源.出于安全的理由,WEB开发者必须适当地配置哪些Java类可以安全的被外部使用.　　
这个从JAVA到JavaScript的远程功能方法给DWR的用户带来非常像传统的RPC机制,就像RMI或者SOAP一样,而且拥有运行在WEB上但是不需要浏览器插件的好处.DWR不认为浏览器/WEB服务器协议是重要的,而更乐于保证编程界面的简单自然.对此最大的挑战就是把AJAX的异步特性和正常JAVA方法调用 的同步特性相结合.在异步模式下,结果数据在开始调用之后的一段时间之后才可以被异步访问获取到.DWR允许WEB开发人员传递一个回调函数,来异步处理 Java函数调用过程.

(2)引入dwr包，本例采用的版本是dwr2.0.5。将dwr.jar包引入到项目的WEB-INF/lib目录下。
如图，引入成功后，查看可以了解相关信息。


(3)在web.xml中配置dwr的相关信息。如下所示 

注：相关的参数说明在图中已经给出解释。 

(4)在web.xml同目录下新建dwr.xml文件。
其初始配置如下

配置部分已经完成，下面使用一个例子说明dwr的具体配置，例子采用的是ssh的程序，并将用户登陆部分改成以dwr技术实现。

(5)后台业务逻辑。首先编写业务处理的action方法

方法名为showHello(String name,String passpword),通过传入的name和password来添加新用户，如果成功返回success否则返回fail.具体实现 
如下：

 

方法名为showAdd(User u),通过传入的User对象添加新用户，如果成功返回success否则返回fail.具体实现 如下： 



方法名为showList(),通过调用Service层的getUsers方法返回用户List<User>集合.具体实现 如下： 



具体方法实现如下：


（6）配置dwr.xml文件。将showHello、showAdd、showList方法配置到dwr.xml中，使其可以访问。 具体的配置以及解释如下：


（7）配置dwr框架的调试功能，使其可以进行可视化调试。具体方法是设置web.xml中dwr配置下的debug为true.

设置成功后重新部署项目，启动服务器。在浏览器中输入localhost:端口名称/项目名称/dwr即可打开dwr的调试页面，比如我的项目名称是ssh,端口号是80，则网址为:http://127.0.0.1:8080/combine/dwr/index.html,打开后出现如下页面：

如果看到如上页面，说明你的dwr已经配置成功，下面就是测试方法是否能正常运行。点击Hello方法将打开如下页面（部分截图）：

上图包含三部分，第一部分是：

它指明了后台方法的js实现的js文件位置和dwr引擎的位置，这两个js文件为必须按项目，必须包含在页面文件上才能正常调用dwr框架。第二部分为可选内容，建议也包含在页面文件上。

第三部分为声明的方法，下面列出了全部的方法，但是有红色警告的不能使用，因为返回值不是基本的数据类型，而且在配置dwr信息时没有声明其访问权限。只有

没有任何警告信息表明其可以正常访问。

（8）调试页面测试方法能否正常运行。找到showHello方法

，在两个参数中输入我们的用户名和密码(rush 123456)，如下所示：

，点击Execute执行该方法，如出现如下结果，则表明执行成功：

。说明：调试页面是为了方便调试用的，在实际发布后请关闭其调试功能。

（9）编写前台实现代码。
test_hello.html用来测试showHello方法test_add.html用来测试showAdd方法test_list.html用来测试showList方法下面先讲test_hello.html建立test_hello.html

在 页面中引入刚刚提到的三个js提交按钮添加onclick效果，执行的方法为OnSave()下面引入js

说明：username 和password分别获取网页上控件的用户名和密码值，两个if判断其值是否为空，如果为空，提示用户并且终止提交，从而实现登陆验证。User.showHello：Hello是后台dwr配置中的js名称，showHello是后台业务逻辑实现函数，此函数有三个参 数，username和password是入参，CallBackMsg是一个回调函数，系统将返回值放在回调函数里面显示。

（10）代码工作完成，现在进行实际测试。重新部署项目，启动服务器。在浏览器中打开网页：

首先填写口令及姓名都为222，提交数据后显示：

下面查看一下数据库是否存在该数据：

数据显示正常。下 面我们再回到页面，重复提交一遍数据。

提示fail。说明用户禁止重复提交数据，showHello()功能完成。（11）如test_hello.html的操作方法，我们创建test_add.html及test_list.html首先是test_add.html因为它与test_Hello.html功能相似都是提交数据功能。而唯一与test_hello.html不同的是接受的数据不同。Test_add对应函数是

它需要接收一个User对象，所以这时一定要设置dwr.xml中的convert对象

该程序会自动将数据转换成User对象。该页的html代码与test_Hello.html相同，只是js不同，js如下：

下面赶紧测试一下：http://127.0.0.1:8080/combine/test_add.html如果效果相同，则证明功能完成。

（11）test_list.html测试showList（）方法两点需要注意：第一showList（）为无参方法，所以只需要传入回调函数即可。第二返回的数据为对象数组，使用for语句进行数据读取。Html代码如下：

下面测试功能：http://127.0.0.1:8080/combine/test_list.html

没错就是一个按钮：点击按钮后页面显示如下：

Ok,全部完成。