第一个ajax小实例（借助dwr包）

最新推荐文章于 2016-06-12 11:52:38 发布

iteye_10189

最新推荐文章于 2016-06-12 11:52:38 发布

阅读量79

点赞数

文章标签： java javascript web.xml ViewUI

先说下引入这个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程序就编写完成。