dwr入门 -- 01 -- Hello Word

最新推荐文章于 2021-03-11 11:05:00 发布

最新推荐文章于 2021-03-11 11:05:00 发布 · 99 阅读

文章标签：

#DWR #Servlet #JavaScript #JavaEE #Web #ViewUI

AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用 Direct Web Remoting (DWR) 技术实现 Java 后端与前端 JavaScript 的无缝交互。从创建 WEB 项目到部署测试，通过具体步骤展示了 DWR 的配置与使用方法。

dwr：http://directwebremoting.org/dwr/index.html

1、新建WEB项目,把dwr.jar放在WEB-INF/lib下.

2、修改web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

	<!-- 新增的dwr配置 -->
	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>uk.ltd.getahead.dwr.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>

3、写个测试类有hello方法：

package com.xx;

public class Test {
	public String hello(String name) {
		return "您好！" + name;
	}
}

4、现在在web.xml同级目录下添加dwr.xml文件

<!DOCTYPE dwr PUBLIC 
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" 
    "http://www.getahead.ltd.uk/dwr//dwr20.dtd">
<dwr>
	<allow>
		<create creator="new" javascript="Hello">
			<param name="class" value="com.xx.Test" />
		</create>
	</allow>
</dwr>

5、然后修改index.jsp -- WebRoot下：

<%@ 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>dwr : hello word</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">
	-->
		<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='打招呼' onclick='hello();' />
		<div id="result"></div>
	</body>
</html>

6、同级目录添加hello.js：

function hello() {
	var user = $('user').value;
	Hello.hello(user, callback);
}

function callback(msg) {
	DWRUtil.setValue('result', msg);
}

7、部署,启动服务器,访问,测试！

附带：工程 & 效果图