使用DWR框架简化Ajax开发.ppt
使用DWR框架简化Ajax开发,主讲: 童瑞,课程内容,概述 什么是Ajax、DWR 下载和部署DWR DWR工作原理 DWR原理描述 DWR原理图示 DWR的简单例子演示与讲解 编写处理类 配置DWR DWR的在实际项目应用 动态提交并修改商品信息 常用二级下拉列表实现,Ajax 入门简介,Ajax是Asynchronous JavaScript and XML的缩写，Asynchronous是“异步”的意思。它是如何构成的呢？Ajax的提出者Jesse James Garrett是这样阐述的: 1. 使用XHTML和CSS标准化显示 2. 使用DOM动态显示和交互 3. 使用XML和XSLT进行数据交互和处理 4. 使用XMLHttpRequest进行异步数据获取 5. 使用JavaScript整合所有这一切(这部分被称为Ajax Engine) Ajax其实不是一种语言，甚至不是一种技术，它是几种技术的有机结合.Ajax的核心XMLHttpRequest,它可以模拟Request对象向服务器提交请求，并返回请求结果，这就摒弃了原有的白白的浏览器显示页！ Ajax 由 HTML、javascript技术、DHTML 和 DOM 组成.,Ajax图示,Ajax机制介绍,传统的web应用程序一般是由客户端浏览器向服务器提交数据，服务器返回新的页面，再次在浏览器中显示，这意味着每次数据往返都需要刷新浏览器页面。 Ajax应用程序改变了这种模式。由Javascript编写的Ajax引擎(Ajax Engine)，在Ajax应用程序中担负着一个中间层的任务，当用户界面要向服务器提交数据时，由Ajax引擎负责收集数据并通过Httprequest(XMLHttpRequest)向服务器发送数据，服务器处理完成后返回XML，Ajax引擎将XML处理为便于用户界面显示的XHTML和CSS数据，并更新用户界面相应部分的显示，而非刷新整个页面，从而避免了不必要的数据往返，只有必要的数据在必要的时刻才在浏览器和服务器之间传输。,什么是DWR,DWR（Direct Web Remoting）:是一个J2EE领域的Ajax框架,可以帮助开发者快速简单的开发Ajax应用。通过DWR开发者可以利用浏览器中的javascript代码调用远程的java方法，就像java代码在浏览器一样。 DWR主要包括两部分： 1）在服务器上运行的Servlet来处理请求并把结果返回浏览器。 2）运行在浏览器上的javascript，可以发送请求，并动态改变页面。 DWR会根据你的java类动态的生成javascript代码。这些代码的魔力是让你感觉整个Ajax调用都是在浏览器上发生的，但事实上是服务器执行了这些代码，DWR负责数据的传递和转换。,下载和部署DWR,下载地址http:/directwebremoting.org/dwr/download 将dwr-2.0.5-src.zip解压，dwr.jar文件放到WEB工程的WEB-INF/lib下。,DWR工作原理,DWR工作原理: 通过动态把java类生成为javascript。它的代码就像Ajax魔法一样，你感觉调用就像发生在浏览器端，但是实际上代码调用发生在服务器端，DWR负责数据的传递和转换。,DWR原理图,使用DWR改变Select下拉框选项,使用DWR开发一个简单例子,1.编写处理类 使用DWR开发Ajax应用是非常简单的，但最简单的莫过于开发处理类。处理类就是我们以前写的不同的java类。 public class Hello public String getHelloWorld() return “现在的时间为：“+new Date(); /简单的显示时间 ,处理类2个注意点,远程处理类不要使用javascript关键字 远程处理类尽量不要重载,2.配置DWR,2.配置DWR 定义java和javascript对象的对应关系 ,3.注册Servlet,3.在web.xml增加一段配置，因为dwr是靠一个Servlet来接收来至javascript的请求, dwr-invoker org.directwebremoting.servlet.DwrServlet debug true 1 dwr-invoker /dwr/* ,创建页面调用,function load() jshello.getHelloWorld(callback); function callback(msg) document.getElementById(“jdiv”).value=msg; ,实战1:动态提交并修改商品信息,1.动态修改商品信息,示例,1.编写处理类 public String updateMcName(int nid,String sname) 2. 在dwr.xml中添加配置 3.检查web.xml中servlet配置,示例,页面调用： function mod(nid) /jshello1.getHelloWorld(callback); /调 服务端的代码 var sname=document.getElementById(nid).value; jsmc.updateMcName(nid,sname,callback1); /调 服务端的代码 最后一个是回调函数 function callback1(msg) alert(msg); ,实战2.二级下拉列表,示例,1.编写处理类 public List getSmall(int nid) McTypeImpl dao = new McTypeImpl(); List sons = dao.searchSonMcTypeByFather(nid); return sons; 2. 在dwr.xml中添加配置 3.检查web.xml中servlet配置,示例,页面调用： function Change_Select() var big=document.getElementById('selectBig').value; jsmcget.getSmall(big,callback2); function callback2(msg) DWRUtil.removeAllOptions(“selectSmall“); for(var i=0;imsg.length;i+) var xText=msgi.sname; var xValue=msgi.nid; var option=new Option(xText,xValue); document.getElementById(“selectSmall“).add(option); ,DWR总结,DWR的设计构思很是巧妙。 第一、把java类转化为javascript类由DWR自动完成，只需简单的配置。 第二、应用起来极其简单。开发者不要该服务器代码就可以集成。 第三、容易测试。和webwork一样，隐藏的http协议。 第四、及强扩展性。例如与spring集成，只需修改一点代码。 第五、性能。dwr性能可能是最好的。 第六、自动把java对象转化为javascript对象，并且及易扩展。,
