先说下引入这个dwr包的好处:
第一,它可以让js和后台语言交互,而且用户不用太了解它的逻辑。
第二,它可以让用户不用懂太宽泛的后台知识,只要会配置文件即可,不会涉及什么servlet。
第三,它能让后台语言的方法映射成js的方法,可以直接吧后台方法当成js方法用,很方便。
第四,鉴于第三种优势,后台程序可以完全取代js的方法体。
第五,结构清晰,逻辑清晰,后台语言工具丰富容易方便调试优势也能体现出来。
操作步骤:
1,下载dwr.jar
下载地址:http://download.csdn.net/detail/god123209/3607394
2,把下载的dwr.jar放到server\default\deploy\test\WEB-INF\lib文件夹下,其中test是发布工程时deploy location的文件名,一般为工程名,deploy location怎么修改参考http://blog.csdn.net/god123209/article/details/6728938。
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">
<display-name>ajaxDWR</display-name>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<description></description>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>4,添加配置文件dwr.xml
内容为
<?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>
<create creator="new" javascript="Hello">这个是映射成的js函数名可以修改
<param name="class" value="dwr.Hello" />这个是java后台类名(完整的路径)js要调用该类的方法,可以用映射的js名直接·方法名即可。
</create>
</allow>
</dwr>5,添加js文件整合一个完整的功能,这里添加为hello.js内容如下
function hello() {
var user = $('user').value;
Hello.hello(user, callback);//调用类中的方法
}
function callback(msg) {
DWRUtil.setValue('result', msg);//dwr封装的一个改变前台页面中id = "result"的控件的值的方法。
}
6,前台页面这里为hello.html内容如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我的第一个AJax程序</title>
<script type='text/javascript' src='dwr/interface/Hello.js'></script>//这几条引用必须写
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='hello.js'></script>
</head>
<body>
<input id="user" type="text" />
<input type='button' value='你好' οnclick='hello();' />
<div id="result"></div>//显示刚才js文件中msg变量的数据
</body>
</html>
7,java后台代码package dwr;
public class Hello {
public String hello(String name) {
return "你好,这是" + name + "的第一个Ajax";
}
}
8,发布工程看效果
效果图:
点击确定前
填入文本框后
点击你好后按钮后效果图
至此第一个ajax程序就编写完成。