使用Ajax框架
1.简化JavaScript的开发难度
2.解决浏览器的兼容性问题

3. 简化开发流程

经常使用Ajax框架

Prototype

一个纯粹的JavaScript函数库，对Ajax提供良好支持

jQuery

1．很优秀的JavaScript库，对Ajax提供了良好的支持

2．与Prototype设计思想不同的是在使用jQuery之后，开发人员操作的不再是DOM对象而是jQuery对象

DWR

1.        很专业的Java Ajax框架

2.        通过DWR框架，可将Java类的方法直接暴露给client

Dojo

①　Dojo功能强大，包括很多内容，Ajax仅仅是当中之中的一个

②　特点在于控件和控件系统

③　眼下Dojo仍然在开发完好中，版本号更新速度很快

AjaxTags

由一系列JSP标签组成，将经常使用的Ajax应用场景封装为简单的标签

使用DWR框架简化Ajax开发

1. DWR（Direct Web Remoting）是一个Java Ajax框架
2. DWR框架同意开发者在client通过JavaScript代码调用server端的Java方法
3. DWR框架主要由两部分组成：
1．clientJavaScript代码直接调用server端Java方法
2．server上执行的DWR核心Servlet负责处理client请求，将client请求托付到实际的Java对象进行处理，并将结果返回给client

下载DWR框架

DWR的官方网站：
http://directwebremoting.org/dwr/downloads/index.html
各下载项说明：
1. JAR File：该选项仅下载dwr.jar文件
2. WAR File：该选项下载dwr.jar文件及其其它依赖的类库，还包含DWR的使用范例
3. Sources：该选项下载DWR的源文件

安装DWR

1．加入dwr.jar文件到WEB-INF/lib文件夹下
2．改动web.xml文件，加入例如以下代码

   <servlet><servlet-name>dwr_invoker</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class><init-param><!--初始化參数，debug开发时设置--><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>

3 创建dwr.xml文件
1.与web.xml文件位于同一文件夹
2.该文件用于定义Java类和JavaScript之间的相应关系，将Java类的方法暴露给client
其结构例如以下：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN""http://getahead.org/dwr/dwr30.dtd">
<dwr><allow><!-- 创建脚本对象 --><create creator="..." javascript="..." scope="..."><!-- 要公布的类名 --><param name="..." value="..." /><!-- 暴露给client的，要公布的方法名 --><include method="…" /><!-- 不暴露给client的 --><exclude method="…" /></create><!-- js和服务端的对象进行转换 --><convert converter="..." match="..." /></allow>
</dwr>

dwr.xml具体解释 （參考dwr.xml）

<allow>元素：定义了DWR可以创建和转换的类，是dwr.xml中最重要的元素

<create>元素：创建器定义怎样将一个Java类转换成JavaScript对象

<convert >元素：类型转换器，用于定义Java类型和JavaScript类型之间的相应关系

<create>元素的属性：

creator属性：DWR内置多个创建器用于处理多种类型Java类

javascript属性：在client给创建的JavaScript对象命名。该名字将在页面里作为js被导入

scope属性：作用域。选项能够是：application, session,request和page。默觉得page

<create>元素的子元素：

<param>元素：用来指定创建器的參数。当中name属性用来指定參数名称，value指定參数的值

<include>元素：定义同意訪问的方法列表，其它方法将不暴露给client

<exclude>元素：定义不同意訪问的方法列表，当中method属性指定不被暴露给client的方法（其它没指定的方法默认暴露给client）

<convert>元素

全部基本类型，boolean、 int 、double等等

包装类，Boolean、Integer等等

java.lang.String

日期类型，如：java.util.Date 和 java.sql.Times、java.sql.Timestamp等

数组(存放以上类型的)

集合类型 (List、Set、Map、Iterator等等)

Bean转换器

用于完毕JavaBean对象和JavaScript对象之间的转换

DWR默认关闭Bean转换器

假设须要进行JavaBean对象和JavaScript对象之间的转换，须要在dwr.xml中显式设置

<convert converter="bean"match="www.dwrdemo.DwrBean"/>

为Webproject加入DWR支持，样例：

创建web Project ：DWRDemo
增加DWR jar包 ；
(要增加commons-logging.jar)
改动web.xml文件：加servlet 
 <servlet><servlet-name>dwr_invoker</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class><init-param><!--初始化參数，debug开发时设置--><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>

创建dwr.xml文件 （參考

dwr30.dtd：/org/directwebremoting/dwr30.dtd

和dwr.xml：/org/directwebremoting/dwr.xml

写）

与web.xml文件位于同一文件夹（能够放在src下，可是须要要在web.xml配置的

Servlet里面加

<init-param>

<param-name>config</param-name>

<param-value>/WEB-INF/classes/dwr.xml</param-value>

</init-param>

初始化的时候，会调用源代码里面的相应方法

）

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN""http://getahead.org/dwr/dwr30.dtd">
<dwr><allow><!-- 创建脚本对象 --><create creator="new" javascript="DwrDemoDate" scope="application" ><!-- 要公布的类名 --><param name="class" value="java.util.Date" /></create></allow>
</dwr>

部署，訪问：http://localhost:8080/DWRDemo/dwr

Bean转换器

用于完毕JavaBean对象和JavaScript对象之间的转换

DWR默认关闭Bean转换器

假设须要进行JavaBean对象和JavaScript对象之间的转换，须要在dwr.xml中显式设置

<convert converter="bean"match="www.dwrdemo.DwrBean"/>

以下举例：

样例 使用Bean转换器

新建DwrService 在com包下，加入以下方法：
public DwrBean getDwrBean(){
return new DwrBean();
}
DwrBean在com包下 加入私有属性message和它get set方法；

Dwr.xml配置：在<allow>里面加入：
<create creator="new" javascript="DwrService" scope="application">
<!-- 要公布的类名 -->
<param name="class" value="com.DwrService" />
</create>
<convert converter="bean" match="com.DwrBean" />
重新启动訪问 http://localhost:8080/DWRDemo/dwr 点击第二个

样例：使用DWR实现页面载入时输出当前的时间等

DWR 怎样简化Ajax 开发
http://localhost:8080/DWRDemo/dwr/test/DwrDemoDate前面两行script导入index，编写js
index.jsp：

  </head><!-- 导入DWR的JavaScript文件--> <script type='text/javascript' src='/DWRDemo/dwr/engine.js'></script><!-- 导入DWR为Java对象动态生成的JavaScript文件--> <script type='text/javascript' src='/DWRDemo/dwr/interface/DwrDemoDate.js'></script><script type="text/javascript">function init(){//调用Date对象的toString（）方法，load为回调函数DwrDemoDate.toString(load); }function load(data){document.getElementById("time").innerHTML = data;}</script><body><input id="" type="button" οnclick="init()" value="show" /><dir id="time"></dir></body>

重新启动tomcat訪问主页；http://localhost:8080/DWRDemo/

点击show，以下显示出当前时间；

样例：在页面输出client输入的信息

在DwrService加入方法：

public DwrBean getDwrBean(String message) {
DwrBean db = new DwrBean();
db.setMessage(message);
return db;
}

将public DwrBean getDwrBean()凝视；
在Index.jsp加入
http://localhost:8080/DWRDemo/dwr/test/DwrService前面script
<script type='text/javascript' src='/DWRDemo/dwr/interface/DwrService.js'></script>
 在js和body里面增加：

 function getMessage(){var msg=document.getElementById("myMsg").value; DwrService.getDwrBean(msg,showMsg);}function showMsg(bean){document.getElementById("message").innerHTML = bean.message;}<body><input id="myMsg"><input id="" type="button" οnclick="getMessage()" value=" showMsg" /><dir id="message"></dir></body>

重新启动tomcat，訪问主页，输入文字，点击showMsg使用的是ajax技术；
我们能够在DwrService里面的方法getDwrBean加入：
System.out.println(message);
重新启动执行的时候，能够看到控制台输出 我们输入的信息，意味着我们能够訪问数据库等操作；
使用DWR框架能够异步訪问服务端对象

脚本文件说明：

engine.js

1．engine.js对DWR很重要，它是DWRclient的核心，用来把动态生成的JavaScript对象转换为server上的Java对象

该函数库可用于设置一些DWR的全局属性

dwr.engine.setTimeout(time)，以毫秒为单位设置请求超时的时间

dwr.engine.setHttpMethod(method)，该方法仅仅能设置两个值POST和GET

dwr.engine.setOrdered(boolean)，Ajax通常都是异步调用，但server响应的顺序与调用顺序往往不同，使用dwr.engine.setOrfered(true)语句，DWR将保证请求的顺序与server响应的顺序一致

2．util.js

1.        util.js文件里包括了一些工具函数，通过这些函数的帮助，将简化JavaScript操作

2.        util.js提供一些主要的页面操作函数，通过这些函数能够方便的操作HTML元素

3.        util.js文件与DWR框架关系不是特别大，能够在不论什么不同的网页中使用（即便该project没有DWR支持）

补充说明:

$( )函数

$( )函数依据指定ID查找页面中的HTML元素

简单的讲以下两个一样的意思：

$(ID)= document.getElementById(ID)

使用 $() 使代码更简洁、更清晰

在index.jsp导入：

<script type='text/javascript' src='/DWRDemo/dwr/util.js'></script>

在js里面加入：

//$( )函数

      function test(){

var msg=$('message').innerHTML;

alert(msg);

}

body加入；

<input id="test1"type="button"onclick="test()"value="使用$( )函数"/>

刷新页面，要先在myMsg框输入信息，在点击showMsg，id为message才有内容，才干够做上面的实验，然后点击使用$( )函数

getValue() 和setValue()函数

getValue()函数和setValue()函数用于简化訪问和改动HTML元素的值

dwr.util.getValue(id)：返回HTML元素的值

dwr.util.setVlaue(id，value [,options])：依据第一个參数中指定的id找到对应元素，并依据第二个參数value改变该元素的值

在index.jsp导入：

<scripttype='text/javascript' src='/DWRDemo/dwr/util.js'></script>

在js加入：

//getValue() 和setValue()函数

      function set(){

var value=dwr.util.getValue('set');

dwr.util.setValue('myMsg',value);

}

在body加入：

<input id="set"type="button"onclick="set()"value="getValue()得到的值"/>

刷新页面，点击getValue()得到的值后将信息显示到id为myMsg的输入框上；

列表操作函数

dwr.util.removeAllOption(id)：用于删除列表中的全部项

dwr.util.addOptions()：用于加入列表项

 

表格操作函数

DWR提供两个函数帮助我们操作表格

dwr.util.removeAllRows(id)：删除table中全部行

dwr.util.addRows(id,array,cellFuncs,[options])：向表中加入数据行

源代码和所用到的jar包下载：

http://pan.baidu.com/s/1i3p9pYX

转载于:https://www.cnblogs.com/mfrbuaa/p/3839715.html

Ajax框架,DWR介绍，应用，样例相关推荐

  1. b/s模式下的即时通讯，使用ajax框架dwr实现

    b/s模式下的即时通讯,使用ajax框架dwr实现 了解java的发展史可以知道,客户端编程在基于浏览器的编程方面,以前的做法是用applet实现客户端编程,在当时算是流行的做法,但是随着IE的不一致 ...

  2. Ajax框架DWR入门

    Direct Web RemotingDWR allows Javascript in a browser to interact with Java on a server and helps yo ...

  3. python nose测试框架全面介绍十---用例的跳过

    又来写nose了,这次主要介绍nose中的用例跳过应用,之前也有介绍,见python nose测试框架全面介绍四,但介绍的不详细.下面详细解析下 nose自带的SkipTest 先看看nose自带的S ...

  4. Java日志框架-SLF4J入门 [ LogBack 样例实现 ]

    概述 slf4j只是一个日志标准,并不是日志系统的具体实现. 我们编程的时候只需要操作slf4j,具体底层实现不关注,只需要配置即可. slf4j只做两件事情: 提供日志接口 提供获取具体日志对象的方 ...

  5. ajax框架dwr开发

    dwr实现AJAX非常先进.比如动态生成javaScript代码:隐藏的HTTP协议,javascript用于java代码交互的javaScript对象. 自从我开始DWR感觉DWR是用javaScr ...

  6. 用python + hadoop streaming 编写分布式程序（一） -- 原理介绍，样例程序与本地调试

    原文地址:http://www.cnblogs.com/joyeecheung/p/3757915.html 相关随笔:  点击打开链接 Hadoop-1.0.4集群搭建笔记 用python + ha ...

  7. Google Guava常用工具类入门使用介绍及样例说明

    一 概述 工具类将经常用的一些方法进行了封装,遇到相同的场景时不需要重复造轮子,从而大量节省开发人员时间和提高工作效率,Guava就是谷歌发布的高效率的方法的工具包.Guava的优势: API的设计高 ...

  8. Ajax框架及原理分析--视频

    Ajax框架及原理分析 下载地址:http://v.51work6.com/courseInfoRedirect.do?action=courseInfo&courseId=240576 AJ ...

  9. 最简单的视音频播放演示样例3：Direct3D播放YUV，RGB（通过Surface）

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

最新文章

  1. 阿里云盘又送福利啦？空间大时间长，不要犹豫快上车！
  2. python导入txt文件并绘图-Python实现读取txt文件并画三维图简单代码示例
  3. NYOJ 99 单词拼接
  4. 与数学表达式对应的python表达式_与数学表达式cd/2ab对应的Python表达式中，不正确的是：...
  5. 大唐发电厂计算机考试题,全国计算机等级考试上机考试与题库解析：一级B
  6. 最新最详细最简洁Eclipse调试PHP配置详解（Xdebug，Zend Debugger）
  7. 从源代码角度看Struts2返回JSON数据的原理
  8. c语言程序设计实践教程编程题8.3,C语言程序设计教程（21世纪计算机科学与技术实践型教程）...
  9. 主板有几种尺寸_工控机主板哪个牌子好？2019工控主板十大品牌排行榜
  10. PostgreSQL如何自动更新时间戳？
  11. jrtplib库移植到android上
  12. 简单三步搭建电影网站 ：排除MacCMS10登录故障 3-3
  13. 应对CentOS 停服，麒麟信安迁移方案已就绪
  14. Windows XP怎样实现自动登录而无需输入密码
  15. 低配置享受3D立体游戏 手把手教你设置
  16. php解析mpp文件中的多级任务
  17. matlab randn state 2,matlab中randn（‘state’）
  18. linux mysql changed limits_ubuntu下mysql提示Changed limits: max_open_files:1024解决办法
  19. 【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能
  20. 10、 WMAP Web漏洞扫描

热门文章

  1. 拓扑排序 - 项目管理
  2. 判断能被N整除的字符串
  3. 【Linux】gdb常用的调试命令
  4. 利用tensorflow建立简单的神经网络所需要的几条简单语句
  5. linux命令行如何换行,一行命令太长,看的不清晰,
  6. HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
  7. ROS学习笔记-使用C++类用以编程（以机器人语音交互为例）
  8. HEVC-CABAC
  9. swift 原生给h5发消息_Swift-WKWebView与JavaScript的细节，H5页面跳转原生界面
  10. 简明 XHTML 1.0 参考手册