如果要問(wèn)做什么事是最有吸引力,那就是創(chuàng)建Web應(yīng)用。畢竟,上次你聽(tīng)到有人稱贊某產(chǎn)品的交互設(shè)計(jì)是什么時(shí)候的事了?(除了iPod之外) 它們都很cool, 而且都是很創(chuàng)新的項(xiàng)目。

  拋開(kāi)這些不管,Web設(shè)計(jì)者們對(duì)設(shè)計(jì)交互式的Web沒(méi)有什么更好的辦法,卻對(duì)我們做桌面軟件的同事投去少許羨慕的目光.桌面應(yīng)用程序有豐富的界面以及對(duì)于Web程序來(lái)說(shuō)無(wú)法比擬的響應(yīng)能力。同樣,Web的快速發(fā)展,在我們所提供的體驗(yàn)和用戶從桌面應(yīng)用程序所得到的體驗(yàn)間產(chǎn)生巨大的差距

  而如今差距正在消失。請(qǐng)看看“Google建議(Google Suggest)”. 觀察它按你的輸入顯示建議條目的更新速度,幾乎是立即更新的。再看看"Google Maps". 放大,用你的鼠標(biāo)搬動(dòng)和滾動(dòng)。這些動(dòng)作幾乎是立即響應(yīng)的,不用等待頁(yè)面刷新

  "Google Suggest"和"Google Maps" 是采用Ajax技術(shù)的兩個(gè)典型例子。Ajax是Asynchronous JavaScript and XML的簡(jiǎn)稱,它表現(xiàn)出一個(gè)Web開(kāi)發(fā)上的根本轉(zhuǎn)變,那就是,Web上可能做些什么.

  Ajax的定義

  Ajax不是一個(gè)技術(shù),它實(shí)際上是幾種技術(shù),每種技術(shù)都有其獨(dú)特這處,合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)。Ajax包括:

  • XHTML和CSS
  • 使用文檔對(duì)象模型(Document Object Model)作動(dòng)態(tài)顯示和交互
  • 使用XML和XSLT做數(shù)據(jù)交互和操作
  • 使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)接收
  • 使用JavaScript將它們綁定在一起

  傳統(tǒng)的web應(yīng)用模型工作起來(lái)就象這樣:大部分界面上的用戶動(dòng)作觸發(fā)一個(gè)連接到Web服務(wù)器的HTTP請(qǐng)求。服務(wù)器完成一些處理---接收數(shù)據(jù),處理計(jì)算,再訪問(wèn)其它的數(shù)據(jù)庫(kù)系統(tǒng),最后返回一個(gè)HTML頁(yè)面到客戶端。這是一個(gè)老套的模式,自采用超文本作為web使用以來(lái),一直都這樣用, 但看過(guò)《The Elements of User Experience》的讀者一定知道,是什么限制了Web界面沒(méi)有桌面軟件那么好用。

圖1: 傳統(tǒng)Web應(yīng)用模型(左)與Ajax模型的比較(右).

  這種舊的途徑讓我們認(rèn)識(shí)到了許多技術(shù),但它不會(huì)產(chǎn)生很好的用戶體驗(yàn)。當(dāng)服務(wù)器正在處理自己的事情的時(shí)候,用戶在做什么?沒(méi)錯(cuò),等待。每一個(gè)動(dòng)作,用戶都要等待。

  很明顯,如果我們按桌面程序的思維設(shè)計(jì)Web應(yīng)用,我們不愿意讓用戶總是等待。當(dāng)界面加載后,為什么還要讓用戶每次再花一半的時(shí)間從服務(wù)取數(shù)據(jù)?實(shí)際上,為什么老是讓用戶看到程序去服務(wù)器取數(shù)據(jù)呢?

  Ajax如何不同凡響

  通過(guò)在用戶和服務(wù)器之間引入一個(gè)Ajax引擎,可以消除Web的開(kāi)始-停止-開(kāi)始-停止這樣的交互過(guò)程. 它就像增加了一層機(jī)制到程序中,使它響應(yīng)更靈敏,而它的確做到了這一點(diǎn)。

  不像加載一個(gè)頁(yè)面一樣,在會(huì)話的開(kāi)始,瀏覽器加載了一個(gè)Ajax引擎---采用JavaScript編寫(xiě)并且通常在一個(gè)隱藏frame中。這個(gè)引擎負(fù)責(zé)繪制用戶界面以及與服務(wù)器端通訊。Ajax引擎允許用異步的方式實(shí)現(xiàn)用戶與程序的交互--不用等待服務(wù)器的通訊。所以用戶再不不用打開(kāi)一個(gè)空白窗口,看到等待光標(biāo)不斷的轉(zhuǎn),等待服務(wù)器完成后再響應(yīng)。

圖 2: 傳統(tǒng)Web應(yīng)用的同步交互過(guò)程(上)和Ajax應(yīng)用的異步交互過(guò)程的比較(下).

  通常要產(chǎn)生一個(gè)HTTP請(qǐng)求的用戶動(dòng)作現(xiàn)在通過(guò)JavaScript調(diào)用Ajax引擎來(lái)代替. 任何用戶動(dòng)作的響應(yīng)不再要求直接傳到服務(wù)器---例如簡(jiǎn)單的數(shù)據(jù)校驗(yàn),內(nèi)存中的數(shù)據(jù)編輯,甚至一些頁(yè)面導(dǎo)航---引擎自己就可以處理它. 如果引擎需要從服務(wù)器取數(shù)據(jù)來(lái)響應(yīng)用戶動(dòng)作---假設(shè)它提交需要處理的數(shù)據(jù),載入另外的界面代碼,或者接收新的數(shù)據(jù)---引擎讓這些工作異步進(jìn)行,通常使用XML, 不用再擔(dān)誤用戶界面的交互。

  誰(shuí)在使用Ajax

  在采用Ajax的開(kāi)發(fā)上面,Google做了巨大的投資。去年Google所有主要的產(chǎn)品都用了這項(xiàng)技術(shù)---Orkut, Gmail, 以及最近的beta版的Google Groups, Google Suggest和Google Maps---它們?nèi)茿jax的應(yīng)用。(要想了解更多這些Ajax實(shí)際的技術(shù)細(xì)節(jié),請(qǐng)看它們的分析文章:Gmail, Google Suggest, Google Maps). 其它的像:Flickr, 采用許多人們喜歡的Ajax特性, 還有Amazon的A9.com搜索引擎也采用類似的技術(shù)。

  這些項(xiàng)目證明了Ajax不只是學(xué)術(shù)上的,也有許多真實(shí)世界成功應(yīng)用。這不是什么實(shí)驗(yàn)室里的技術(shù)。Ajax的應(yīng)用可大可小,從非常簡(jiǎn)單的,像單一功能的Google Suggest到非常復(fù)雜的Google Maps.