dwr入门实例一

最新推荐文章于 2012-12-04 18:13:24 发布

宅男小何

最新推荐文章于 2012-12-04 18:13:24 发布

阅读量1k

点赞数

分类专栏： dwr 文章标签： dwr DWR

本文链接：https://blog.csdn.net/lazy_p/article/details/6220687

版权

dwr 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上面一篇文章简单的讲解了，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;" οnmοuseοver="tabonmouseover(this);" id="tab">  
                新闻  
            </ol>  
            <ol οnmοuseοver="tabonmouseover(this);">  
                手机  
            </ol>  
            <ol οnmοuseοver="tabonmouseover(this);">  
                Blog  
            </ol>  
            <ol οnmοuseοver="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>