来源:视觉设计博客
严格说起来,AJAX
并不是什么新鲜的技术,而且也不复杂高深,但是自从
AJAX 这个名子出来之后,以及 Google 几个 Killer
级的服务应用 AJAX,使得 AJAX
好像在突然间大鸣大放,每个网站都想要开始采用类似的技术,但是
AJAX 真的有这么好吗?在了解 AJAX
之前先来看几个成功的例子:
实例介绍
Google Map
Google Map 是应用 AJAX 技术最成功的例子,只要一提起
AJAX,一定也会举 Google Map 做范例。底下是 Google Map 的
UI,如果你有用过一定很熟悉:
<img src="
http://photos15.flickr.com/18802040_1ce6de48b7.jpg" alt="map"
/>
你可以直接在 Google Map
的网页上拖拉缩放整面地图,地图细节则会慢慢显示出来
,就好像在你自己的计算机上使用
papago 等软件一样,这就是 Google Map 最引人津津乐道的
UI 设计,但是他怎么做到的?
GMail
GMail 也是一个例子,在你登入你的 Gmail Account
之后,你所看到的信件选单,信件内容等都是在同一个网页中显示,不论你怎么选择你都不会做换页,它是怎么做到的?
<img src="http://photos15.flickr.com/18802042_bd82adf1dc.jpg" alt="a"
/>
Technorati Search Beta
Technorati search 除了 search blog 文章外,现在也多了搜寻
flickr 图片以及 furl 和 del.icio.us 的功能,算是半个
meta-search engine
吧,而且这些搜寻的结果都是在同一个页面中显示出来,最快显示出来的数据当然是他自己
index 的 blog
文章,但当你在浏览结果时,网页的右手边也没闲着,正在帮你查询
flickr, furl, del.lcio.us 的结果呢!它是怎么做到的呢?
<img src="http://photos12.flickr.com/18811520_4335f8d35b.jpg" alt="b"
/>
这些问题的答案就是 AJAX。
传统网页流程的设计都是 Web Page -> CGI -> Web Page
(Response) 的顺序,这之间整个页面都要经过重载,而且
CGI
在处理时是需要时间的,所以使用者在这段时间中需要等待 ,但是这样的作法跟我们使用一般桌面应用软件的习惯不同,在多数的应用软件中,即使是需要等待处理的程序,也会先把处理完的结果先显示出来,但是在传统的网页流程设计中,这是很难达到的。传统的网页流程设计是
synchronous 的,而 AJAX 是 Asynchronous,这就是为什么 AJAX
的全名是: Asynchronous javascript And XML ( Synchronous /
Asynchronous 的概念就好像是写 network socket
程序时,synchronous / asynchronous IO,或是 blocking /
none-blocking IO 的概念类似)。
AJAX
并不是新的技术,早在这个名词出来以前,此类的技术就已经被广泛运用了,后来由
Adaptive Path 这家公司取了 AJAX
这个名词来代表此类的技术。所以在这家公司的网站上可以找到一篇由
Jesse James Garrett 所写的 Ajax: A New Approach to Web Applications
文章,可以帮助大家了解 AJAX
的定义以及技术层次的问题,这篇文章部分也被 Jacky's
blog 翻译成中文。其实说穿了,AJAX 就是运用 javascript
在背景偷偷帮你去跟服务器要资料,最后再由 javascript
或 DOM 来帮你呈现结果,因为所有动作都是由 javascript
代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦,让使用
Web Service 更像是在操作桌面软件。
但是, AJAX 真的那么实用吗?网络上也有不少 blog
在批评 AJAX:
Ajax: 99% Bad
嘟嘟老窝's AJAX的七宗罪
这篇文章讲得很好,说中了 AJAX 的麻烦所在。
Ajax:剩下什么呢?
AJAX 存在的目的跟 Flash 有点雷同,都是要改进 Web UI
的呈现方式,但是既然不同于传统的 WebUI
呈现,便会出现一些不兼容性,例如不利于搜寻引擎做
index,以及造成一个没有 history 及 backforward
的网页浏览,这都不一定是使用者想要的,并不是所有的网页都适合使用
AJAX 技术来改进 UI
呈现,在贸然转移前还是有必要多思考。
其它 AJAX Demo
Spell Check
Upload progress bar
这个 demo 可说是最能显示出 AJAX 强大的 Demo
了,很有趣,一定要看看。
Google Instant
这个 meta-search engine 会由 javascript 在背景去 google
搜寻你的关键词,所以也不需要经过页面重载。
Rico 的 AJAX Implementation 的 Demo
一定要玩看看他的 Weather Widget。