1 / 25

第十章

第十章. 使用 Ajax 改进用户体验. 回顾. SSH 集成框架指的是什么？ 使用 SSH 集成框架开发 Web 应用有哪些好处？ Struts 在 SSH 集成框架中的作用是什么？ Spring 在 SSH 集成框架中的作用是什么？. 回顾. 某项目中使用 Spring 与 Struts 集成的框架，其中有个 Action Bean 1 、 name 是 "weightCheckForm" 2 、 path 是 "/weightCheck"

xanthus-holder
Download Presentation

第十章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第十章 使用Ajax改进用户体验

  2. 回顾 • SSH集成框架指的是什么？ • 使用SSH集成框架开发Web应用有哪些好处？ • Struts在SSH集成框架中的作用是什么？ • Spring在SSH集成框架中的作用是什么？

  3. 回顾 • 某项目中使用Spring与Struts集成的框架，其中有个Action Bean 1、name是"weightCheckForm" 2、path是"/weightCheck" 3、对应的类别是：com.jb.aptech.logistic.web.action.WeightCheckAction 4、其中有方法：setStorageDAO(StorageDAO dao)，setBackMoneyDAO(BackMoneyDAO dao)。 请写出Spring配置文件中对这个Action Bean的配置。

  4. 预习检查 • 根据你的理解，Web 2.0有哪些特点？ • 使用XMLHttpRequest可以达到什么效果？ • 为什么要使用DWR？

  5. 本章任务 • 使用AJAX技术增强客户体验： • 增强租房系统的用户注册功能

  6. 本章目标 • 掌握Ajax技术原理 • 掌握基于Ajax技术的应用编程 • 掌握基于DWR框架的应用编程

  7. Web 2.0 null 动态网页 黑暗年代 静态网站 • 互联网历史 革命啦，革命啦！三五年就来一次

  8. Web 2.0 • Web 2.0特点 • 内容聚合：RSS • 用户贡献内容 • 社会化网络

  9. Web 2.0 • 更丰富的“用户体验”，新的交互方式 自动补全 每个小“窗口”可以关闭、最小化和进行个性化设置 内容聚合 所有操作都是在不刷新窗口的情况下完成的

  10. 为什么使用Ajax • 无刷新：不刷新整个页面，只刷新局部 • 无刷新的好处 • 只更新部分页面，有效利用带宽 只是登录，没必要刷新“庞大”的页面。

  11. 为什么使用Ajax • 无刷新的好处 • 提供连续的用户体验 观看视频时执行操作，不希望页面刷新视频从头播放吧！ 只刷新了局部页面，视频继续播放

  12. 为什么使用Ajax • 无刷新的好处 • 提供类似C/S的交互效果，操作更方面 使用Ajax可以实现这样的效果

  13. 什么是Ajax • Ajax：只刷新局部页面的技术 • AJAX ： Asynchronous And XML • 异步：发送请求后不等返回结果，由回调函数处理结果 • JavaScript：向服务器发起请求，获得返回结果，更新页面 • XML：封装数据 • 用途 • 使用JavaScript从服务器获取数据而不必刷新整个页面 JavaScript Asynchronous异步的 XML And

  14. 怎样使用 _ • 当输入焦点离开用户名输入框时检查用户是否存在。 <html:text property="item.uname" onblur="return checkUserExists(this);" /> function checkUserExists(oCtl){ var uname = oCtl.value; if (!uname){ alert("用户名不能为空"); oCtl.focus(); return ; } // 发送请求到服务器，判断用户名是否存在 ... ... Ajax here ... ... }

  15. 怎样使用Ajax 效果 如果用户名已存在就输出true，否则输出false。 1、编写服务器段代码 public class UserAction extends BaseAction { private UserBiz userBiz = null; public ActionForward doCheckUserExists(...) throws ServletException, IOException { String uname = request.getParameter("uname"); boolean bExists = this.getUserBiz().isExists(uname); PrintWriter out = response.getWriter(); out.print(bExists); return null; } }

  16. 怎样使用Ajax 2、使用XMLHttpRequest组件发送请求 判断不同浏览器，采用不同方式创建XMLHttpRequest对象 var xmlHttpRequest; function createXmlHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ return new XMLHttpRequest(); } } // 发送请求到服务器，判断用户名是否存在 // 请求字符串 var url = "?operate=doCheckUserExists&uname="+uname; // 1. 创建XMLHttpRequest组件 xmlHttpRequest = createXmlHttpRequest(); // 2. 设置回调函数 xmlHttpRequest.onreadystatechange = haoLeJiaoWo; // 3. 初始化XMLHttpRequest组件 xmlHttpRequest.open("GET",url,true); // 4. 发送请求 xmlHttpRequest.send(null); 请求字符串 状态改变时，将要调用的函数的名字

  17. 怎样使用Ajax 请求状态： 0 -- 未初始化 1 -- 初始化 2 -- 发送请求 3 -- 开始接受结果 4 -- 接受结果完毕 每次状态改变都会调这个函数 HTML返回码： 200 -- OK 404 -- Not found（没有找到资源） 500 -- 服务器端出错 3、编写回调函数代码： • 处理返回结果 • 更新页面显示 function haoLeJiaoWo(){ if( xmlHttpRequest.readyState == 4 &&xmlHttpRequest.status == 200 ){ var b = xmlHttpRequest.responseText; if (b=="true"){ alert("用户名已经存在"); }else{ alert("用户名可以使用"); } } } 状态改变时，将要调用的函数的名字 取得返回结果： true或false。 演示示例：使用Ajax判断用户是否存在

  18. 小结 • 当资料内容过多时，按字首字母分类存放更便于查找。如何实现如下功能： • 如右图，点相应字母，从数据库加载该字母打头的用户。只更新列表，不刷新页面。 写出相关JavaScript代码。 提示： public ActionForward toUserList (...) { String letter = request.getParameter("letter"); List list = this.getUserBiz.getListByInitial (letter); ... return mapping. findForward("user_list"); } 提示： var oList = document.getElementsById("uList"); oList.innerHtml = xmlHttpRequest.responseText;

  19. Ajax框架 http://getahead.org/dwr • Ajax应用越来越广泛，客观上需要简化开发过程 • 各种Ajax框架层出不穷，各有特色 • DWR应用最为广泛

  20. Ajax框架 http://getahead.org/dwr • DWR -- Drect Web Remoting • 开源，免费的Ajax框架 • 将Java类发布为JavaScript可调用的脚本对象 • 提供JavaScript工具类，简化页面编码

  21. Ajax框架 • 在项目中应用DWR 1、准备工作 • 下载dwr.jar, 添加到项目中（ http://getahead.org/dwr） • 创建配置文件：/WEB-INF/dwr.xml • 在web.xml中配置 <servlet> <servlet-name>dwr</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>dwr</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> 作为servlet配置

  22. 如何使用DWR 验证发布成功 • 在项目中使用DWR 2、发布Java类 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"> <dwr> <allow> <create creator="new" javascript="JUserChecker"> <param name="class" value="com.aptech.jb.biz.UserManager" /> <include method="check" /> </create> </allow> </dwr> 脚本对象名 要发布的类名 要发布的方法名

  23. 如何使用DWR <script src='dwr/interface/JUserChecker.js'></script> <script src='dwr/engine.js'></script> <script src='dwr/util.js'></script> function checkUserExists(oCtl){ var uname = oCtl.value; // 发送请求到服务器，判断用户名是否存在 JUserChecker.check(uname,haoLeJiaoWo); } function haoLeJiaoWo(isExist) { if(isExist == 1){ alert("用户名已存在!"); } else if(isExist == 0){ alert("用户名不存在!"); } } • 在项目中使用DWR 3、页面代码 引入需要的脚本 直接调用JUserChecker的check方法 演示示例：使用DWR判断用户是否存在

  24. 总结 • Ajax技术有什么用？ • 如何使用XMLHttpRequest发送请求？ • 使用DWR的步骤？

More Related