JavaScript程序设计基础教程第10章 Ajax技术.pptVIP

* * * * 第10章 Ajax技术 【学习目标】 Ajax是JavaScript、XML、CSS、DOM等多种已有技术的组合，它可以实现客户端的异步请求操作，实现在不需要刷新页面的情况下与服务器进行通信，从而减少了用户的等待时间。通过本章的学习，读者可以达到以下学习目的： ●　了解什么Ajax ●　Ajax技术的组成 ●　实现Ajax的基本步骤 ●　用Ajax实现无刷新广告轮显 课件制作人： 【学习导航】 本章首先介绍什么是Ajax，然后介绍Ajax技术的组成，实现Ajax的基本步骤，最后通过一个完整的实例介绍Ajax在实际编程中的应用。本章在书中的学习位置如图10.1所示。 课件制作人： 【知识框架】 本章学习内容知识框架如图10.2所示。 课件制作人： √ 本章目录 10.1 Ajax介绍 10.2 Ajax技术的组成 10.3 实现Ajax的基本步骤 10.4 用Ajax实现无刷新广告轮显 √ √ √ 课件制作人： 10.1 Ajax介绍 Ajax是由Jesse James Garrett创造的，是Asynchronous JavaScript And XML的缩写，即异步JavaScript和XML技术。Ajax并不是一门新的语言或技术，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，它可以实现客户端的异步请求操作。这样可以实现在不需要刷新页面的情况下与服务器进行通信，从而减少了用户的等待时间。 在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端，如图10.3所示。而在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置，如图10.4所示。 课件制作人： 10.1 Ajax介绍 从图10.3和图10.4中可以看出，对于每个用户的行为，在传统的Web应用模式中，将生成一次HTTP请求，而在Ajax应用开发模式中，将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模式中通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量，给用户带来了更好的体验。 与传统的Web应用不同，Ajax在用户与服务器之间引入一个中间媒介（Ajax引擎），Web页面不用打断交互流程进行重新加载，就可以动态地更新，从而消除了网络交互过程中的“处理—等待—处理—等待”的缺点。 使用Ajax的优点具体表现在以下几方面。 （1）减轻服务器的负担。Ajax的原则是“按需求获取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。 （2）可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。 （3）无刷新更新页面，从而使用用户不用再像以前一样在服务器处理数据时，只能在处于处理状态的白屏前焦急的等待。Ajax使用XMLHttpRequest对象发送请求并得到服务器响应，在不需要重新载入整个页面的情况下，就可以通过DOM及时将更新的内容显示在页面上。 （4）可以调用XML等外部数据，进一步促进Web页面显示和数据的分离。 （5）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 课件制作人： 10.2 Ajax技术的组成 JavaScript XMLHttpRequest CSS DOM XML √ √ √ √ √ 课件制作人： JavaScript JavaScript是一种在Web页面中添加动态脚本代码的解释性程序语言，其核心已经嵌入到目前主流的Web浏览器中。虽然平时应用最多的是通过JavaScript实现一些网页特效及表单数据验证等功能，其实JavaScript可以实现的功能远不止这些。JavaScript是一种具有丰富的面向对象特性的程序设计语言，利用它能执行许多复杂的任务，例如，Ajax就是应用JavaScript将DOM、XHTML（或HTML）、XML以及CSS等技术综合起来，并控制它们的行为的。因此，要开发一个复杂高效的Ajax应用程序，就必须对JavaScript有深入的了解。 课件制作人： XMLHttpRequest Ajax技术之中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的