第10章AJAX技术.ppt

WEB应用开发（JSP） 主讲：余正红 互联网数据库 主讲：余正红 主讲：余正红 互联网数据库 主讲：余正红 互联网数据库 互联网数据库 主讲：余正红 互联网数据库 互联网数据库 主讲：余正红 互联网数据库 主讲：余正红 互联网数据库 第10章 AJAX技术 本章学习目标 了解AJAX工作的基本原理 掌握AJAX开发的基本流程 本章首先向读者介绍什么是AJAX，然后介绍AJAX核心对象XMLHttpRequest的使用，以及如何进行AJAX简单程序的开发，最后通过一个实例进一步熟练掌握AJAX程序的开发流程。 * * 10.1 什么是AJAX 10.1.1 AJAX定义 AJAX是一种用于创建快速动态网页的开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。 AJAX不是一个技术，它实际上是几种技术的综合使用，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。AJAX涉及的技术包括： （1）使用XHTML和CSS标准化呈现； （2）使用文档对象模型（Document Object Model）作动态显示和交互； （3）使用XML和XSLT做数据交互和操作； （4）使用XMLHttpRequest进行异步数据接收； （5）使用JavaScript将它们绑定在一起。 * * 10.1.2 为什么要用AJAX 传统的Web应用模型如图10.1所示。 使用AJAX的Web应用模型如图10.2所示。 * * 10.1.2 为什么要用AJAX 使用AJAX可以给JSP、开发人员、终端用户带来可见的便捷。 （1）减轻服务器负担，AJAX的原则是“按需取数据”，可以最大程度地减少冗余请求，减轻服务器负担。 （2）无刷新更新页面，减少用户心理和实际的等待时间，带来更好的用户体验。 （3）可以调用外部数据。 （4）基于标准化并被广泛支持的技术，不需要下载插件或者小程序。 * * 10.1.3 当前AJAX的典型应用 AJAX技术在1998年前后得到应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组开发。该组件原属于微软Exchange Server，并且迅速成为Internet Explorer 4.0的一部分。2005年初，AJAX被大众所接受。 在应用AJAX开发方面，Google当仁不让是表率。在许多著名的交互应用程序中Google都应用了这项技术，如Google讨论组、Google地图、Google搜索建议、Gmail等。 Amazon的A9.com搜索引擎也采用了类似技术。微软也在积极开发更为完善的AJAX应用。目前，AJAX应用最普遍的领域是GIS-Map方面。GIS的区域搜索强调快速响应，AJAX的特点正好符合这种需求。 * * 10.1.4 AJAX的缺陷 AJAX虽然优点很多，但它不是完美的技术，一些缺陷在使用时不得不权衡一下： （1）AJAX大量使用JavaScript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持，但提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。 （2）AJAX更新页面内容的时候并没有刷新整个页面，因此，网页后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这就需要在明显位置提醒用户“数据已更新”。 （3）对流媒体的支持没有Flash、Java Applet好。 （4）一些手持设备（如手机、PDA等）现在还不能很好地支持AJAX。 * * 10.1.5 AJAX简单实例 利用AJAX，JavaScript会通过XMLHttpRequest对象直接与服务器通信。通过使用HTTP协议，Web页可向服务器发出请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，而不会注意到脚本在后台请求过页面，或向服务器发送过数据。 【例10-1】实现功能：在欢迎页面上有一个按钮，点击该按钮，能够显示公司信息。 首先使用传统方法，编写文件welcome1.jsp。 运行程序，效果如图10.3所示： 点击“显示公司信息”按钮，得到如图10.4所示的页面。 * * 10.1.5 AJAX简单实例 【例10-1】实现功能：在欢迎页面上有一个按钮，点击该按钮，能够显示公司信息。 编写文件welcome2.jsp。 运行该文件，首先出现图10.3的效果，点击“显示公司信息”按钮，如图10.5所示。 * * 10.2 AJAX开发基础 10.2.1 XMLHttpRequest核心对象 XMLHttpRequest是AJAX技术体系中最