接触dwr

DWR：Easy AJAX for JAVA，在web2.0时代，ajax扮演着十分重要的角色，它使一个web站点更加人性化。如今java仍然是企业开发的首选，相应的也就有很多 ajax框架支持java，像dwr，dojo等。应用dwr可以方便的实现浏览器上的javascript方法调用运行在web服务器上java方法， DWR会根据你的Java类动态的生成Javascript代码。这些代码的魔力是让你感觉整个Ajax调用都是在浏览器上发生的，但事实上是服务器执行了这些代码，DWR负责数据的传递和转换。

我从网上找了个例子，经过多方修改，终于可以运行了，写下来作个纪念。

本例要完成的任务：

1．增加表格的行2 删除一行 3 编辑选定的一行，这些操作都不会刷新页面，而是通过dwr调用server端的java方法，在客户端动态更新。

1下载dwr的lib

2 和其他框架一样，应用dwr，需要在web。Xml加入拦截器，如下：

<?xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_ID" 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>dwr</display-name>

<servlet-name>dwr-invoke</servlet-name>

<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr-invoke</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>editable.jsp</welcome-file>

</welcome-file-list>

</web-app>

3 还需要一个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>

</allow>

</dwr>

看到了吧，这里就定义了如何让javascript调用远端的java方法，这里还有很多细节，以后看看再写。这里创建了一个javascript对象 People，dwr根据java类demo.People生成客户端js文件。然后People就可以用java代码一样调用远端的java方法。

4 接下来我写一个server端的java代码：

People。Java

package demo;

import java.util.Set;

import java.util.HashSet;

import java.util.Random;

public class People {

private Random rd=new Random();

public Set getAllPeople() {

return people;

}

public void setPerson(Person person) {

if (person.getId() == -1) {

person.setId(getNextId());

}

people.remove(person);

people.add(person);

}

private int getNextId() {

return rd.nextInt(100);

}

public void deletePerson(Person person) {

people.remove(person);

}

private Set people = new HashSet();

}

Person。Java

package demo;

public class Person{

private int id;

private String name;

private String address;

private float salary;

public int hashCode() {

final int PRIME = 31;

int result = 1;

result = PRIME * result + ((name == null) ? 0 : name.hashCode());

return result;

}

public boolean equals(Object obj) {

if (this == obj)

return true;

if (obj == null)

return false;

if (getClass() != obj.getClass())

return false;

final Person other = (Person) obj;

if (name == null) {

if (other.name != null)

return false;

} else if (!name.equals(other.name))

return false;

return true;

}

public String getAddress() {

return address;

}

public void setAddress(String address) {

this.address = address;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public float getSalary() {

return salary;

}

public void setSalary(float salary) {

this.salary = salary;

}

好了，这就是server端的java代码。

5 客户端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

function init() {

fillTable();

}

var peopleCache = { };

var viewed = -1;

function fillTable() {

People.getAllPeople(function(people) {

dwr.util.removeAllRows("peoplebody", {

filter:function(tr) {

return (tr.id != "pattern");

}

});

var person, id;

people.sort(function(p1, p2) { return p1.name.localeCompare(p2.name); });

for (var i = 0; i < people.length; i++) {

person = people[i];

id = person.id;

dwr.util.cloneNode("pattern", { idSuffix:id });

dwr.util.setValue("tableName" + id, person.name);

dwr.util.setValue("tableSalary" + id, person.salary);

dwr.util.setValue("tableAddress" + id, person.address);

$("pattern" + id).style.display = "";

peopleCache[id] = person;

}

});

}

function editClicked(eleid) {

var person = peopleCache[eleid.substring(4)];

dwr.util.setValues(person);

}

function deleteClicked(eleid) {

var person = peopleCache[eleid.substring(6)];

if (confirm("Are you sure you want to delete " + person.name + "?")) {

dwr.engine.beginBatch();

// People.deletePerson({ id:id });

People.deletePerson(person);

fillTable();

dwr.engine.endBatch();

}

function writePerson() {

var person = { id:viewed, name:null, address:null, salary:null };

dwr.util.getValues(person);

dwr.engine.beginBatch();

People.setPerson(person);

fillTable();

dwr.engine.endBatch();

}

function clearPerson() {

viewed = -1;

dwr.util.setValues({ id:-1, name:null, address:null, salary:null });

}

</script>

</head>

<body>

<h3>All People</h3>

<thead>

<tr>

<th>Person</th>

<th>Salary</th>

<th>Actions</th>

</tr>

</thead>

<td>

<small><span id="tableAddress">Address</span></small>

</td>

<td>$<span id="tableSalary">Salary</span></td>

<td>

</td>

</tr>

</tbody>

</table>

<h3>Edit Person</h3>

<tr>

</tr>

<tr>

<td>Salary:</td>

</tr>

<tr>

<td>Address:</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

这里要注意的是

Dwr是你web的虚拟目录，其它的javascript方法这里就不解释了，感觉这些javascript写的很精巧。

就这样，一个简单的dwr就好了，非常简单吧。

总结：

Dwr真的很酷，这也让我更喜欢javascript了，脚本语言有些特性真是太酷了，回调，动态执行，也难怪ruby这样受欢迎。同时也看到了，这里用dwr可以直接调用java的server方法，那java MVC框架是否还再需要。随着富客户端的发展，也许真的能统一java MVC世界。

发表于 2008-06-14 15:02 jacshan 阅读(104) 评论(0) 编辑收藏所属分类: ajax

常用链接

留言簿(1)

文章分类

文章档案

搜索

最新评论

jacshan
BlogJava \| 首页 \| 发新随笔 \| 发新文章 \| 联系 \| 聚合 \| 管理	随笔：1 文章：7 评论：0 引用：0