使用DWR实现JS调用JAVA类的简单例子

前端之家收集整理的这篇文章主要介绍了使用DWR实现JS调用JAVA类的简单例子前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.新建一个普通javaweb项目,下载dwr.jar包,将jar包拷入到项目的lib库中,并构建路径.

2.在web.xml文件中做一下配置:

  1. <servlet>
  2. <servlet-name>dwr-invoker</servlet-name>
  3. <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  4. <init-param>
  5. <param-name>debug</param-name>
  6. <param-value>true</param-value>
  7. </init-param>
  8. </servlet>
  9. <servlet-mapping>
  10. <servlet-name>dwr-invoker</servlet-name>
  11. <url-pattern>/dwr/*</url-pattern>
  12. </servlet-mapping>

3.在与web.xml的同级目录下添加文件dwr.xml,并加入如下代码:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE dwr PUBLIC
  3. "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
  4. "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
  5. <dwr>
  6. <allow>
  7. <create creator="new" javascript="Test">
  8. <param name="class" value="com.dwr.test.Test" />
  9. </create>
  10. </allow>
  11. </dwr>

其中:

每一个被代理的JAVA类都会放在<allow>标签下.

javascript属性是为在JSP中所引用的Java类起的一个名字,通常和类名相同。

creator属性用于设置JAVA类是什么类型,new代表一个普通类型。

<param>标签中的value值为所代码的JAVA类的类路径,包括包名和类名.

4.编写相应的JAVA类.注意,你所编写的类路径一定要与dwr.xml中设置的路径保持一致.

假设编写的类为Test.java.类路径为com.test.Test,代码如下:

  1. package com.dwr.test;
  2. /**
  3. * dwr测试
  4. * @author lichao
  5. * May 4,2013 -- 5:44:59 PM
  6. */
  7. public class Test {
  8. public String hello(String name){
  9. return "hello" + name +"!!";
  10. }
  11. }

5.测试并获取相应的JS代码.在浏览器中输入http://localhost:8080/${你的项目名}/dwr,则会出现如下页面:

展开后:

前两个红框框住的内容是JSP页面需要引用的代码.最后一个红框框的内容相当于是一个测试,输入一个字符串后,点击"Execute"后会执行相应的JAVA代码(即Test类里面的内容).

6.新建一个JSP页面.假设命名为hello.jsp.我们来实现一个功能,点击一个按钮后,弹出一个欢迎框出来.需添加如下代码:

  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5. <title>My JSP 'index.jsp' starting page</title>
  6. <script type='text/javascript' src='/test_DWR/dwr/interface/Test.js'></script>
  7. <script type='text/javascript' src='/test_DWR/dwr/engine.js'></script>
  8. <script type='text/javascript' src='/test_DWR/dwr/util.js'></script>
  9. <script>
  10. function hello(){
  11. var user =$("user").value;
  12. Test.hello(user,callback);
  13. }
  14. function callback(message){
  15. alert(message);
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <input id="user" type="text" />
  21. <input type="button" value="test" onclick="hello();">
  22. </body>
  23. </html>


其中,前面引用的JS文件代码是直接从测试页面拷贝过来的.

7.访问hello.jsp页面.测试一下结果就完成了.

猜你在找的Ajax相关文章