2.1 Ajax的基本知识

2.1.1 Ajax基本概念

现在,网络已经深入到人们工作和生活中的各个方面,例如新闻、通信、购物、交友等,网络上丰富多彩的内容,深深吸引着人们的眼球,甚至很多人都有网络上瘾症的倾向,在一些青少年身上则表现得更重一些。但是在互联网刚刚出现的时候,互联网远远没有现在这样富有表现力,那还是最原始的HTML时代。那个时候,HTML是互联网上的交互标准,它主要是用来显示文字和图片,用户通过单击超链接,从一个页面导航到另一个页面。这种简单的发布模式和查看模式有助于促使互联网迅速发展,最终形成今天这种全球互联互通的局面。但是随着用户数量的增多,用户对这种以页面为中心的查看模式也提出了越来越多的要求,例如希望页面像桌面应用一样富有交互性等,这些需求促使Web进一步发展,CGI、ASP、JSP等技术纷纷出现,给用户带来了更多的交互性,但是这些技术并没有很好地实现像桌面应用一样的Web应用。

真正让世界眼前一亮的是,Google的Google Maps、Google Suggest、Gmail等系列产品的出现,这些应用缩短了用户同页面的交互时间,使得Web应用有着同桌面应用一样的体验,这标志着Ajax技术的诞生。

Ajax是HTML浏览器上运行的一种表现方式和一系列技术,它提高了页面和用户的交互性,在保留Web应用在服务器端部署,用户无须安装客户端优势的同时,提供了桌面应用的风格和体验,使得Ajax应用迅速发展起来。以前的Web应用,都是用户与页面交互后,页面开始更新,用户在页面更新完成前只能等待;Ajax则使页面局部更新,其他页面内容保持不变,这样,Ajax促进了HTML从DHTML到RIA(Rich Internet Application,富网络应用)的转变。

对于从事Web开发的专业人员而言,Ajax是很有吸引力的,它在保留了基础应用服务器端化的同时,使用户获得了桌面应用的效果;用户对使用这种技术的应用也很有好感,因为它使得Web应用更像一个桌面应用程序,并且还添加了很多额外的功能。

关于Ajax说了这么多,那么到底什么是Ajax呢?Ajax是“Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写,是一种使用客户端脚本并能与Web服务器动态交互的客户端Web开发技术。

具体而言,Ajax包含以下技术:

■ 基于XHTML和CSS标准的表示;

■ 使用DOM(Document Object Model,文档对象模型)进行动态显示和交互;

■ 使用XMLHttpRequest与服务器进行异步通信;

■ 使用JavaScript绑定一切。

Ajax使用HTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象(这个对象是浏览器提供的对象,下面将详细讨论)进行异步数据读取,使用JavaScript绑定上面所有的东西。

因此,Ajax不是一个新的技术,甚至Ajax中最为重要的XMLHttpRequest对象(简称XHR,下同),也早在1999年微软发布IE 5的时候就出现了,因此说Ajax是“新瓶装旧酒”。也就是Jesse James Garrett在2005年发表了一篇文章“Ajax: A New Approach to Web Applications”,对XHR对象及相关的XML和JavaScript进行了系列的阐述和包装,才有了Ajax这个名称的出现。

2.1.2 Ajax的基本特点

虽然Ajax不算新技术,但是却有其大行其道的理由,Ajax的主要特点如下。

2.1.2.1 持续、动态的用户体验

HTML应用和Ajax应用的主要区别在于,在用户和应用交互的同时,Ajax还可以与后台的服务器进行通信。下面是两种交互模式的区别。

图2-1显示了用户在使用HTML时的主要行为,即典型的“点击-等待-页面刷新”模式。

图2-1 “点击-等待-页面刷新”模式下的HTML体验示意图

而基于Ajax的应用,用户体验如图2-2所示,它会给用户带来一个比较平滑、持续的用户体验。Ajax通过Ajax引擎与后台服务器交互,发送数据请求,而不是发送页面请求,这样就减少了页面刷新的次数,有效地减少了用户的等待时间,带给用户最直接的体验就是Ajax应用在浏览器上是持久而平滑的。

图2-2 “点击-继续点击”模式下的Ajax体验示意图

2.1.2.2 桌面应用风格的界面

Ajax应用支持富用户界面,在风格上更加贴近可安装的桌面应用。在Ajax中,典型的富用户界面包括以下元素:

■ 标准的用户界面控制元素(如按钮、输入框、下拉框等);

■ 高级用户控制元素(如Tab框、日历组件、树组件和数据表格组件等);

■ 灵活、动态的布局容器。这些布局容器可以根据内嵌内容和窗体大小自动调节自身的布局大小;

■ 浮动的面板和模态对话框;

■ 动画和各种动画效果;

■ 剪切、粘贴及拖拽效果等。

2.1.2.3 网络编程

Ajax的网络编程能力,可以使Ajax应用与Web服务器异步交换数据成为可能,并支持下一代合作性应用。Ajax库配合服务器端的能力,就可以实现异步向客户端发送数据。

现在您应该对什么是Ajax,以及Ajax能够做什么有一个初步的了解了吧。下面的章节将详细介绍有关Ajax的知识。