使用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 下载地址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类 publicclassHello publicStringgetHelloWorld 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 i msg length i varxText msg i sname varxValue msg i nid varoption newOption xText xValue document getElementById selectSmall add option DWR总结 DWR的设计构思很是巧妙 第一 把java类转化为javascript类由DWR自动完成 只需简单的配置 第二 应用起来极其简单 开发者不要该服务器代码就可以集成 第三 容易测试 和webwork一样 隐藏的http协议 第四 及强扩展性 例如与spring集成 只需修改一点代码 第五 性能 dwr性能可能是最好的 第六 自动把java对象转化为javascript对象 并且及易扩展