dwr入门实例一

来源：互联网发布：中国根域名服务器在哪编辑：程序博客网时间：2024/05/02 02:21

上面一篇文章简单的讲解了，dwr的一些配置步骤。现在我们就自己东西写一个dwr应用的一个实例吧。

写实例前，我们还的学习一个dwr的基本知识点，就是写javascript代码。

我还是根据官方的教材用我理解的讲解下吧（ps：由于本人的英语水平有限，至今未过cet4，杯具啊，

所有并没有一句一句的翻译啦，就是写个我理解的大体意思，具体的还是的各位自己去官方看英文文档吧，哈哈）

编写第一步：首先在你的jsp或者其他显示脚本的页面中加入下面两行代码，引入js控件：

第一个[YOUR-SCRIPT]这个其实就是你在dwr.xml中配置的javascript属性的值.
下面我们讲解一些规则：
1.首先我们还是写个完整的示例吧。
后台的java类：
public class DwrTest{ public String test1(String str){ return str; } public String test2(String str, String[]s){ String ss = str; for(String s1 : s) ss+=s1; return ss; }}

2.web.xml的编写，dwr.xml文件的编写，这里我就不把web.xml的编写的代码贴出来了，大家可以看我上一篇文章《dwr入门》

<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="DwrDemo">
<param name="class" value="demo.DwrTest"/>
</create>
</allow>
</dwr>

3.编写前台页面：

首先你得加入两个js文件，这是有dwr框架生成的。

<script src='/[YOUR-WEBAPP]/dwr/interface/DwrDemo.js'></script>

<script src='/[YOUR-WEBAPP]/dwr/engine.js'></script>
DwrDemo.test1('dwr test',function(str){
alert(str)；
});

DwrDemo.test2('dwr test2' , ['a','b','c'],function (str){
alert(str);

});
这里接受java返回值，用的是回调函数来接受的。如果没有返回值，那么可以去掉这个回调函数。

回调函数还有两个属性：一个数设置超时timeout，一个数发生异常时调用的函数errorHandler属性。

例如：
Remote.test1('abc', {
callback:function(str) { alert(str); },
timeout:5000,
errorHandler:function(message) { alert("Oops: " + message); }

});

注意：javascript不支持java的overreload。

更权威，更详细的请看官方文档：http://directwebremoting.org/dwr/introduction/scripting-dwr.html

下面就是测试了：在游览器地址栏中输入：http://localhost:8080/[webname]/[页面名字]

下面是我结合前面写的tab菜单的实例加入了dwr功能的tab菜单实例代码：

package loon.dwr.demo;    public class TabSelected {        public String showContent(String tabMenuName) {          // System.out.println(tabMenuName);          if (tabMenuName.trim().equals("新闻"))              return "* 实拍：大浪袭来新人被拍沙滩上" + "* 退休交警上课如脱口秀引爆网络" + "* 实拍：韩国活埋感染口蹄疫病猪"                      + "* 女排联赛罕见一幕发16球得15分";          else if (tabMenuName.trim().equals("手机"))              return "手机";          else if (tabMenuName.trim().equals("篮球"))              return "篮球";          else if (tabMenuName.trim().equals("Blog"))              return "Blog";          return "";      }    }  dwr.xml代码：  <!DOCTYPE dwr PUBLIC   "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"   "http://getahead.org/dwr/dwr30.dtd">    <dwr>      <allow>          <create creator="new" javascript="Demo">              <param name="class" value="loon.dwr.demo.TabSelected"/>          </create>      </allow>  </dwr>  web.xml省略，参照前面的文章的。  jsp文件：  <%@ 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>          <meta http-equiv="Content-Type" content="text/html; charset=GBK">          <title>tab菜单</title>          <style type="text/css"><!--              body {                  font-family: Arial, Helvetica, sans-serif;                  font-size: 15px;              }                            ul {                  list-style-type: none;                  margin: 0;                  padding: 0;              }                            ul ol {                  float: left;                  display: block;                  text-align: center;                  background-color: #CCC;                  border: 1px #CCC solid;                  margin: 0 0 0 5px;                  padding: 0px;                  width: 60px;              }                            ul ol#tab {                  margin-bottom: 0px;                  border-bottom: 0px;                  background-color: #FFF;              }                            div#content {                  clear: both;                  border-top: 0px;                  border-left: 1px #CCC solid;                  border-right: 1px #CCC solid;                  border-bottom: 1px #CCC solid;                  margin: 0px;                  padding: 0;                  width: 261px;                  height: 150px;              }                    </style>          <javascript type='text/javascript' src="/tab/dwr/interface/Demo.js" ></javascript>          <javascript type='text/javascript' src="/tab/dwr/engine.js"></javascript>          <javascript type="text/javascript">            function tabonmouseover(obj){                  /*                  var ol = document.getElementsByTagName("ol");                                    for (i = 0; i < ol.length; i++) {                  ol[i].id = "";                  }*/                  document.getElementById("tab").id = "";                                    obj.id = "tab";                  Demo.showContent(obj.innerHTML, function(content){                      document.getElementById("content").innerHTML = content;                  });              }                </javascript>      </head>      <body>          <ul>              <ol style="margin-left: 0px;" mce_style="margin-left: 0px;" onmouseover="tabonmouseover(this);" id="tab">                  新闻              </ol>              <ol onmouseover="tabonmouseover(this);">                  手机              </ol>              <ol onmouseover="tabonmouseover(this);">                  Blog              </ol>              <ol onmouseover="tabonmouseover(this);">                  篮球              </ol>          </ul>          <div id="content">              新闻内容          </div>          <javascript type="text/javascript"><!--              Demo.showContent(document.getElementById("tab").innerHTML, function(content){                  document.getElementById("content").innerHTML = content;              });                    </javascript>      </body>  </html>