2014年ajax课件61182041.pptVIP

* * * * * * 本章任务 使用AJAX技术增强客户体验： 增强租房系统的用户注册功能 * 掌握Ajax技术原理 掌握基于Ajax技术的应用编程 掌握基于DWR框架的应用编程 本章目标 * Web 2.0 互联网历史 动态网页 静态网站 null 黑暗年代 革命啦，革命啦！三五年就来一次 * Web 2.0 Web 2.0特点 内容聚合：RSS 用户贡献内容 社会化网络 * Web 2.0 更丰富的“用户体验”，新的交互方式 自动补全 内容聚合 每个小“窗口”可以关闭、最小化和进行个性化设置 所有操作都是在不刷新窗口的情况下完成的 * 为什么使用Ajax 无刷新：不刷新整个页面，只刷新局部 无刷新的好处 只更新部分页面，有效利用带宽 只是登录，没必要刷新“庞大”的页面。 * 为什么使用Ajax 无刷新的好处 提供连续的用户体验 观看视频时执行操作，不希望页面刷新视频从头播放吧！ 只刷新了局部页面，视频继续播放 * 为什么使用Ajax 无刷新的好处 提供类似C/S的交互效果，操作更方面 使用Ajax可以实现这样的效果 * 什么是Ajax Ajax：只刷新局部页面的技术 AJAX ： Asynchronous And XML 异步：发送请求后不等返回结果，由回调函数处理结果 JavaScript：向服务器发起请求，获得返回结果，更新页面 XML：封装数据 用途 使用JavaScript从服务器获取数据而不必刷新整个页面 Asynchronous异步的 JavaScript And XML * 怎样使用 _ 当输入焦点离开用户名输入框时检查用户是否存在。 html:text property=item.uname onblur=return checkUserExists(this); / function checkUserExists(oCtl){ var uname = oCtl.value; if (!uname){ alert(用户名不能为空); oCtl.focus(); return ; } // 发送请求到服务器，判断用户名是否存在 ... ... Ajax here ... ... } * 怎样使用Ajax 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; } } 1、编写服务器段代码 效果 如果用户名已存在就输出true，否则输出false。 * 怎样使用Ajax 2、使用XMLHttpRequest组件发送请求 var xmlHttpRequest; function createXmlHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject(Microsoft.XMLHTTP); }else if(window.XMLHttpRequest){ return new XMLHttpRequest(); } } 判断不同浏览器，采用不同方式创建XMLHttpRequest对象 // 发送请求到服务器，判断用户名是否存在 // 请求字符串 var url = ?operate=doCheckUserExistsuname=+uname; // 1. 创建XMLHttpRequest组件 xmlHttpRequest = createXmlHttpRequest(); // 2. 设置回调函数 xmlHttpRequest.onreadystatechange = haoLeJiaoWo; // 3. 初始化XMLHttpRequest组件 xmlHttpRequest.open(GET,url,true); // 4. 发送请求 xmlHttpRequest.send(null); 请求字符串 状态改变时，将要调用的函数的名字 * 怎样使用A