DWR框架在Ajax中的初级应用
所谓DWR的定义借助百度百科解释为:DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。
之所以现在要学习了解一下DWR框架在Ajax中的应用,是因为自己最近在做一个小的项目,里面用到了DWR框架来将JAVA对象转换成JS对象,并且实现和浏览求交互,从而实现了异步通信。
下面以一个简单的入门例子来聊聊自己对DWR框架应用的理解(以web项目为例子)
1:首先,下载dwr.jar包(顺便附带下载一下commons-logging-1.1.jar,若是不用到此包的话,我们在运行项目的时候会报org.apache.commons.logging.LogFactory异常错误,影响程序的执行),将其放置于application的WEB-INF/lib目录下。
2:配置web.xml文件
<!-- 配置DWR 核心Servlet -->
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<!-- 使用DWR框架自身的Servlet -->
<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>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<!-- 使用DWR框架自身的Servlet -->
<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>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<!-- 为java类配置DWR,从而让其可以在javascript和java对象之间转换
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<!-- 为java类配置DWR,从而让其可以在javascript和java对象之间转换
其他的还有spring方式,通过与IOC容器Spring进行集成来获得实例等等。
-->
<create javascript="MyDwr" creator="new">
<create javascript="MyDwr" creator="new">
<!--指定name=class表示其为类属性 value对应java中需要转换的类的全名 -->
<param name="class" value="com.dwr.test.DwrTest"></param>
</create>
</allow>
</dwr>
<param name="class" value="com.dwr.test.DwrTest"></param>
</create>
</allow>
</dwr>
4:新建一个java类
package com.dwr.test;
public class DwrTest {
public DwrTest(){
}
public String getMyName(){
return "Clark Cao";
}
}
public class DwrTest {
public DwrTest(){
}
public String getMyName(){
return "Clark Cao";
}
}
5:index.jsp中引入javascript脚本
<!-- 自己定义的一个dwr.xml文件中对应的js对象 -->
<script type="text/javascript" src="dwr/interface/MyDwr.js"></script>
<!-- DWR框架自带的两个js文件,在jar包下面可以找到 -->
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/MyDwr.js"></script>
<!-- DWR框架自带的两个js文件,在jar包下面可以找到 -->
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script language="javascript">
var mycall=function callBack(data){
DWRUtil.setValue("demo1",data);
}
//直接通过java中的类名.method();
function showMyName(){
MyDwr.getMyName(mycall);
}
function clearName(){
demo1.value="";
}
</script>
var mycall=function callBack(data){
DWRUtil.setValue("demo1",data);
}
//直接通过java中的类名.method();
function showMyName(){
MyDwr.getMyName(mycall);
}
function clearName(){
demo1.value="";
}
</script>
7:index.jsp添加按钮
<body>
<h1>
Ajax Test Page With DWR
</h1>
<input type="button" value="显示姓名" onclick="javascript:showMyName()"/>
<input type="button" value="清空" onclick="javascript:clearName()"/><br/>
<input type="text" id="demo1"/><br>
</body>
<h1>
Ajax Test Page With DWR
</h1>
<input type="button" value="显示姓名" onclick="javascript:showMyName()"/>
<input type="button" value="清空" onclick="javascript:clearName()"/><br/>
<input type="text" id="demo1"/><br>
</body>
附带:DWR工作原理图解