当前位置： 代码迷 >> Web前端 >> DWR->开发详解及运用
  详细解决方案

DWR->开发详解及运用

热度：211   发布时间：2012-10-10 13:58:11.0
DWR--------->开发详解及应用

DWR（Direct Web Remoting）是一个开源的类库,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样.
它包含两个主要的部分:允许JavaScript从WEB服务器上一个遵循了AJAX原则的Servlet(小应用程序)中获取数据.另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容.
DWR采取了一个类似AJAX的新方法来动态生成基于JAVA类的JavaScript代码.这样WEB开发人员就可以在JavaScript里使用Java代码就像它们是浏览器的本地代码(客户端代码)一样;但是Java代码运行在WEB服务器端而且可以自由访问WEB 服务器的资源.出于安全的理由,WEB开发者必须适当地配置哪些Java类可以安全的被外部使用.
这个从JAVA到JavaScript的远程功能方法给DWR的用户带来非常像传统的RPC机制,就像RMI或者SOAP一样,而且拥有运行在WEB上但是不需要浏览器插件的好处.
DWR不认为浏览器/WEB服务器协议是重要的,而更乐于保证编程界面的简单自然.对此最大的挑战就是把AJAX的异步特性和正常JAVA方法调用的同步特性相结合.在异步模式下,结果数据在开始调用之后的一段时间之后才可以被异步访问获取到.DWR允许WEB开发人员传递一个回调函数,来异步处理Java函数调用过程.
http://getahead.org/dwr 官方网站　会自动转到　http://directwebremoting.org/dwr
http://directwebremoting.org/最新官方网址

1.web.xml加入
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
2.在web.xml文件目录下，建立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 creator="new" javascript="MyHello">
<param name="class" value="com.MyHello" />
</create>
</allow>
</dwr>

3.com.MyHello
package com;

public class MyHello {
public String hi(String name) {
return "欢迎:" + name + ",数据已经保存到数据中...";
}

public void save(String name) {
DbConn dc = new DbConn();
String sql = "insert into stu values('" + name + "')";
dc.save(sql);
System.out.println(name);
}
}
com.DbConn
package com;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DbConn {
String Driver = "com.mysql.jdbc.Driver";
String URL = "jdbc:mysql://localhost:3306/db";
String UID = "root";
String PWD = "";
Connection conn = null;

public void getConn() {
try {
Class.forName(Driver);
conn = DriverManager.getConnection(URL, UID, PWD);
} catch (Exception e) {
}
}

public void save(String sql) {
if (conn == null) {
this.getConn();
try {
conn.createStatement().executeUpdate(sql);
conn.close();
} catch (Exception e) {
// TODO: handle exception
}
}
}
}

4.复制所有的dwr框架的jar文件到lib目录下

5.编写index.html文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DWR_Hello</title>
<script type="text/javascript" src="dwr/interface/MyHello.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript">
function hello() {
var user = $("user").value;
MyHello.hi(user, callback);
MyHello.save(user);
}
function callback(msg) {
DWRUtil.setValue("result", msg);
}
</script>

</head>
<body>
<input id="user" type="text" />
<input type="button" value="保存数据" onclick="hello()" />
<div id="result"></div>
</body>
</html>

?


DWR
Direct Web Remoting
直接的 网 远程的
Easy AJAX for JAVA
旧官方网址
getahead.org/dwr
最新官方网址
directwebremoting.org
1.web.xml加入
<servlet>
<servlet-name>dwr-invoker</>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
2.dwr.xml和web.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 creator="new" javascript="mtest" scope="application">
<param name="class" value="com.MyTest" />
</create>
<convert converter="bean" match="com.User" />
</allow>
</dwr>

3.相关类和表态页代码
com.User
package com;

public class User {
private String id;
private String name;
private String password;

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

}

com.MyTest
package com;

import java.util.ArrayList;
import java.util.List;

public class MyTest {

public void save(User u) {
System.out.println(u.getId());
System.out.println(u.getName());
System.out.println(u.getPassword());
}

public void wr(String st) {
System.out.println(st);
}

public String getStr(String s) {

String ss = "欢迎" + s;
System.out.println(ss);

return ss;
}

public int getInt(int i) {

return i;
}

public User getUser(String ss) {
User u = new User();
if (ss.equals("10")) {
u.setId("10");
u.setName("张三");
u.setPassword("admin");
}
return u;
}

public List getUsers(String mys) {
List list = new ArrayList();

User u = new User();
u.setId("10");
u.setName("张三");
u.setPassword("admin");

User u1 = new User();
u1.setId("11");
u1.setName("张三丰");
u1.setPassword("pwd");
list.add(u);
list.add(u1);
return list;

}
// public static void main(String[] args) {
// MyTest mt = new MyTest();
// System.out.println(mt.getUser("100").getId());
// }
}

index.html
<html>
<head>
<title>Dwr 入门案例测试</title>
<script type="text/javascript" src="dwr/interface/mtest.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
</head>

<body>
<input type="text" id="username" />
<button>
保存
</button>
<div id="show"></div>
</body>

<script type="text/javascript">
function save(){
//var s = {};
//s.id="ok";
//s.name="张三";
//s.password="admin";
//var s = $("username").value;
//mtest.save(s);
//mtest.getStr(s,callback);
}
function cbc(data){
alert(data.id);
}
function getInfo(){
var s = $("username").value;
//mtest.getUser("10",cbc);
mtest.getUsers("10",cba);
}

function cba(data){
alert(data.length);
alert(data[1].id);
for(var i in data){
alert(data[i].name);
}
}

function cb(msg){
//$("show").innerText = msg;
//DWRUtil.setValue("result", msg);
alert(msg);
}
//document.getElementsByTagName("button")[0].onclick=save;
document.getElementsByTagName("button")[0].onclick=getInfo;
</script>
</html>

二级联动效果代码
<script type="text/javascript">
function ab()
{
//cd.findCustomer(cb);
cd.findAllCustomer(cb);
}
function cb(data)
{
var shi=document.getElementById("shi");
for(var x in data)
{
var op=document.createElement("option");
op.innerText=data[x].name;
shi.appendChild(op);
//alert(data[x].name);
}

}
</script>
</head>

<body>
级联动态加载
<hr/>
省:<select name="sheng" id="sheng" onchange="ab()">
<option value="hn">河南</option>
<option value="hb">河北</option>
</select>
&nbsp;&nbsp;
市：<select name="shi" id="shi">
<option>请选择....</option>
</select>
<br/>
<button onclick="ab()">测试</button>

4.复制所有jar文件到lib中
bsf-2.3.jar
bsh-2.0b4.jar
commons-logging-1.0.4.jar
commons-validator-1.1.4.jar
dwr.jar
jakarta-oro-2.0.8.jar
log4j-1.2.12.jar

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.