PHP教程(lijiazhong)第16章.ppt

第16章 Ajax技术 Ajax是一种很酷的技术，一旦采用了Ajax，就能让你的Web页面、你的网站、甚至连同你的公司，都变得很酷。 在Web 2.0的时代，不使用一点Ajax技术的网站，就会显得很土、很落伍。 16.1 Ajax概述 Ajax是一个比较费解的单词组合：Asynchronous JavaScript + XML(异步的JavaScript加上XML，提法来自Garrett)。 在Garrett的总结中，Ajax包含以下5个部分： 基于标准的表示技术，使用XHTML与CSS。 动态显示和交互技术，使用文档对象模型(Document Object Model，DOM)。 数据互换和操作技术，使用XML与XSLT。 异步数据获取技术，使用XMLHttpRequest。 JavaScript技术，它将以上的一切都结合在一起。 16.1 Ajax概述 如图16-1所示就是介绍Ajax的经典图解。 16.1 Ajax概述 再来看图16-2。在传统的Web应用模式中，用户的体验是割裂的：点击→等待→看到新的页面→再点击→再等待。 而采用了Ajax技术之后，如图16-3所示，大部分的计算工作，都是在用户没有察觉的情况下，交由服务器去完成了，没有空白的屏幕，没有让人心烦的旋转地球，没有虚假的下载百分比进度条。 16.1.1 Ajax简介 在Ajax之前，Web站点强制用户进入提交→等待→重新显示循环，用户的动作总是与服务器的“思考时间”同步。 Ajax提供与服务器异步通信的能力，从而使用户从请求→响应的循环中解脱出来。 借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。 16.1.2 Ajax工作原理 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。 下面是使用Ajax可以完成的功能： 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。 消除了每次用户输入时的页面刷新。 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。 16.1.2 Ajax工作原理 图16-4是Ajax的工作原理，在以后的章节中将会详细地讲解。读者在此对其先留点印象就可以了。 16.1.2 Ajax工作原理 Ajax的具体实现流程如下。 (1) 初始化页面：进入指定的页面，完成页面显示工作。 (2) 用户操作：用户对页面的操作，如单击按钮，触发指定的事件。由事件响应函数获取用户操作的数据。 (3) 发送HTTP请求：客户端获取数据后，将初始化XMLHttpRequest对象，并向服务器发出异步通信请求。 (4) 服务器接收请求：服务器接收到请求后，依据请求操作，响应客户端的行为，并将处理结果返回客户端。这个流程与传统的Web应用程序交互模式相同。 (5) 接收服务器的响应数据：客户端使用XMLHttpRequest对象接收服务器端返回的响应数据，并将该结果赋予变量。 (6) 更新页面：这通常由JavaScript调用DOM(文档对象模型)来更新页面相应的内容，而不刷新整个页面。 16.1.3 为什么使用Ajax (1) Ajax是基于被各大浏览器和平台都支持的公开标准的技术。 (2) 从Ajax技术的实现流程可以看出，Ajax最大特点就是不刷新整个页面，只动态刷新页面相关的数据，为用户提供了很大的灵活性。 (3) Ajax使Web页的数据和显示分离：Web页的动态数据通过Ajax从服务器端获取，这些数据由客户端的JavaScript控制显示。 16.2 Ajax用到的核心技术 (1) Ajax并非新事物 (2) Ajax的核心技术 (3) 如何发出XML HTTP请求 (4) 结合使用XMLHttpRequest和HTML 16.2.1 XMLHttpRequest对象 最通用的定义为：XmlHttp是可以在JavaScript、VbScript、JScript等脚本语言中通过HTTP协议传送或接收XML及其他数据的一套API。 表16-1和16-2分别列出了XmlHttp对象的属性和方法。 16.2.2 JavaScript语言 JavaScript是一种描述性的脚本语言(Script Language)，它可以非常自由地被嵌入到HTML的文件之中。 下面举例说明如何在HTML文档中嵌入JavaScript： 参见教材P334 该例的运行