Ajax技術隨處可見 愛迪生的燈泡和照明系統同樣通電會亮,但前者只是新發明,而後者卻是生活必需品,意義與價值相差甚遠,因為後者還多考量配套的基礎電力系統,以及相應使用習慣的設計,對Ajax而言,技術與網站應用亦是如此。

Ajax技術已趨成熟,甚至只需善用框架和工具,就可輕易做出桌面操作效果的高互動網頁,帶給使用者新的網頁操作體驗。但Ajax不只是炫麗的技術,更不是用來炫耀的技術,過度使用或只為趕流行而猛用Ajax,不但無法打動使用者,更會因動態產生的內容不易索引,而影響網站在搜尋引擎中的排名,造成反效果。拿捏使用者需要的Ajax應用時機,以及配套的網頁內容建置方式,才是將新技術推進普及應用的關鍵。

隨處可見,Web 2.0必備
2004年Google推出全球驚嘆的網頁信箱Gmail, 除超大容量吸引眾人目光外,如桌面軟體般不需換頁的操作介面也令人驚豔。隔年更推出至今無人能及的Google Maps,讓使用者可透過瀏覽器任意在世界地圖中遊走,無須一個指令、一個動作地等待伺服器回應。

資訊架構協會的Jesse James Garrett將這樣的技術命名為Ajax。Google帶來的網頁應用體驗,感染至各式各樣的網頁應用,Ajax隨處可見,企業商務系統供應商紛紛支援 Ajax技術,目前臺灣流量最高前十名的網站中,有九個使用Ajax技術,推動網路創業交流的隨想行動科技創辦人馮彥文強調:「沒有不用Ajax技術的 Web 2.0網站。」

推出Urmap地圖服務的友邁科技董事長卓政宏一語點出Ajax的價值:「最重要的關鍵效益是『更新而不重載』(Refresh without reload)。」

Ajax技術像是最新流行的3G手機,老奶奶不用等到過年全家團聚,想念那個孫子,就撥那個號碼,馬上可以看到小孫子流口水囁嚅的睡姿。運用 Ajax設計的網站,讓使用者不用重新下載全部網頁內容,可以要什麼就立刻秀什麼,不僅可即時回應使用者即時的需求,還能細膩地客製化每個回應,做到最貼近使用者的服務。

對使用者而言,Ajax技術保留網頁跨時空的優勢,同時進一步提供如桌面程式般的即時回應效果,能讓使用者更願意使用服務,可以大幅增加使用者停留在網站上的時間。卓政宏強調 :「採用Ajax技術後,的確讓Urmap伺服器的使用量成長了十幾倍。」

技術不難,直接好處是提高伺服器效益
所謂Ajax技術涵蓋JavaScript、XHTML/CSS、DOM、XML格式與非同步XMLHttpRequest等技術。實際上這些都是既有網頁技術,從功能上來說,Ajax是使用者端的瀏覽器操作控制與呈現控制,加上非同步的資料傳輸,對網頁內容物件進行資料更新,達到流暢的即時回應與局部更新效果。

就技術而論,Ajax發展至今,技術已相當成熟。《Ajax設計模式》一書作者統計,目前Ajax技術至少有超過70個模式、200多種技術框架、30套以上的工具可供開發人員運用,Amazon網站上也能找到超過一萬本Ajax相關書籍,連專職開發工具的CodeGear公司推出的所有開發工具都紛紛支援Ajax網頁的開發。對網站企業主而言,Ajax上手非常容易,甚至不需要很熟悉JavaScript、DOM或CSS,只要選用適當的框架和工具,就能夠很快做出很炫的Ajax網頁UI效果。

除開發不難容易上手之外,對網站企業主最直接的效益就是伺服器效能的改善。每一次Ajax網頁請求(XMLHttp Request),只傳輸需要更新的資料,即使請求次數增多,整體所需頻寬還是較少。而且網頁請求頻率的增加,可以透過網頁伺服器最佳化調校,降低伺服器的負擔。相較資料傳輸量的瓶頸,使用頻率是比較容易解決的問題。網擎資訊研發經理張嘉淵更直言說:「Ajax可降低不少伺服器的負載頻寬,就是省了很多錢。」同樣的伺服器和網路頻寬成本,卻可以服務更多使用者,意味著採用Ajax設計的網站,成本效益較高。
 
 整合配套才能發揮Ajax最佳效用 瀏覽器相容性衍生新成本
雖然Ajax技術的局部更新與呈現控制效果有很多好處,實際上仍衍生了新的開發成本。Ajax是多種技術的集合,由於不同的瀏覽器對不同技術的支援程度不一,呈現效果可能會差異甚大;而且,即使是同一種瀏覽器,不同版本的支援也會差異很大,例如同樣的邊界值設定,IE 6.0和7.0顯示的效果就大不相同。開發人員必須針對不同瀏覽器的呈現結果逐一調整。

友邁科技董事長卓政宏與網擎資訊研發經理張嘉淵不約而同地承認,瀏覽器相容問題是開發Ajax網頁最費力、也最麻煩的問題。網頁環境是開放的,不同於桌面應用程式的封閉性,開發人員無法百分之百預先針對各種可能的使用者瀏覽環境進行完整的軟體測試,只能盡可能支援主流規格。

Ajax開發不只是技術問題,經常需面臨技術與應用的雙重考量。網站開發人員經常面臨的兩難,是必須在網頁效果和瀏覽器相容性中取捨。為Sony 設計購物網站的Brix專案協理劉育廷無奈的表示:「為提供更細膩的效果,我們無法支援所有的瀏覽器,最後只好忍痛放棄使用人數較少的FireFox。」針對特定瀏覽器設計,比較能做出準確和豐富的呈現控制效果,但必須耗費時間成本追蹤和分析使用者的使用記錄,才能瞭解目標顧客的使用環境,這是比較有效率,但無法通吃的預判方式。

框架可解相容問題,但彈性受限
另一種策略是採用能專門解決瀏覽器相容問題的Ajax框架。例如Urmap下一版已經開始使用YUI(Yahoo! User Interface Library)進行開發,卓政宏指出:「應該把力氣花在產品內容,把繁雜的相容問題交給專家。」許多框架都會特別處理瀏覽器問題,以維持框架的相容性。例如YUI有專責單位Yahoo! Presentation Platform team負責長期維護。在這種策略下,網站企業主可更專注於產品實質內容的開發,但就須和特定框架綁在一起。

但是對開發網頁應用程式的服務供應商而言,他們對資料傳輸量的要求比較嚴苛,技術客製彈性需求比較高,網擎資訊研發經理張嘉淵認為:「試過一些框架例如Dojo或YUI,因為支援太多功能而檔案太大,影響下載速度,客製彈性也不夠。」因此網擎資訊選擇不用框架,自行研發Ajax應用。在瀏覽器相容性勞務負擔與彈性客製化之間,網站企業主必須作一個選擇。

從表格走向物件,開發思維須轉型
雖然瀏覽器相容性是外在影響因素,對網頁企業主而言,Ajax技術也同樣會造成內部開發的結構性變革,最主要因素是網頁內容的物件化要求。網頁內容透過CSS或XML包裝成物件後,Ajax才能透過JavaScript精準的控制DOM來更新資料或改變呈現的方式。網頁內容物件化程度不夠時,會造成JavaScript執行失敗,或干擾原本已有效的控制程式。

物件化的設計思維其實是CSS的設計精神,但過去網頁開發人員或美工設計人員習慣採用表格對版面直接進行鋪排,直接視覺化的角度,安排網頁內容的架構。表格式的設計思維,造成內容的呈現方式和意義架構的混合,一旦要調整不同的呈現方式,或修改意義架構時,就必須重新設計網頁,造成許多重複工作。即使可以透過網頁範本套用,仍須為不同的呈現,設計不同的網頁範本,這仍是許多網頁開發人員拋不開的痛苦。

CSS採用物件化的設計精神,可以將內容和呈現分離,使得同樣的內容可以一再套用到不同的呈現樣式。局部樣式修改,也可以馬上反映到所有套用的內容上,不需逐一修改網頁,應用彈性和可用性可大幅提高。但CSS之所以過去難以普及的原因,在於內容與呈現分離的物件化設計概念,過於抽象,無法直接從視覺上看到效果。開發前置作業期程將會因此耗時更久,開發人員必須先分離出網頁內容的整體結構,考量未來可能呈現的樣式,進行規畫,不易像過去那樣邊做邊改。這是完全不同的設計思維與開發習慣的躍遷。

對設計人員而言,需要進行心態的轉換與相當時間的習慣調整。Ajax技術會迫使網站開發人員需重新檢視設計思維,調整過去直覺式的設計習慣,採取更嚴謹的開發規畫。最近也開始出現一些網頁物件化設計的框架,例如臺灣Yahoo!奇摩使用的LSM(Layered Semantic Markup)框架,採取資料內容、呈現樣式與操作行為分開的設計,達到網頁結構化,以及開發與設計協同分工的目的。

網站開發需要更細膩的專業分工
更深一層的開發思維影響是互動設計的專業化。目前多數Ajax網站的開發原因,對介面物件操控與互動效果的設計,多數仍由程式開發人員主導。不是因為開發人員擅長互動設計,而是設計人員害怕寫程式。臺灣最大設計網站黑秀網下任站長(網路代號:火星人)表示:「設計人員連一行程式都不願意碰,這是難以跨越的鴻溝。」

設計人員多採逐頁畫面設計的思維,將頁面變化的截圖,交給程式人員處理成動態效果。但畢竟程式開發人員不見得能比設計人員更熟悉設計或美感呈現的考量,這樣截然二分的流程其實限制了動態效果的呈現方式,或者是局限在小地方互動的機制,從而缺乏整體性的設計。

透過Ajax技術的網頁,內容會依據使用者的操作動態產生,而介面互動方式,又會因產生的內容衍生,使得介面設計的難度更高。再加上動態更新的網頁內容,不利於搜尋引擎的索引,全面採用Ajax技術,反而影響網站內容在搜尋引擎上的排名能見度。

Ajax方便性與搜尋引擎最佳化(Search Engine Optimization,簡稱SEO)的拿捏使得Ajax網站的介面設計,需面臨多種向度的綜合能力。已有大型網站,招募專責人員負責介面設計,例如 Yahoo!的前端技術工程師(Front-End Engineer,簡稱F2E)、或是Yam天空網站的網頁工程師(Web Master)等,不再只是通稱網頁設計、視覺設計或美工。專門職位的設立,反映出Ajax介面設計的專業分工趨勢,網站企業主採用Ajax技術時,對互動品質要求越高時,就不僅是選對技術框架,或找到專精的設計人員就足夠,而是需要專職介面設計人員。

網頁豐富應用各家爭鳴,企業需評估Ajax採用時機
讓我們再從網頁豐富應用(Rich Internet Application)的角度來看,Ajax也並非是唯一的技術。Flash已經出現十年,可以提供更豐富的動態互動與影音效果。但Flash的設計難度更高,相較於懂JavaScript的人力,能夠充分運用ActionScipt的人力非常缺乏,Flash強於設計輔助,但對介面程式開發的支援和管理相對較弱。兼具開發人力與互動效果雙重優勢的Ajax,仍有不可取代的價值。

但此一優勢現在也面臨極大的挑戰,Ajax正受到內在技術的局限與新興技術的競爭。Ajax技術一方面引發越來越高的網頁安全問題,衍生新的資安控管與程式設計安全問題,使得技術框架需要更多複雜的程式碼來控管,進而影響效能和下載意願。另一方面,面對日益複雜的應用需求,Ajax技術遇到瓶頸,也開始不勝負荷,例如無法快速處理商務網站所需的上千筆資料排序。

Ajax有內憂,而次世代網頁技術也節節逼近,例如微軟新推出的Silverlight技術,兼具搜尋引擎最佳化與介面呈現效果,又擁有完整的開發與設計工具支援,來勢洶洶。昇陽也預告將推出專攻RIA應用的JavaFX新語言,主打行動裝置的相容性等。

但技術優劣不等同於應用效益,最後何者勝出,端視應用的整合配套。網站企業主需評估Ajax技術與企業應用需求時,需考量整合效益,衡量長期維護與內容建置是否能配合,清楚瞭解採用後需調整的配套作為,而不是一昧追趕流行比效果,才能發揮Ajax技術的最佳效益。

arrow
arrow
    全站熱搜

    雪 薄草 發表在 痞客邦 留言(0) 人氣()