java学习网为广大的java爱好者提供最全最新的java教程 java源代码,希望大家多多支持本站,更多的java教程 java源码尽在java学习
Google
 

ajax入门 ajax使用方式3-java学习

4、使用DWR进行ajax开发

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本 DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-logging日记操作官方,本文版本是DWR2.0 ,具体详情请访问DWR官方网站。

4.1、业务需求

通过一个简单的二级菜单来说明DWR的使用

4.2、业务实现

前台页面:

 1一级菜单:
 2        <select id="tct" onchange="findSub2()">
 3            <option>
 4                0001
 5            </option>
 6            <option>
 7                0002
 8            </option>
 9        </select>
10        二级菜单:
11        <select name="subCode" id="subName"></select>
12
13

js脚本:

1    <script src="${ctx}/dwr/interface/ExamDictionaryManager.js"></script>
2        <script type="text/javascript">
3function findSub2(){
4ExamDictionaryManager.findSubNameList(dwr.util.getValue("tct"),function(obj){
5dwr.util.removeAllOptions("subCode");
6dwr.util.addOptions("subCode",obj,'subCode','subName');
7});
8}
9</script>

上面引用的${ctx}/dwr/interface/ExamDictionaryManager.js是后台操作的业务类,在这需要声明
findSub2()方法是触发一级菜单的值传到后台业务方法进行处理并返回
dwr.util.removeAllOptions("subCode");是把二级菜单subCode值先清空
dwr.util.addOptions("subCode",obj,'subCode','subName');是把二级菜单名称是subCode的以subCode为value,subName为text

提示:DWR2.0与DWR1.1的区别,是传入参数和回调函数顺序不同

DWR2.0:  

红色字体是表明是参数在前,回调函数在后
1ExamDictionaryManager.findSubNameList(dwr.util.getValue("tct"),function(obj){
2dwr.util.removeAllOptions("subCode");
3dwr.util.addOptions("subCode",obj,'subCode','subName');
4});
5

DWR1.1:

红色字体表明是回调函数在前,参数在后

1ExamDictionaryManager.findSubNameList(function(obj){
2dwr.util.removeAllOptions("subCode");
3dwr.util.addOptions("subCode",obj,'subCode','subName');
4},dwr.util.getValue("tct"));
5}

dwr.xml文件

 1<?xml version="1.0" encoding="UTF-8"?>
 2<!DOCTYPE dwr PUBLIC
 3    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
 4    "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
 5
 6<dwr>
 7
 8  <create creator="spring" javascript="ExamDictionaryManager">
 9      <param name="beanName" value="examDictionaryManager"/>
10    </create>
11</dwr>

spring配置文件

<bean id="examDictionaryManager"
        class="com.gresoft.sanitation.service.examapply.ExamDictionaryManager" />


web.xml配置


 1<!-- DWR servlet,生产环境应该Debug为false -->
 2    <servlet>
 3        <servlet-name>dwr-invoker</servlet-name>
 4        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
 5        <init-param>
 6            <param-name>debug</param-name>
 7            <param-value>true</param-value>
 8        </init-param>
 9        <load-on-startup>1</load-on-startup>
10    </servlet>
11
12    <servlet-mapping>
13        <servlet-name>dwr-invoker</servlet-name>
14        <url-pattern>/dwr/*</url-pattern>
15    </servlet-mapping>








业务方法:

1public List findSubNameList(String typeCode) {
2
3        String hql = "select distinct new map(d.subCode as subCode,d.subName as subName) from ExamDictionary as d "
4                + "where d.typeCode =:typeCode";
5        return createQuery(hql).setString("typeCode", typeCode).list();
6    }
7

通过前台js脚本传入的参数返回查询的数据集合 

页面显示效果:

至此,二级级联菜单功能已经完成,通过上述例子,可以发现DWR框架为我们处理我们之前用XML或JSON进行数据转换
的功能,大大提高了开发者开发效率。

ajax入门 ajax使用方式2-ajax基础


[本日志由 java教程 于 2008-01-08 06:08 PM 编辑]
文章来自: 本站原创
引用通告地址: http://www.java125.cn/trackback.asp?tbID=2564
Tags:
评论: 0 | 引用: 4063 | 查看次数: 3158
淘宝 [2010-07-07 04:08 PM]
标题: 淘宝
链接: http://sinyv.com/
摘要: 欢迎访问新雨淘宝网站。1697

UGG boots [2010-07-07 04:05 PM]
标题: UGG boots
链接: http://www.cun4.com/
摘要: UGG boots1744

减肥 [2010-07-07 04:04 PM]
标题: 减肥
链接: http://sinyv.com/index/0A/
摘要: 减肥1527

pumps [2010-07-07 04:04 PM]
标题: pumps
链接: http://www.vvivvcn.cn/
摘要: pumps4349

淘宝导购 [2010-07-07 04:03 PM]
标题: 淘宝导购
链接: http://sinyv.com/index/0F/index.htm
摘要: 欢迎访问新雨淘宝导购网站。7901

丰胸 [2010-07-07 04:03 PM]
标题: 丰胸
链接: http://sinyv.com/index/0B/index.htm
摘要: 欢迎访问新雨丰胸网站。6369

brand clothing [2010-07-07 04:03 PM]
标题: brand clothing
链接: http://www.ankvi.com/
摘要: brand clothing4637

丰胸 [2010-07-07 11:38 AM]
标题: 丰胸
链接: http://sinyv.com/index/0B/index.htm
摘要: 欢迎访问新雨丰胸网站。9840

发表评论
昵 称:
密 码: 游客发言不需要密码.
验证码:
内 容:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 20 字 | UBB代码 关闭 | [img]标签 关闭