上课笔记_Ajax框架,DWR介绍,应用,例子

使用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类的方法直接暴露给客户端

Dojo

① Dojo功能强大,包含许多内容,Ajax只是其中之一

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

③ 目前Dojo仍然在开发完善中,版本更新速度非常快

AjaxTags

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

使用DWR框架简化Ajax开发

1. DWR(Direct Web Remoting)是一个Java Ajax框架

2. DWR框架允许开发人员在客户端通过JavaScript代码调用服务器端的Java方法

3. DWR框架主要由两部分组成:

1.客户端JavaScript代码直接调用服务器端Java方法

2.服务器上运行的DWR核心Servlet负责处理客户端请求,将客户端请求委托到实际的Java对象进行处理,并将结果返回给客户端

下载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类的方法暴露给客户端

其结构如下:

<?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="..." />
			<!-- 暴露给客户端的,要发布的方法名 -->
			<include method="…" />
			<!-- 不暴露给客户端的 -->
			<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属性:在客户端给创建的JavaScript对象命名。该名字将在页面里作为js被导入

scope属性:作用域。选项可以是:application, session,request和page。默认为page

<create>元素的子元素:

<param>元素:用来指定创建器的参数。其中name属性用来指定参数名称,value指定参数的值

<include>元素:定义允许访问的方法列表,其他方法将不暴露给客户端

<exclude>元素:定义不允许访问的方法列表,其中method属性指定不被暴露给客户端的方法(其他没指定的方法默认暴露给客户端)

<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"/>

为Web工程添加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" onclick="init()" value="show" />
   <dir id="time"></dir>
  </body>

重启tomcat访问主页;http://localhost:8080/DWRDemo/

点击show,下面显示出当前时间;

例子:在页面输出客户端输入的信息

在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" onclick="getMessage()" value=" showMsg" />
   <dir id="message"></dir>
  </body>

重启tomcat,访问主页,输入文字,点击showMsg使用的是ajax技术;

我们可以在DwrService里面的方法getDwrBean添加:

System.out.println(message);

重启运行的时候,可以看到控制台输出 我们输入的信息,意味着我们可以访问数据库等操作;

使用DWR框架可以异步访问服务端对象

脚本文件说明:

engine.js

1.engine.js对DWR非常重要,它是DWR客户端的核心,用来把动态生成的JavaScript对象转换为服务器上的Java对象

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

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

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

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

2.util.js

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

2.        util.js提供一些基本的页面操作函数,通过这些函数可以方便的操作HTML元素

3.        util.js文件与DWR框架关系不是特别大,可以在任何不同的网页中使用(即便该工程没有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

上课笔记_Ajax框架,DWR介绍,应用,例子,布布扣,bubuko.com

时间: 2024-10-10 14:33:10

上课笔记_Ajax框架,DWR介绍,应用,例子的相关文章

上课笔记_Web服务,XFire的一个例子

Web服务优点 互操作性:实现不同系统间的相互调用(语言无关.平台无关) Web服务是什么 Web 服务是一类应用程序,是能够用编程的方法通过Web调用来实现某个功能的应用程序 Web服务的体系结构 Web服务需要遵守的技术标准 1. XML(描述WEB服务数据的标准方法) 2. SOAP(表示WEB服务信息交换的协议) 3. WSDL(WEB服务描述语言) 4. UDDI(统一描述发现和集成) 这里关于WebService就不多加详细介绍了,如果有兴趣可以查看百度百科 WebService,我

上课笔记_使用DWR实现自动补全 类似百度搜索框的自动显示效果

使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字 训练要点: 掌握使用DWR框架开发Ajax程序 使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `

jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了很多内容,然后继续输入一个"e"后,提示的范围明显就变小了. 注:在文末我会给出完整源代码的下载链接,以供大家参考 二 具体实现 1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar.也就是说,

Java基础笔记 – Annotation注解的介绍和使用 自定义注解

Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 |  被围观 25,969 views+ 1.Annotation的工作原理:2.@Override注解:3.@Deprecated注解:4.@SuppressWarnings注解:5.自定义注解:5.1.添加变量:5.2.添加默认值:5.3.多变量使用枚举:5.4.数组变量:6.设置注解的作用范围:6.1.在自定义注解中的使用例子:7.使用反射读取R

Android UI-开源框架ImageLoader的完美例子

Android开源框架ImageLoader的完美例子 2013年8月19日开源框架之Universal_Image_Loader学习 很多人都在讨论如何让图片能在异步加载更加流畅,可以显示大量图片,在拖动ListView的时候不会出现卡的现象.关于ImageLoader这个开源框架的使用有很多网友都介绍过,不过还不够清楚,这里有一个关于这个开源项目的完美例子,ListView的图片加载.GridView的图片加载.ViewPager的图片加载.Gallery画廊的图片加载.Widget的使用.

上门洗车APP --- Android客户端开发 之 网络框架封装介绍(一)

上门洗车APP --- Android客户端开发 之 网络框架封装介绍(一) 上篇文章中给大家简单介绍了一些业务,上门洗车APP --- Android客户端开发 前言及业务简介,本篇文章给大家介绍下网络框架,之前也了解过一些开源网络通讯架构,也大概看了一部分源码,比如Afinal.Volley.AndBase.Android-async-http等,感觉各自都有各自的优劣,自己也曾封装过一些简单的网络架构,感觉有很多地方需要注意和优化,这里就不贴出来献丑了,感兴趣的朋友可以去查阅学习上面所说的

面向对象程序设计-C++ Stream &amp; Template &amp; Exception【第十五次上课笔记】

这是本门<面向对象程序设计>课最后一次上课,刚好上完了这本<Thinking in C++> :) 这节课首先讲了流 Stream 的概念 平时我们主要用的是(1)在屏幕上输入输出的 cin cout 流 (2)在文件中输入输出的 ifstream ofstream 流 (3)在字符串中输入输出的 istringstream ostringstream istrstream ostrstream 流 具体实例可以看以下代码: /***************************

关于jsp商城开发中一些常用框架的介绍

Struts跟Tomcat.Turbine等诸多Apache项目一样,是开源软件,这是它的一大优点,使java商城产品以及jsp商城开发者能更深入的了解其内部实现机制.除此之外,在 java商城开发 中Struts的优点主要集中体现在两个方面:Taglib和页面导航.Taglib是Struts的标记库,比较灵活,能大大提高开发效率.另外,就目前国内的JSP开发者而言,除了使用JSP自带的常用标记外,很少开发自己的标记,或许Struts是一个很好的起点.struts历经6年多的发展,是目前用户数最

Django - Django框架 简单介绍

Django框架 简单介绍 本文地址: http://blog.csdn.net/caroline_wendy/article/details/29172271 1. 介绍 Django是一个开放源码的Web应用框架, 由Python写成. 採用了MVC的软件设计模式, 即模型M, 视图V和控制器C. 它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的站点的, 并于2005年7月在BSD许可证下公布. 这套框架是以比利时的吉普赛爵士吉他手Django Reinhardt来命名的.