使用DWR框架简化Ajax开发.ppt

使用DWR框架简化Ajax开发,主讲:童瑞,课程内容,概述什么是Ajax、DWR下载和部署DWRDWR工作原理DWR原理描述DWR原理图示DWR的简单例子演示与讲解编写处理类配置DWRDWR的在实际项目应用动态提交并修改商品信息常用二级下拉列表实现,Ajax入门简介,Ajax是AsynchronousJavaScriptandXML的缩写，Asynchronous是“异步”的意思。它是如何构成的呢？Ajax的提出者JesseJamesGarrett是这样阐述的:1.使用XHTML和CSS标准化显示2.使用DOM动态显示和交互3.使用XML和XSLT进行数据交互和处理4.使用XMLHttpRequest进行异步数据获取5.使用JavaScript整合所有这一切(这部分被称为AjaxEngine)Ajax其实不是一种语言，甚至不是一种技术，它是几种技术的有机结合.Ajax的核心XMLHttpRequest,它可以模拟Request对象向服务器提交请求，并返回请求结果，这就摒弃了原有的白白的浏览器显示页！Ajax由HTML、javascript技术、DHTML和DOM组成.,Ajax图示,Ajax机制介绍,传统的web应用程序一般是由客户端浏览器向服务器提交数据，服务器返回新的页面，再次在浏览器中显示，这意味着每次数据往返都需要刷新浏览器页面。Ajax应用程序改变了这种模式。由Javascript编写的Ajax引擎(AjaxEngine)，在Ajax应用程序中担负着一个中间层的任务，当用户界面要向服务器提交数据时，由Ajax引擎负责收集数据并通过Httprequest(XMLHttpRequest)向服务器发送数据，服务器处理完成后返回XML，Ajax引擎将XML处理为便于用户界面显示的XHTML和CSS数据，并更新用户界面相应部分的显示，而非刷新整个页面，从而避免了不必要的数据往返，只有必要的数据在必要的时刻才在浏览器和服务器之间传输。,什么是DWR,DWR（DirectWebRemoting）:是一个J2EE领域的Ajax框架,可以帮助开发者快速简单的开发Ajax应用。通过DWR开发者可以利用浏览器中的javascript代码调用远程的java方法，就像java代码在浏览器一样。DWR主要包括两部分：1）在服务器上运行的Servlet来处理请求并把结果返回浏览器。2）运行在浏览器上的javascript，可以发送请求，并动态改变页面。DWR会根据你的java类动态的生成javascript代码。这些代码的魔力是让你感觉整个Ajax调用都是在浏览器上发生的，但事实上是服务器执行了这些代码，DWR负责数据的传递和转换。,下载和部署DWR,下载地址/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类。publicclassHellopublicStringgetHelloWorld()return现在的时间为：+newDate();/简单的显示时间,处理类2个注意点,远程处理类不要使用javascript关键字远程处理类尽量不要重载,2.配置DWR,2.配置DWR定义java和javascript对象的对应关系,3.注册Servlet,3.在web.xml增加一段配置，因为dwr是靠一个Servlet来接收来至javascript的请求,dwr-invokerorg.directwebremoting.servlet.DwrServletdebugtrue1dwr-invoker/dwr/*,创建页面调用,functionload()jshello.getHelloWorld(callback);functioncallback(msg)document.getElementById(“jdiv”).value=msg;,实战1:动态提交并修改商品信息,1.动态修改商品信息,示例,1.编写处理类publicStringupdateMcName(intnid,Stringsname)2.在dwr.xml中添加配置3.检查web.xml中servlet配置,示例,页面调用：functionmod(nid)/jshello1.getHelloWorld(callback);/调服务端的代码varsname=document.getElementById(nid).value;jsmc.updateMcName(nid,sname,callback1);/调服务端的代码最后一个是回调函数functioncallback1(msg)alert(msg);,实战2.二级下拉列表,示例,1.编写处理类publicListgetSmall(intnid)McTypeImpldao=newMcTypeImpl();Listsons=dao.searchSonMcTypeByFather(nid);returnsons;2.在dwr.xml中添加配置3.检查web.xml中servlet配置,示例,页面调用：functionChange_Select()varbig=document.getElementById(selectBig).value;jsmcget.getSmall(big,callback2);functioncallback2(msg)DWRUtil.removeAllOptions(selectSmall);for(vari=0;imsg.length;i+)varxText=msgi.sname;varxValue=msgi.nid;varoption=newOption(xText,xValue);document.getElementById(selectSmall).add(option);,DWR总结,DWR的设计构思很是巧妙。第一、把java类转化为javascript类由DWR自动完成，只需简单的配置