
1.2 AJAX技术简介
1.2.1 什么是AJAX
AJAX(Asynchronous JavaScript and XML,异步JavaScript与XML)是2005年初由Jesse James Garrett提出的一种技术。从字面上看,它是随着XML技术的出现而出现的,而XML是1998年2月提出的,所以AJAX不是什么新的技术,而是一些老技术的综合应用。
AJAX中所谓“异步”,意味着浏览器的工作与数据传输可以不同时,浏览器不必等待从服务器返回的数据,而是在后台处理数据,它既可以在数据返回时处理数据,也可以在数据返回后处理数据。如果浏览器必须等待返回的数据,则应用程序就是同步的。由于Internet的速度问题,同步处理显然存在问题。所以,异步是AJAX的核心。
JavaScript很早就用在网络应用程序中,是一种连接服务器的技术,浏览器通过JavaScript连接到服务器,并处理从服务器上返回的数据。有多种技术可以实现从服务器上取回数据并对数据进行处理,如ASP(Activex Server Page)、PHP(PHP:Hypertext Preprocessor)、ASP.NET、JSP(Java Server Page),JavaScript只是这类技术中的一种,但却十分有效。
XML文档是纯文本文件,对于Internet而言,XML可以通行无阻地畅游在Internet的海洋中,所以,XML在发布后迅速成为Internet上的数据交换标准,现在已经是Web上的通用语言。

图1.6 Google Suggest示例
2004年,Google悄然在网络中上线了Google Suggest测试版本,但此产品一直没有受到关注,一直到2005年才引起了公众的注意。Google Suggest在用户输入部分查询参数时,AJAX会使用异步方式查询服务器端数据,返回客户端,为客户端补全查询参数,如图1.6所示。
Google在Gmail、Google Map(见图1.7)等产品中更广泛地应用了AJAX,提供了更好的用户体验。通过这两个杰出的应用,各大网站竞相开始采用AJAX,包括国内的百度、搜搜、淘宝等均采用了类似Google Suggest的方式提供搜索查询服务,同时,网络中各电子邮箱也开始广泛应用AJAX来提高用户体验,如图1.8所示。

图1.7 Google Map上的中国国家博物馆

图1.8 Yahoo中文邮箱AJAX操作界面
1.2.2 AJAX运行模式
AJAX到底能为我们做什么呢?试想,如果Google Map每移动一次观察位置,都要使用“提交-等待-显示-再提交-再等待-再显示……”这样的方法,那么将会有1/5甚至1/2的时间都在等待回传数据,同时每次回传数据仍然包括诸如上方的搜索框、左侧的超链接等内容,这样,势必造成两个最主要的问题:用户花了大量时间在等待白色的屏幕;多次回传的数据中,有很多是相同的,造成了浪费。
在传统同步浏览模式中,用户浏览过程需要经历“查看-提交-等待-显示”这个过程,在“等待”这个过程中,用户不能进行任何操作或浏览,如果需要过多的交互,那么这个“等待”过程必将浪费太多的时间。传统同步的方式,还会在提交与等待间打断用户的操作。
来看一个极端的例子,在填完一个很长的用户注册表单后,提交时,提示用户名已经被注册,返回后,又需要再次填入所有数据,这是因为所有数据的提交必须是同步的,必须等到用户单击“提交”按钮后,才会将请求发送到服务器,服务器这时才能判断用户名是否重名。当然,也能看到有些很长的表单被设计成了多个页面或其他形式,允许用户填入部分数据后,单击“下一步”按钮进入下一个页面或区域,这样做的目的是,将用户的输入以更小的时间段作为分割,即使用户当前表单数据有误,也不至于需要重新填入所有数据,如图1.9所示。
但这仍然不是一个好办法,因为总的等待时间仍然存在,同时用户被更多的中断打断了操作。使用AJAX,可以使用户在填入每一项数据时,浏览器即以异步的形式将填入的数据提交到服务器,在用户填入下面项目的同时,服务器将反馈以异步的形式反馈回客户端,那么用户不必等到最后提交时才知道填入的数据是否符合要求。这样做的好处除了以上几点外,还可以使服务器的负载更加均衡,减轻了服务器的负担,但是这样做也会导致客户端代码增加,客户端数据处理量增大等问题。随着网络和应将更加快速,硬件价格更加低廉,这样异步处理的方式将会获得更高的效率和更好的用户体验,如图1.10所示。

图1.9 传统模式

图1.10 AJAX模式
传统模式和AJAX模式的区别主要体现在用户体验、交互方式等方面,其主要区别如表1.2所示。
表1.2 传统模式与AJAX的比较

1.2.3 AJAX所使用的技术
以Google为首的软件企业正在寻求一种“浏览器即操作系统”的解决方案,而AJAX或许是这个方向的开拓者。
AJAX本身并不能完全算是一种技术,它是多种技术间的协作。AJAX是使用JavaScript将XHTML、DOM、CSS、XSLT、XML HttpRequest和后台程序技术整合而得到的产物,可以说,AJAX是使用了老技术、新思想而获得成功的典型。
AJAX的核心是XMLHttpRequest对象,这个对象一直到1999年IE 5.0的发布才出现,而随着各浏览器的发展,IE系列和FireFox类(Mozilla的FireFox、Netscape的Navigator、Opera、Safari等)逐渐分成两大阵营,两系列浏览器所创建XMLHttpRequest的方法不尽相同,随着IE更多地支持W3C标准,在IE 7.0推出后,对于XMLHttpRequest的创建方式,已经可以和FireFox类一样了,这对开发者来说是一件好事。
XMLHttpRequest提供了一种类似“代理”的机制来异步传送数据,这区别于传统的方式。通过这样的方式,客户端和服务器间仅仅传送需要变化的数据部分即可,而对于页面格式部分不用再次传送,这样做的一个明显好处就是页面不刷新即可实现数据由客户端到服务器间的双向传送,如图1.11和图1.12所示。

图1.11 传统交互模式

图1.12 AJAX交互模式
1.2.4 AJAX的用处
使用AJAX可以做很多事情,如创建实时搜索、实现聊天程序、处理电子表格、登录、下载图像、玩游戏、动态修改网页等。