06 AJAX技术入门.ppt

* AJAX 技术应用 * 回顾 表单验证 style属性 举例 div浮层式的登录窗口 停留在右下角的广告层 变换图片div （幻灯新闻） 选项卡 菜单栏 框架的应用 * 目标 理解AJAX技术 熟练XMLHttpRequest对象 熟练使用AJAX中的请求和响应 AJAX的执行流程 了解在AJAX中的XML请求和响应 * 理解AJAX技术 AJAX技术的作用 更自然、流畅的用户体验，对用户的操作即时响应 在不中断用户操作的情况下与Web服务器进行通信 更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果 通过局部更新页面降低网络流量，提高网络的使用效率 * 什么是AJAX AJAX（Asynchronous JavaScript And XML） HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 JavaScript 代码是运行 AJAX 应用程序的核心代码，帮助改进与服务器应用程序的通信。 DHTML 或 Dynamic HTML，用于动态更新表单。 文档对象模型 DOM 用于处理 HTML 结构和服务器返回的 XML。 * AJAX组成 JavaScript JavaScript是通用的脚本语言，用来嵌入在某种应用之中。Web应用中嵌入的JavaScript解释器允许通过程序与浏览器的很多内建功能进行交互。AJAX应用程序是JavaScript编写的 CSS 层叠样式表 CSS为Web页面元素提供了一种可重用的可视化的定义方法 DOM 文档对象模型 DOM以一组可以使用JavaScript操作的可编程对象展现出web的页面结构 XMLHttpRequest对象 XMLHttpRequest对象允许程序员使用页面中的JavaScript从服务器获取数据。数据格式可以是XML，也可以是任何基于文本的数据 * AJAX工作原理 AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaScript事件中向服务器发出异步请求，执行更新或查询数据库 AJAX的核心是JavaScript对象XMLHttpRequest，该对象在IE 5中首次引入，使用户通过JavaScript向服务器提出请求并处理响应，而不阻塞用户 当Web服务器的响应返回时，使用JavaScript回调函数和CSS来相应地更新页面的局部内容，而不是刷新整个页面 在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器通信 常见的AJAX网站有网易邮箱，webqq等 * 异步请求处理 等待 等待 等待 等待 请求 请求 响应 响应 等待 请求 请求 响应 响应 等待 同步处理 异步处理 * 异步请求处理 请求 响应 等待 以gmail为例，当需要检测用户名时，是要 判断数据库里面有没有此用户名的记录， 所以必须在数据库服务器中查找，但是只 有应用服务器才可以在数据库中查找，这 时候页面不可以刷新，这就是典型的AJAX 异步处理 数据库中查询并处理 应用服务器返回结果 用户不受影响 * XMLHttpRequest XMLHttpRequest对象最初是在IE5中以ActiveX组件的形式实现的，但只能在IE浏览器中使用。其后在Mozilla、Safari等浏览器中相继实现，才成为事实上的标准。目前FireFox、Safari、Opera和IE7中都以类似的方式实现了XMLHttpRequest对象 由于XMLHttpRequest不是w3c的标准，可以采用多种方法创建XMLHttpRequest对象。在使用XMLHttpRequest对象发生请求和处理之前，必须首先使用JavaScript获得XMLHttpRequest对象 var obj new Active “objname” ; XMLHttpRequest对象 XMLHttpRequest 对象的创建 XMLHttpRequest对象的创建随浏览器不同而不同 IE7及以上版本和非IE浏览器： var xmlHttp new XMLHttpRequest ; IE5.0： var xmlHttp new ActiveXObject Msxml2.XMLHTTP ; IE5.5和IE6： var xmlHttp new ActiveXObject Microsoft.XMLHTTP ; XMLHttpRequest对象 XMLHttpRequest 对象的创建 支持多种浏览器创建XMLHttpRequest对象的方式： XMLHttpRequest对象 向服务器发出请求 XMLHttpRequest请求服务器的主要代码流程 准备需要向服务器发送的数