dwr例子

gzcj

浏览: 291388 次
性别:
来自: 北京

最近访客更多访客>>

njdccy

LinApex

tlds119

sunanwenjun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java技术

DWR JavaScript Servlet Struts Ajax

应该是半原创吧，自己改了点，然后又调试了一下。

一、web.xml的修改
首先要使用dwr，需要修改web.xml，要在web.xml里加入如下配置

<servlet>
   <display-name>DWR Servlet</display-name>
   <servlet-name>dwr-invoker</servlet-name>
   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
   <init-param>
    <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>

其中的<servlet-mapping>不论是什么应用中要加入dwr都是使用<url-pattern>/dwr/*</url-pattern>这个值。
二、配置dwr.xml
要使用dwr还要配置dwr.xml，其配置项比较多，如下所示：

<dwr>
        <allow>
                <create creator="new" javascript="Demo">
                        <param name="class" value="dwrtest.Demo" />
                </create>
                <create creator="struts" javascript="testFrm">      
                  <param name="formBean" value="testActionForm"/> 
                </create> 
               <create creator="new" javascript="inputtest">
                 <param name="class" value="dwrtest.inputTest"/>
               </create>
           <convert converter="bean" match="dwrtest.UserBean"/>
        </allow>
</dwr>

其中，creator表示由什么方式来生成对象，可以是struts，也可以是spring。
javascript表示在客户端生成的js的文件名，也是在js脚本里所使用的对象名称。
具体的参数解释，以后补充。
三、在指定的包里写java类文件

package dwrtest;

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

public class inputTest {
    private List names = new ArrayList();
    
    public inputTest(){
        names.add("abe");
        names.add("abeo");
        names.add("a王");
        names.add("ahner");
        names.add("javap");
        names.add("marcus");
        names.add("北沟");
        names.add("marge");
        names.add("tianjing");
        names.add("北京");
        names.add("上海");
    }
    
    public List getNames(String name){
        NameService service = NameService.getInstance(names);
        List matching = service.findNames(name);
        return matching;
        
    }
}

四、在jsp中调用dwr

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type='text/javascript' src='/dwr/dwr/engine.js'> </script>
<script type='text/javascript' src='/dwr/dwr/util.js'> </script>
<script type='text/javascript' src='/dwr/dwr/interface/inputtest.js'> </script>
<style type="text/css">
.mouseOut {
background: #708090;
color: #FFFAFA;
}
.mouseOver {
background: #FFFAFA;
color: #000000;
}
</style>
<script type="text/javascript">
/*var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function findNames() {
initVars();
if (inputField.value.length > 0) {
createXMLHttpRequest();
var url = "/testajax/AutoCompleteServlet";
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = callback;
xmlHttp.send("names=" +inputField.value );
} else {
clearNames();
}
}
*/

function findNames() {
initVars();
if (inputField.value.length > 0) {
inputtest.getNames(inputField.value,setNames);
}
else
{
clearNames();
}
}
function initVars() {
inputField = document.getElementById("names");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
nameTableBody = document.getElementById("name_table_body");
}

/*
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
} else if (xmlHttp.status == 204){
clearNames();
}
}
}*/

function setNames(the_names) {
 clearNames();
 var size = the_names.length;
 setOffsets();
 var row, cell, txtNode;
 for (var i = 0; i < size; i++) {
  var nextNode = the_names[i];
  row = document.createElement("tr");
  cell = document.createElement("td");
  cell.onmouseout = function() {this.className='mouseOver';};
  cell.onmouseover = function() {this.className='mouseOut';};
  cell.setAttribute("bgcolor", "#FFFAFA");
  cell.setAttribute("border", "0");
  cell.onclick = function() { populateName(this); } ;
  txtNode = document.createTextNode(nextNode);
  cell.appendChild(txtNode);
  row.appendChild(cell);
  nameTableBody.appendChild(row);
 }
}

function setOffsets() {
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
nameTable.style.width = end + "px";
}

function calculateOffsetLeft(field) {
return calculateOffset(field, "offsetLeft");
}

function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop");
}

function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}

function populateName(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}

function clearNames() {
var ind = nameTableBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
</script>


</head>
<body>
Names:
<input type="text" size="20" id="names" onkeyup="findNames();"
        style="height:20;" />

<div style="position:absolute;" id="popup">
<table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0"
        cellpadding="0" />
        <tbody id="name_table_body"></tbody>
</table>
</div>
OK
</body>
</html>

其中的黑体字所表示的js的名称与dwr.xml配置的是一致的。在调用的时候所用的名称也是他，如文中的黑体字所示。
在findNames里调用了由dwr生成的inputtest.getNames(inputField.value,setNames);其中，setNames是返回结果后
的处理函数。本jsp中还包含了传统的ajax的调用，注释部分就是传统的ajax的调用方式。
五、部分参数解释
dwr.xml中加入struts的設定,其中formBean的參數的value值,會對應到struts-config.xml中<form-beans>的設定

分享到：

我的3个爸爸2个妈 | dwr理解

2008-07-25 19:50
浏览 3379
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

dwr例子

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

dwr例子

评论

发表评论

相关推荐

java阻塞队列学习（转帖）

httpclient链接关闭问题（转帖）

J2EE集群原理（转贴）

Spring 实现ibatis事务回滚

java 可变参数

java中的string

使用JDBC对BLOB和CLOB进行处理

避免或最小化 Servlet 中的同步

httpclient 使用小记

httpclient 学习笔记

log4j使用

java虚拟机的一些概念

xmlbean 生成带包路径的jar

多线程中使用静态方法

java Annotation入门

MINA2.0简单使用

log4j参数配置说明

portal之SSO开发文档

cas在tomcat中的配置

SSO 原理浅谈

最近访客更多访客>>