dwr例子

最新推荐文章于 2017-10-23 11:16:00 发布

iteye_3921

最新推荐文章于 2017-10-23 11:16:00 发布

阅读量108

点赞数

分类专栏： java技术文章标签： DWR JavaScript Servlet Struts Ajax ViewUI

java技术专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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

一、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" οnkeyup="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>的設定