AJAX技术入门方案.ppt

* AJAX 技术应用 * 目标 理解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 var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) {//判断是IE xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest) {//是Mozilla xmlHttp = new XMLHttpRequest(); } } * XMLHttpRequest属性 属性 描述 Onreadystatechange 每次状态改变所触发事件的事件处理程序 readyState 对象状态值： 0 = 未初始化（uninitialized） 1 = 正在加载（loading） 2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete） responseText 从服务器进程返回的数