DWR框架对于Ajax的轻量级使用

前端之家收集整理的这篇文章主要介绍了DWR框架对于Ajax的轻量级使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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>
3:配置dwr.xml文件,新建一个dwr.xml文件,和web.xml在同一目录下,也即WEB-INF/ 下面
<?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对象之间转换
creator=“new” 表示类的生成方式,"new"意味着DWR应该调用类的默认构造函数来获得类的实例
其他的还有spring方式,通过与IOC容器Spring进行集成来获得实例等等。
javascript指定js代码访问java对象时候的名称
<include>标签指定要公开给JavaScript的方法,不指定的话公开所有的方法
<exclude>标签指定要防止被访问的方法
-->
<create javascript="MyDwr" creator="new">
<!--指定name=class表示其为类属性 value对应java中需要转换的类的全名 -->
<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";
}
}
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>
6:index,jsp编写调用java方法的JS函数
<script language="javascript">
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()"/>
&nbsp;&nbsp;
<input type="button" value="清空" onclick="javascript:clearName()"/><br/>
<input type="text" id="demo1"/><br>
</body>
附带:DWR工作原理图解

猜你在找的Ajax相关文章