`
akun_007
  • 浏览: 26496 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

dwr小例子

DWRJavaJavaScriptServletAjax 
阅读更多
   最近在项目中使用了ajax来实现一个三级下拉菜单，同时在用户登录时也用到了ajax，在看同事写的ajax代码时发现他用到了dwr，所以今天抽空学习了一下dwr，写了两个小例子。
 
1、点击“getToday”按钮，在文本框中显示今天的日期；点击“getYesterday”按钮，在文本框中显示昨天的日期。
首先下载dwr的jar文件，并把他放到你的WEB-INF/lib文件夹下；
然后在web.xml文件中加入以下代码：

<servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <display-name>DWR Servlet</display-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
    </servlet>
  </servlet-mapping>
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

接着，在于web.xml同级目录下新建dwr.xml文件，并加入下面的代码：

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr//dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="Demo">
      <param name="class" value="com.dwrtest.java.GetDate"/>
    </create>
  </allow>
</dwr>

新建页面，我这里使用的是freemarker，换做html和jsp也一样效果，代码如下：

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src='dwr/interface/Demo.js'></script>
  <script src='dwr/engine.js'></script>
  <script language="javascript">
    function gettoday() {
      Demo.getToday(setMytext);
    }
    function getYesterday() {
      Demo.getYesterday(setMytext);
    }
    function setMytext(str) {
      document.getElementById('mytext').value = str;
    }
  </script>
    <title></title>
  </head>
  <body>
    <input type="button" value="getToday" onclick="gettoday();"/>
    <input type="button" value="getYesterday" onclick="getYesterday();"/>
    <input type="text" value="" name="mytext" id="mytext"/>
  </body>
</html>

java文件GetData.java代码如下：

 

package com.dwrtest.java;

import java.text.SimpleDateFormat;
import java.util.Date;

public class GetDate {

    public String getToday() {
        SimpleDateFormat bartDateFormat = new SimpleDateFormat("EEEE-MMMM-dd-yyyy");
        Date date = new Date();
        return bartDateFormat.format(date);
    }

    public String getYesterday() {
        SimpleDateFormat bartDateFormat = new SimpleDateFormat("EEEE-MMMM-dd-yyyy");
        Date date = new Date();
        return bartDateFormat.format(new Date(date.getTime() - 86400000));
    }
}

这样编译以后，启动tomcat就可以看到效果了。

这里的java文件和dwr基本没有什么联系，它的两个方法也不是专门为dwr而写的，显而易见，这两个方法的目的是格式化当天和前一天的时间，并返回他们的String形式。

而在dwr.xml中，我们这样引入了他们，

    <create creator="new" javascript="Demo">
      <param name="class" value="com.dwrtest.java.GetDate"/>
    </create>

这样在javascript中直接使用“Demo”了。

我们可以看到，在页面的js中这样引入了Demo,

<script src='dwr/interface/Demo.js'></script>

在gettoday()和getYesterday()中，调用了Demo.getToday(setMytext)，意思是将return的值作为setMytext的参数传到setMytext()中。

2、二级的联动菜单，三级、四级都也可以这样做

页面代码：

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src='dwr/interface/ListTest.js'></script>
  <script src='dwr/engine.js'></script>
  <script src="dwr/util.js"></script>
  <script language="javascript">
    function updateClass() {
      ListTest.getClassList(createClass);
    }
    function createClass(data) {
      DWRUtil.removeAllOptions("classid");
      DWRUtil.addOptions("classid", data);
    }
    function updateUser() {
      ListTest.getUserList(DWRUtil.getValue("classid"),createUser);
    }
    function createUser(data) {
      DWRUtil.removeAllOptions("userid");
      DWRUtil.addOptions("userid", data);
    }
  </script>
    <title></title>
  </head>
  <body onload="updateClass()">
    Class:<select name="classid" id="classid" onchange="javascript:updateUser();"></select><br>
    User:<select name="userid" id="userid"></select>
  </body>
</html>

可以看到，引入了<script src="dwr/util.js"></script> 。

java文件ListTest.java的代码：

package com.dwrtest.java;

import java.util.LinkedHashMap;
import java.util.Map;

public class ListTest {

    public Map getClassList() {
        Map map = new LinkedHashMap();
        map.put("0", "请选择");
        map.put("1", "班级一");
        map.put("2", "班级二");
        map.put("3", "班级三");
        return map;
    }

    public Map getUserList(String id) {
        Map map = new LinkedHashMap();
        if(id.equals("1")) {
            map.put("1", "同学一");
            map.put("2", "同学二");
            map.put("3", "同学三");            
        } else if(id.equals("2")) {
            map.put("4", "同学四");
            map.put("5", "同学五");
            map.put("6", "同学六");            
        } else if(id.equals("3")) {
            map.put("7", "同学七");
            map.put("8", "同学八");
            map.put("9", "同学九");
        } else {
            map.put("", "请选择");
        }
        return map;
    }
}
最后在dwr.xml中添加下面代码：

<create creator="new" javascript="ListTest">
      <param name="class" value="com.dwrtest.java.ListTest"/>
    </create>
这样，二级的联动就做好了。
分享到：
| JSP中文乱码解决方案-Tomcat5.0版
评论
发表评论

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

相关推荐

    DWR小例子_DEMO

    这个"DWR小例子_DEMO"是帮助开发者理解并快速上手DWR的一个实践项目，其中包含了说明文件和必要的代码示例。 DWR的核心功能是允许前端JavaScript直接调用后端Java方法，仿佛它们是在同一环境中运行一样，消除了传统...

    dwr小例子,适合初学者使用

    这个“dwr小例子”是一个适合初学者入门的教程，它将帮助你理解DWR的工作原理和基本使用方法。 首先，让我们了解DWR的核心功能： 1. **反向Ajax**：DWR实现了从客户端到服务器的异步通信，即JavaScript可以调用...

    dwr 小例子 用于新手入门学习

    在"DW小例子 用于新手入门学习"中，我们可以通过分析提供的文件`ajax01`来理解DWR的基本用法和工作原理。 1. **DWR简介** DWR的主要功能是创建一个安全的、高效的通信层，允许JavaScript直接调用服务器上的Java...

    DWR小代码小例子

    通过"TestDWR"这个例子，你可以学习如何设置DWR的基本环境，编写可远程调用的Java类，以及在前端使用DWR提供的JavaScript API进行交互。这是一个很好的起点，可以帮助你理解DWR的工作原理，并逐步掌握其在实际项目中...

    java dwr 使用例子

    在这个例子中，虽然没有提供完整的`dwr.xml`内容，但通常这个文件会包含哪些Java类或方法应该被暴露给JavaScript，以及一些其他的配置选项。 总结来说，这个Java DWR的例子展示了如何设置一个简单的Ajax应用，包括...

    dwr 例子

    在这个名为“dwr例子”的压缩包中，包含了一个名为“dwrdemo1”的示例项目。这个项目可能是一个简单的DWR应用，用于展示如何配置和使用DWR框架。下面，我们将详细讨论DWR的关键概念和使用方法。 1. **DWR配置**： ...

    dwr基础_dwr兼容三大框架+视频

    `DWR小例子.avi`可能是一个视频教程，展示了具体的DWR使用步骤和实例，包括如何设置MyEclipse环境，创建DWR配置文件，编写Java服务端代码，以及在HTML/JavaScript客户端进行调用。 `readme.txt`通常包含项目的基本...

    dwr简单例子

    通过学习这个简单的DWR例子，你可以了解到如何在实际项目中集成DWR，以及如何利用它来构建动态、交互性强的Web应用。这将有助于提升你的Web开发技能，尤其是对于那些希望增强前端和后端交互能力的开发者来说。

    DWR入门例子（一个很好的dwr入门例子）

    在这个"DWR入门例子"中，我们将深入探讨如何使用DWR进行服务器和客户端之间的数据交换。 1. **DWR基本概念** - **反向AJAX**: DWR的核心理念是反向AJAX，即由服务器主动向客户端推送数据，而不仅仅是响应客户端的...

    简单使用dwr完整例子

    在这个"简单使用DWR完整例子"中，我们将深入理解DWR的基本概念、配置、以及如何在SSH（Spring、Struts、Hibernate）技术框架下集成和应用DWR。 首先，了解DWR的核心概念至关重要。DWR通过JavaScript API使得Java...

    extjs_dwr整合例子

    本压缩包文件"Extjs+Dwr"提供了一个整合ExtJS和DWR的例子，让我们来详细探讨一下这两个技术以及它们的整合过程。 **ExtJS** 是一个JavaScript库，主要用于构建桌面级的Web应用。它提供了一套完整的UI组件，包括数据...

    DWR 3.0例子程序原码

    在"**DWR 3.0例子程序原码**"中，我们可以深入理解DWR的核心特性和使用方式。这个压缩包文件包含了名为`dwr0.1`的子文件，这很可能是示例程序的源代码或者是特定版本的DWR库。通过研究这些代码，我们可以学习以下...

    Dwr功能小例子

    在这个"Dwr功能小例子"中，我们将探讨DWR的基本用法和核心概念。 1. **DWR概述**： DWR的核心理念是消除JavaScript和Java之间的通信障碍，使得前端开发人员可以方便地调用后端的Java方法，就像调用本地函数一样。...

    springMVC整合dwr完整例子

    这个例子将帮助你理解SpringMVC和DWR的集成，让你能够创建动态、互动的Web应用，提供更好的用户体验。在实践中，你还需要考虑安全性、性能优化和其他实际开发中的问题。不断学习和探索，你将能够驾驭这两个强大的...

    Ajax(DWR实现例子)

    DWR（Direct Web Remoting）是一个开源JavaScript库，它使得在浏览器端可以直接调用服务器端的Java方法，实现了JavaScript与服务器端的双向通信，简化了Ajax应用的开发。 在DWR中，有三个主要的组件： 1. **DWR ...

    struts2+dwr整合例子，部署后可直接用

    "struts2+dwr整合例子"是一个结合了这两种技术的示例项目，它展示了如何将Struts2的控制层与DWR的Ajax功能集成在一起。在这个例子中，可能包含了以下关键部分： 1. **Struts2配置**：在struts.xml或类似的配置文件...

    dwr 使用例子，一目了然

    标题"使用DWR的例子"暗示我们将讨论如何在实际项目中应用DWR。DWR的核心特性包括自动类型转换、安全机制、缓存管理以及错误处理等。在这个例子中，我们可能会看到如何配置DWR引擎，创建Java服务，以及在客户端...

    springMVC+dwr完整例子

    SpringMVC和Direct Web Remoting (DWR) 是两种...以上就是"springMVC+dwr完整例子"中的主要知识点，通过这个例子，开发者可以学习如何在实际项目中结合使用这两种技术，构建一个既高效又能提供良好用户体验的Web应用。

    dwr入门例子 返回list

    在“dwr入门例子 返回list”这个主题中，我们将深入探讨如何使用DWR从服务器返回列表数据到客户端。列表通常包含多个项目，如数据库查询结果，这些数据可以在网页上以表格或其他形式展示给用户。DWR提供了方便的方法...

    DWR 实用例子小集

    **DWR（Direct Web Remoting）实用例子小集** DWR（Direct Web Remoting）是一种在Web应用程序中实现Ajax（Asynchronous JavaScript and XML）技术的Java库。它允许JavaScript在客户端与服务器端进行直接交互，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics