DWR入门测试
DWR入门测试：
1、下载dwr.jar,本人使用版本2.0.5
2、建立web项目，加入dwr的jar包至lib目录下，根据需要可能还要加入commons-logging.jar
3、配置web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!-- 配置dwr的listener -->
<listener>
<listener-class>
org.directwebremoting.servlet.EfficientShutdownServletContextAttributeListener
</listener-class>
</listener>
<listener>
<listener-class>
org.directwebremoting.servlet.EfficientShutdownServletContextListener
</listener-class>
</listener>
<!-- 配置dwr的Servlet映射 -->
<servlet>
<!-- 指定DWR核心Servlet的名字 -->
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>
<!-- 指定DWR核心Servlet的实现类 -->
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<!-- 指定DWR核心Servlet处于调试状态 -->
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- 匹配模式使用/dwr/*，其他的我没有测试，有兴趣可以试试 -->
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
4、建立业务逻辑类AjaxService.java以供页面调用，我的理解是dwr框架是java类和javaScript的转换桥梁，以提
供在view层直接调用java类暴露的相关方法，至于java类如何提供页面调用的接口是由dwr.xml来配置的。
package com.zxm.ajax.dwrtest;
public class AjaxService {
// public String sayHello(String name) {
// // 可以是访问数据库的复杂代码
// return "欢迎您：" + name + ",恭喜DWR测试成功！";
// }
public AjaxService() {
}
public String getMyName(String v){
return "Hello Ajax,The Value is:" + v;
}
}
5、在WEB-INF下建立dwr.xml文件并配置：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<!-- create标签映射java类到javascript-->
<!-- creator="new"表示新建，javascript="MyTest"表示javascript的名字，scope="application"是作用域-->
<create creator="new" javascript="MyTest" scope="application">
<!-- 参数名 name="class"表示映射的是class，value是我们的业务逻辑类 -->
<param name="class" value="com.zxm.ajax.dwrtest.AjaxService" />
</create>
</allow>
</dwr>
6、view调用index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 链接dwr为我们映射的javaScript文件 -->
<!-- 名称就是dwr.xml中指定的名称MyTest，前面加上“dwr/interface/” -->
<script src="dwr/interface/MyTest.js"></script>
<!-- 链接dwr为我们提供的两个js文件，不要将其考到自己建立的文件夹中 -->
<script src="dwr/util.js"></script>
<script src="dwr/engine.js"></script>
<!-- 页面调用 -->
<%-- <script type="text/javascript">--%>
<%-- function myFirstDwr(){--%>
<%-- service.sayHello
(document.myform.user.value,callBackTest)--%>
<%-- }--%>
<%-- function callBackTest(data){--%>
<%-- alert(data);--%>
<%-- }--%>
<%-- </script>--%>
<!-- 页面调用，正常编写js代码 -->
<script language="javascript">
var mycall=function callBack(data){
alert(data);
//使用dwr的函数将得到的返回值填入id为nameTest的输入框
DWRUtil.setValue("nameTest",data);
}
function showMyName(){
var v=document.getElementById("appValues").value;
//调用业务逻辑提供的接口，将返回值交给回调函数mycall
MyTest.getMyName(v,mycall);
}
function clearName(){
nameTest.value="";
}
</script>
</head>
<body>
<%-- <form name="myform">--%>
<%-- <input type="text" name="user">--%>
<%-- <input type="button" name="button" value="test"--%>
<%-- onclick="myFirstDwr();">--%>
<%-- </form>--%>
INPUT: <input type="text" id="appValues">
<br>
OUTPUT:<input type="text" id="nameTest">
<br>
<input type="button" value="showName" onclick="javascript:showMyName()">
<input type="button" value="Clear" onclick="javascript:clearName()">
</body>
</html>
7、部署运行：首先在IE中输入 http://localhost:8080/TestDWR/dwr来测试dwr是否映射成功，如果成功，会显示
如：MyTest (com.zxm.ajax.dwrtest.AjaxService)，前面表示js名称，括号里的表示映射的类，点击MyTest会显
示当前类的所有方法，包括继承至Object的方法，可以找到相应的方法进行测试。然后在IE中输入
http://localhost:8080/TestDWR/index.jsp进行真正的测试，输入相关值，点击相关按钮会有相应的输出并在后
台打印Exec: MyTest.getMyName()信息，至此dwr入门示例完成。
ps:dwr还可以与其他框架集成，如spring，暂不讨论，文中被注释的也是dwr测试，只不过是不带参数的，只有一个回调函数。
1、下载dwr.jar,本人使用版本2.0.5
2、建立web项目，加入dwr的jar包至lib目录下，根据需要可能还要加入commons-logging.jar
3、配置web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!-- 配置dwr的listener -->
<listener>
<listener-class>
org.directwebremoting.servlet.EfficientShutdownServletContextAttributeListener
</listener-class>
</listener>
<listener>
<listener-class>
org.directwebremoting.servlet.EfficientShutdownServletContextListener
</listener-class>
</listener>
<!-- 配置dwr的Servlet映射 -->
<servlet>
<!-- 指定DWR核心Servlet的名字 -->
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>
<!-- 指定DWR核心Servlet的实现类 -->
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<!-- 指定DWR核心Servlet处于调试状态 -->
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- 匹配模式使用/dwr/*，其他的我没有测试，有兴趣可以试试 -->
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
4、建立业务逻辑类AjaxService.java以供页面调用，我的理解是dwr框架是java类和javaScript的转换桥梁，以提
供在view层直接调用java类暴露的相关方法，至于java类如何提供页面调用的接口是由dwr.xml来配置的。
package com.zxm.ajax.dwrtest;
public class AjaxService {
// public String sayHello(String name) {
// // 可以是访问数据库的复杂代码
// return "欢迎您：" + name + ",恭喜DWR测试成功！";
// }
public AjaxService() {
}
public String getMyName(String v){
return "Hello Ajax,The Value is:" + v;
}
}
5、在WEB-INF下建立dwr.xml文件并配置：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<!-- create标签映射java类到javascript-->
<!-- creator="new"表示新建，javascript="MyTest"表示javascript的名字，scope="application"是作用域-->
<create creator="new" javascript="MyTest" scope="application">
<!-- 参数名 name="class"表示映射的是class，value是我们的业务逻辑类 -->
<param name="class" value="com.zxm.ajax.dwrtest.AjaxService" />
</create>
</allow>
</dwr>
6、view调用index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 链接dwr为我们映射的javaScript文件 -->
<!-- 名称就是dwr.xml中指定的名称MyTest，前面加上“dwr/interface/” -->
<script src="dwr/interface/MyTest.js"></script>
<!-- 链接dwr为我们提供的两个js文件，不要将其考到自己建立的文件夹中 -->
<script src="dwr/util.js"></script>
<script src="dwr/engine.js"></script>
<!-- 页面调用 -->
<%-- <script type="text/javascript">--%>
<%-- function myFirstDwr(){--%>
<%-- service.sayHello
(document.myform.user.value,callBackTest)--%>
<%-- }--%>
<%-- function callBackTest(data){--%>
<%-- alert(data);--%>
<%-- }--%>
<%-- </script>--%>
<!-- 页面调用，正常编写js代码 -->
<script language="javascript">
var mycall=function callBack(data){
alert(data);
//使用dwr的函数将得到的返回值填入id为nameTest的输入框
DWRUtil.setValue("nameTest",data);
}
function showMyName(){
var v=document.getElementById("appValues").value;
//调用业务逻辑提供的接口，将返回值交给回调函数mycall
MyTest.getMyName(v,mycall);
}
function clearName(){
nameTest.value="";
}
</script>
</head>
<body>
<%-- <form name="myform">--%>
<%-- <input type="text" name="user">--%>
<%-- <input type="button" name="button" value="test"--%>
<%-- onclick="myFirstDwr();">--%>
<%-- </form>--%>
INPUT: <input type="text" id="appValues">
<br>
OUTPUT:<input type="text" id="nameTest">
<br>
<input type="button" value="showName" onclick="javascript:showMyName()">
<input type="button" value="Clear" onclick="javascript:clearName()">
</body>
</html>
7、部署运行：首先在IE中输入 http://localhost:8080/TestDWR/dwr来测试dwr是否映射成功，如果成功，会显示
如：MyTest (com.zxm.ajax.dwrtest.AjaxService)，前面表示js名称，括号里的表示映射的类，点击MyTest会显
示当前类的所有方法，包括继承至Object的方法，可以找到相应的方法进行测试。然后在IE中输入
http://localhost:8080/TestDWR/index.jsp进行真正的测试，输入相关值，点击相关按钮会有相应的输出并在后
台打印Exec: MyTest.getMyName()信息，至此dwr入门示例完成。
ps:dwr还可以与其他框架集成，如spring，暂不讨论，文中被注释的也是dwr测试，只不过是不带参数的，只有一个回调函数。