第12章 JavaScript与Ajax技术.pptVIP

第12章 JavaScript与Ajax技术 Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统Web开发中采用表单递交方式来更新Web页面的趋势。Ajax是具有变革性的，它使开发者得以摆脱原有单调的开发模式，从而开发出更易用、交互性更强的Web应用程序，目前Ajax一些成功的应用：Google 主页、Google Suggest、Google Maps、Gmail等，无论在视觉效果还是易用性上都给人带来强烈的冲击力。因此，Ajax的出现具有里程碑式的意义，并在短时间内成为Web开发领域炙手可热的技术。而JavaScript是Ajax的核心技术之一，在Ajax技术中起着不可替代的作用。本章将利用有限的篇幅，力求向读者展示Ajax的风采以及JavaScript在Ajax中所扮演的重要角色。 12.1 什么是Ajax Ajax的概念最早由Jess James Garrett提出，认为是Asynchronous JavaScript and XML(异步JavaScript和XML)的缩写。更深层的理解：Ajax为一种结合了Java、XML、以及JavaScript等编程技术的创建交互式网页应用的Web开发技术。 Ajax是使用客户端脚本与Web服务器异步交换数据的Web应用开发方法。使用Ajax，可以在不中断交互流程的情况下，重新加载Web页面，从而实现动态更新；使用Ajax，可以创建接近本地桌面应用的、直接的、易用的、更丰富的、更动态的Web用户接口界面。 12.2 为什么需要Ajax 从Web出现之日起，Web开发人员从不放弃过为客户提供更快速便捷服务的目标，并不遗余力的为之工作。传统的Web应用采用同步交互方式，浏览器负责初始、发送请求，并等待、处理服务器返回的响应。浏览器在等待服务器返回的过程中，不能进行其他操作，而屏幕往往一片空白（白屏现象）。针对此，开发人员找到了改进的契机，那就是异步Web交互模式——Ajax应用模式。 12.2.1 传统的Web框架 传统的Web应用模型如图12.1所示，客户端接口通过HTTP 传输协议直接与Web服务器交互。 12.2.2 Ajax技术框架 Ajax Web应用模型如图12.3所示，客户端与Web服务器间增加了Ajax Engine（Ajax 引擎），客户端接口与Ajax引擎交互，而Ajax引擎再通过HTTP 传输协议与Web服务器端交互。 12.2.3 Ajax的优势 传统的Web应用模式采用同步交互模式，客户端过分依赖于服务器的响应，“等待-处理-等待”的处理过程缺点比较明显，有时对部分数据的更新不得不重新装载整个页面。传统Web应用同步模式效率低，同时对带宽的消耗较大。 与传统的Web应用模式相比，Ajax Web应用模式有着很多吸引人的优点。也正是这些优势，使Ajax在短短时间内成为炙手可热的技术名词。Ajax是一组“老技术”的组合，也正是这些“老技术”的巧妙结合，呈现出了各种新性能。下面简要介绍一下这些Ajax中核心的“老技术”。 12.3 Ajax核心技术 Garrett在Ajax诞生的文章中列举了组成Ajax的7种相关技术，包括：HTML、CSS、DOM、XML、XSLT、XMLHttpRequest以及JavaScript。而作者认为，Ajax的核心技术只有JavaScript、XMLHttpRequest、DOM和XML： JavaScript：编写Ajax引擎的脚本语言，同时负责绑定和处理所有数据，起纽带作用； XMLHttpRequest：主要的通信代理，实现客户端和服务器端的异步数据交互； DOM：对已载入页面进行动态更新，实现动态显示和交互； XML：数据交互格式，随着XML的流行，其将成为Ajax不可或缺的一部分。 12.3.1 JavaScript JavaScript是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言，它不仅可用来开发交互式的Web页面，更重要的是它将HTML、XML和Java applet、flash等功能强大的Web对象有机结合起来，使开发人员能快捷生成Internet或Intranet上使用的分布式应用程序。JavaScript脚本已经成为Web应用程序开发的一门炙手可热的语言，成为客户端脚本的首选。 在Ajax中，JavaScript作为纽带，把其他技术有机的结合在一起，使各种“老技术”发挥各自特色的同时，与其他技术结合得到了意想不到