《使用DWR框架简化Ajax开发.ppt》由会员分享，可在线阅读，更多相关《使用DWR框架简化Ajax开发.ppt（21页珍藏版）》请在三一办公上搜索。
1、使用DWR框架简化Ajax开发,主讲:童瑞,课程内容,概述什么是Ajax、DWR下载和部署DWRDWR工作原理DWR原理描述DWR原理图示DWR的简单例子演示与讲解编写处理类配置DWRDWR的在实际项目应用动态提交并修改商品信息常用二级下拉列表实现,Ajax 入门简介,Ajax是Asynchronous JavaScript and XML的缩写，Asynchronous是“异步”的意思。它是如何构成的呢？Ajax的提出者Jesse James Garrett是这样阐述的:1.使用XHTML和CSS标准化显示2.使用DOM动态显示和交互3.使用XML和XSLT进行数据交互和处理4.使用XMLH
2、ttpRequest进行异步数据获取5.使用JavaScript整合所有这一切(这部分被称为Ajax Engine)Ajax其实不是一种语言，甚至不是一种技术，它是几种技术的有机结合.Ajax的核心XMLHttpRequest,它可以模拟Request对象向服务器提交请求，并返回请求结果，这就摒弃了原有的白白的浏览器显示页！Ajax 由 HTML、javascript技术、DHTML 和 DOM 组成.,Ajax图示,Ajax机制介绍,传统的web应用程序一般是由客户端浏览器向服务器提交数据，服务器返回新的页面，再次在浏览器中显示，这意味着每次数据往返都需要刷新浏览器页面。Ajax应用程序改变
3、了这种模式。由Javascript编写的Ajax引擎(Ajax Engine)，在Ajax应用程序中担负着一个中间层的任务，当用户界面要向服务器提交数据时，由Ajax引擎负责收集数据并通过Httprequest(XMLHttpRequest)向服务器发送数据，服务器处理完成后返回XML，Ajax引擎将XML处理为便于用户界面显示的XHTML和CSS数据，并更新用户界面相应部分的显示，而非刷新整个页面，从而避免了不必要的数据往返，只有必要的数据在必要的时刻才在浏览器和服务器之间传输。,什么是DWR,DWR（Direct Web Remoting）:是一个J2EE领域的Ajax框架,可以帮助开发者
4、快速简单的开发Ajax应用。通过DWR开发者可以利用浏览器中的javascript代码调用远程的java方法，就像java代码在浏览器一样。DWR主要包括两部分：1）在服务器上运行的Servlet来处理请求并把结果返回浏览器。2）运行在浏览器上的javascript，可以发送请求，并动态改变页面。DWR会根据你的java类动态的生成javascript代码。这些代码的魔力是让你感觉整个Ajax调用都是在浏览器上发生的，但事实上是服务器执行了这些代码，DWR负责数据的传递和转换。,下载和部署DWR,下载地址http:/directwebremoting.org/dwr/download将解压，d
5、wr.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
6、 Date();/简单的显示时间,处理类2个注意点,远程处理类不要使用javascript关键字远程处理类尽量不要重载,2.配置DWR,2.配置DWR 定义java和javascript对象的对应关系,3.注册Servlet,3.在web.xml增加一段配置，因为dwr是靠一个Servlet来接收来至javascript的请求,dwr-invoker debug true 1 dwr-invoker/dwr/*,创建页面调用,function load()jshello.getHelloWorld(callback);function callback(msg)document.getElem
7、entById(“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,callbac
8、k1);/调 服务端的代码 最后一个是回调函数 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(se
9、lectBig).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对象，并且及易扩展。,
