DWR Java调用js_使用DWR实现JS调用服务端Java代码

本文详细介绍了DWR(Direct Web Remoting)框架,它允许前端JS直接调用服务端Java代码。通过步骤演示了如何配置DwrServlet、创建dwr.xml配置文件、编写Java服务类,并在JS中调用这些服务。最后展示了测试结果,直观地展示了DWR简化前后端交互的能力。
摘要由CSDN通过智能技术生成

DWR简介

DWR全称Direct Web Remoting,是一款非常优秀的远程过程调用(Remote Procedure Call)框架,通过浏览器提供的Ajax引擎实现在前端页面的JS代码中调用服务端Java代码。使用它我们可以非常方便的和服务端进行交互,轻松获取服务端返回的数据。

下面是DWR官方网站地址:

http://www.directwebremoting.org/dwr/introduction/index.html

DWR的使用

接下来我们看一下如何使用这款框架:

1.获取DWR所需Jar包

笔者选择的版本为1.1.2版。

下载完成后將两个jar包拷贝到web工程的WEB-INF/lib目录下。

2.在web.xml文件中配置DwrServlet

打开web工程WEB-INF目录下的web.xml文件,配置处理请求的Servlet,具体内容如下:

dwr_web

index.jsp

dwr

org.directwebremoting.servlet.DwrServlet

debug

true

dwr

/dwr/*

2.创建dwr配置文件dwr.xml

在web.xml所在目录下创建dwr的配置文件dwr.xml,配置文件内容如下:

/p>

"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"

"http://getahead.org/dwr/dwr30.dtd">

在dwr.xml文件中我们通过allow标签定义了一个支持JS调用的服务端的类com.csii.dwr.service.HelloWorldService,接下来的工作就是编写HelloWorldService类。

3.创建支持JS调用的服务器端的Java类

package com.csii.dwr.service;

public class HelloWorldService {

public String sayHello(String username)

{

return "Hello World!" + username;

}

}

在HelloWorldService 类中我们定义了一个sayHello方法,该方法返回一个字符串。在JS中我们就可以通过helloworldService.sayHello(str)形式直接调用服务器端定义的函数。

4.查看服务端公开的支持JS调用的服务

部署应用后,在浏览器中输入http://localhost:8080/dwr_web/dwr/可以查看服务端公开了哪些支持JS调用的服务。

b0d2d55341fb4d961fba92483395002b.png

可以看到我们在dwr配置文件dwr.xml中定义的helloworldService,点击连接可以进入服务的测试界面。

a6e1dcd8c1c9b4ab22025fa9474ae0d0.png

这里我们可以测试sayHello方法。在文本框中输入内容,点击Execute按钮即可。

5.在JS调用公开的服务

要想在JS中调用服务端公开的服务,我们需要將engine.js和helloworldService.js引入到页面中(上图测试界面有相关说明),引入代码上如下:

接下来我们编写一个JSP页面,在JSP中使用helloworldService服务:

pageEncoding="utf-8"%>

Index Page

测试

return helloworldService.sayHello("Rongbo_J",callBack);

}

var callBack = function(data)

{

alert(data);

}

我们在页面中添加了一个按钮,点击按钮是调用sayHello方法,在sayHello方法中通过helloworldService.sayHello("Rongbo_J",callBack)形式调用服务端sayHello函数,第二个参数是一个回调函数用于接收服务端返回的数据。在回调函数中我们弹出服务器端返回的内容。

在浏览器中预览效果如下:

dc97c15d4b90921f5618c3f56e5b8987.gif

可以看到服务端返回的数据HelloWorld!Rongbo_J

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值