2007-09-07

Ajax不只是炫技



http://www.ithome.com.tw/itadm/article.php?c=44009

Ajax不只是炫技
文/ iThome (記者) 2007-06-25

Ajax不只是創造炫麗效果的網頁技術,企業也能用來改善ERP系統的操作效率與使用性。




Ajax看似容易,其實背後需要網站開發與內容建置的整體配套,能夠評估Ajax的最佳使用,才是提高效益的關鍵。本專題將告訴你如何評估Ajax的配套機制,讓你善用技術框架快速上手,用十本書掌握全部關鍵運用。

Ajax技術隨處可見
運用Ajax設計的網站,讓使用者不用重新下載全部網頁內容,可以要什麼就立刻秀什麼,不僅可即時回應使用者即時的需求,還能細膩地客製化每個回應,做到最貼近使用者的服務。

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

規劃
20個Ajax關鍵議題
概念 開發 設計,到企業最關心的 資安問題,完整呈現Ajax的每一面,讓我們一網打盡所有關於Ajax的問題,幫助你打通任督二脈,快速了解Ajax美麗與哀愁。

實作
10大Ajax開發守則
Ajax雖然為使用者帶來瀏覽時的易用性,不過如果將所有內容都透過Ajax來產生,會造成搜尋引擎無法索引資料的情況。因此與內容相關的部分,需謹慎使用Ajax。

10大加速Ajax開發的框架
開發Ajax不需要重造輪子,我們精選10大框架,讓你掌握各框架精華,找出最切合需求的技術,省去從JavaScript底層重新開始構造程式的工作。

參考資料
10本Ajax必讀好書
透過推薦的Ajax書籍,好好咀嚼這些書,幫你開光點眼,以更恢宏的視野處理Ajax系統。

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的非同步XMLHttpRequest可定期更新信箱旁的郵件數量,讓網頁應用程式的操作更接近桌面軟體。

自動完成可減少使用者輸入錯誤

根據使用者已輸入的部分字串,運用Ajax技術列出後端資料庫中的參考詞,供使用者選取,達到自動完成的效果。自動完成看似會產生大量查詢數,但可透過代理伺服器快取常用詞,或輸入幾個字才提出請求來降低伺服器負擔。

圖片狀態預載增加使用自由度

最典型的Ajax應用Google Map。使用者按下左鍵可「抓」住地圖,上下左右拖曳,網頁中的JavaScript Engine會判斷顯示區域的地圖是否已經下載,會於背景預先下載,維持使用者瀏覽的順暢性。

整合配套才能發揮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技術的最佳效益。文☉王宏仁

20個Ajax關鍵議題 歷經多年的發展,Web仍停留在點選、換頁的瀏覽方式。Ajax出現後,改寫了此種網頁必須不斷重新載入的互動模式,運用非同步技術,網頁只更新局部的內容,因此提供使用者更順暢、即時的互動模式。

少了「重新載入」的動作,Ajax呈現的是比傳統更酷炫效果,但是否該全面採用Ajax,企業除了看熱鬧外,更想了解「門道」。Ajax會不會拖慢效能? 主要的學習門檻是什麼?搜尋引擎會不會因此找不到網頁內容,而影響了網站曝光度?其他RIA(Rich Internet Application)技術是否會取而代之?更重要的是,會不會引發資安的問題?

讓我們一網打盡所有關於Ajax的問題,幫助你打通任督二脈,快速了解Ajax美麗與哀愁。

概念

 

Q1:採用Ajax技術,除了酷炫效果之外,還有什麼好處?
答:所謂的「酷炫」應該是指可以隨意拖放網頁上的Widget、色彩漸層、元件的淡出╱淡入、圖案變大╱變小等效果,或者驚豔於Web Mail竟然可以提供類似Outlook的介面。

其實最直接而明顯的好處,是減少網頁重新載入的次數。

根據統計,購物網站每刷新一次網頁,就會有10%的消費者在等待的過程中「清醒」,發覺未必有購買的需要,而取消交易。當網頁不再因為少部分的資料被修改,就必須重新載入整個網頁,即可減少使用者等待的時間,提供更流暢的操控體驗。

無論是酷炫效果、精緻的畫面,或者順暢的流程,對於網站的形象、商品銷售及使用者體驗都具加分的效果。

Q2:操控流暢對網站是有加分效果,但從企業的角度,關心的層面還包括Intranet的應用,Web應用程式適合加入Ajax技術嗎?
答:在我們了解推推王、UrMap、Yahoo!及網擎Mail2000等的Ajax應用之後,發現Web應用程式還真的非常適合採用Ajax技術。

注意力持續,有效提升生產力
應用程式的操作往往包含複雜的流程,然而Web化之後,流程變成了一連串網頁提交(Submit)的動作,每一次的更新網頁都需要數秒的等待,而且不能按「上一頁」退回前一個步驟。

在Web化的時代,企業最擔心的問題,並不是浪費了那幾秒等待載入網頁的時間,而是人在等待的空閒,很自然地會開啟另一個網頁,注意力就被導引到其他更有趣的資訊上,再次回神時,可能是半小時以後。

所以,對購物網站而言,注意力的持續是訂單的保證;對企業而言,則是生產力的提升。

延續桌面應用程式的操控體驗
不能按「上一頁」的操作模式,強烈地顯現出「應用程式」與「瀏覽器」操作習性上的不同。當應用程式執行的環境搬到Web之後,使用者仍然期待保有桌面應用的操作體驗,透過Ajax的非同步技術,即有機會消弭應用程式與瀏覽器之間的鴻溝。

以Yahoo!郵件信箱與Mail 2000為例,在Ajax化之後,使用者體驗的是與Outlook極其類似的操作方式。網擎資訊從用戶的回饋發現,由於操控方式的改變,使直覺與便利性向前躍進一大步,因此使用者滿意度明顯提升。

Q3:會不會拖慢Web伺服器效能?
答:可能是因為Ajax的酷炫效果,以及首次載入Ajax網頁的時間比一般HTML網頁長的原因,所以容易讓人誤以為採用Ajax會拖慢伺服器效能。事實上,剛好相反!

Ajax技術與傳統網頁與Web伺服器溝通方式各有不同。傳統的作法是用戶端送一個請求(Request)至Web伺服器,即使只需更動一個欄位的值,Web伺服器仍需重組一個完整的網頁,回應(Response)給用戶端,也因此瀏覽器必須重新載入一次。

相較之下Ajax技術使網頁具備程式能力,當使用者修改資料,觸發了JavaScript程式,瀏覽器便將使用者輸入的資料傳送至Web伺服器,Web伺服器會再把需要回傳的資料送至瀏覽器,當JavaScript接收到資料之後,再把結果呈現在網頁上。

過程中完全沒有觸發提交動作,Web伺服器只回傳需要修改的內容,而且瀏覽器也沒有重新載入的動作。這對伺服器負載、頻寬使用量及用戶端的操作體驗是三贏的局面。

根據UrMap改用Ajax技術傳遞地圖資訊的經驗,在使用人數成長了10倍以上的情況下,伺服器的負擔相較於以往仍是減少,而頻寬使用量也沒有增加太多。

再以網擎資訊Mail 2000 4.5 Beta版改採Ajax技術為例,觀察的結果發現,伺服器需要運算的資料量減少,頻寬成本也下降。以一頁的信件列表為例,過去100封郵件約需要傳送 120KB的資料量,現在則降為30KB。點選「新信檢查」功能,遞送的資料量約略是過去的1/5∼1/4。

Q4:AutoComplete這類的Ajax機制,頻繁地向伺服器要資料,應該會拖慢效能,是否有方法可解?
答:AutoComplete或內容自動更新等Ajax機制,是使用者非常喜歡的功能。但人數眾多時,確實可能拖慢伺服器效能。

不過,此類問題可從設計上解決,例如設定快取機制、延長反應的時間、每填入3個英文字母才查詢一次,或者限制使用資料等,都是可能的解法。

帶領開發UrMap的友邁科技董事長卓政宏形容:「這是一種程式管理資源的方法。」他舉例:UrMap下載的地圖資訊,其實略多於網頁顯示的範 圍,使用者微幅地拖拉或縮放地圖時,其實叫用的是本機資料,並沒有對伺服器發出請求。所以,只要根據使用者的行為模式調整設計,就可以降低伺服器的負擔。

Q5:那麼Ajax對用戶端的執行效能有何影響?
答:相對於傳統網頁,Ajax技術使得用戶端與伺服器傳遞的資料量變少,又避免了網頁重新載入的機會,Ajax操作階段的效能的確是較佳的。

不過,首次登入網站時,下載的資料除了頁面呈現的內容外,還包含強化互動性的JavaScript程式時,你可能會發現載入時間變長。針對用戶端的執行效能,Yahoo!國際資訊軟體工程師蔣定宇認為:「盡量縮短JavaScript程式碼,就可以將影響降到最低。」

Q6:企業如果要導入Ajax,人才好不好找?
答:Ajax包括JavaScript、DHTML、CSS、XMLHttpRequest、XML或JSON等,是眾多技術的集合,要了解這些技術,一定存在著門檻。

其實Ajax主要是JavaScript的應用,但蔣定宇從面試JavaScript工程師的經驗發現:「臺灣比較重視ASP、Java和PHP。」過去 JavaScript是設計警告訊息或文數字檢查等輔助網頁輸入的稿本語言,所以開發者普遍認為JavaScript、HTML、CSS只是網頁設計的輔 助語言,所以好的JavaScript人才難尋。

網擎資訊研發經理張嘉淵提出類似觀點:「技術都不是問題,JavaScript不難,但要寫得好,不容易。開發者必須用寫『核心』的心態開發JavaScript。」

Q7:那麼對於懂JavaScript的程式開發人員而言,Ajax的門檻在哪�?
從開發者的立場來看,推推王創辦人邱繼弘倒認為:「CSS和DOM是主要的門檻。」

Ajax技術超出單純程式開發的範圍,開發者需要與設計人員合作,並了解網頁相關的CSS、DHTML、DOM等技術。即便成熟的工具相對降低學習的難度,但要學的東西變多了,同樣形成一種門檻。

Q8:這麼看來,網頁開發團隊的角色定位與合作方式,是否因為導入Ajax而必須改變?
答:工作方式確實會受到衝擊。以Yahoo!為例,過去網頁設計分為VD(Visual Designer,視覺設計師)與RD(Research Developer,研發人員)兩種角色。VD負責網頁設計,必須了解HTML應用,RD則熟PHP、API、資料庫等技術,讓網頁串連後端程式與資料。

而今在VD與RD之間,多了一個WD(Web Developer,網頁開發人員),舉凡「檢視原始碼」可看到的內容,包括HTML、CSS、JavaScript都是WD負責的範圍。

工作方式將產生明顯的變化,VD描繪出網頁應該有的樣子,WD則思考HTML標籤的語義,使用正確的標籤做出正確的網頁結構,再搭配CSS給予外觀樣式。此外,最重要的工作就是運用JavaScript撰寫網頁的前端互動行為。

網頁設計流程到WD為止,仍是非真實的頁面,尚未連接後端真實的連結與資料。當網頁交給RD之後,RD人員負責套上真實的連結與資料。

這樣的開發流程並非臺灣Yahoo!特有的設計,在美國Yahoo! ,他們稱WD為Front-end Engineer;而蕃薯藤稱為Web Master;趨勢科技則稱之為Prototyper。

工作形態的轉變是必然的趨勢。當前端網頁的設計,除了美工之外,還包含程式化機制,人員角色與開發流程都會隨之變化。即使在有限人力的情況下,必須一人分 飾兩角(通常是RD再身兼WD的工作),但設計(Designer)與開發(Developer)兩者的合作模式,仍不同於以往。

Q9:網頁包含CSS、HTML,還有JavaScript程式,是否會不好維護?
答:根據Yahoo! 的定義,網頁包括上述三種元素,HTML定義結構、CSS設計樣式,而JavaScript控制行為。導入Ajax將迫使網頁採用CSS,如此模組化的切分方式,反而是提高網頁的維護性。

不過,雖然維護Ajax網頁並不困難,但相較於其他程式語言,即使JavaScript的開發工具已經逐漸成熟,除錯(Debug)方面的功能仍 有瓶頸。主要是因為各種瀏覽器針對使用者的操作,所觸發的各種事件仍有差異,除非瀏覽器走向標準化,否則開發工具要模擬各種瀏覽器的行為仍有難度。

不過還是有一些選擇。就像IE瀏覽器已經推出Internet Explorer Developer Toolbar,或者可以選擇IE Inspector推出的AxScripter等,而Firefox則提供Firefox Debugger。透過這些外掛套件的協助,已經逐漸降低除錯的難度。

Q10:既有的網站或Web應用程式,是否建議以Ajax技術改寫嗎?
答:若是新興的網站或Web應用程式,尤其是產品化的Web應用程式或網站,採用Ajax技術幾乎可說是不得不的選擇,而且如果沒有提供Ajax的效果,相形之下很容易失去競爭力。

然而,對既有的網站而言,「為技術而技術」是非理性的行為。卓政宏認為:「技術的進步總是會有幫助,但必須考量是否有投資的價值?企業應該思考Ajax能做什麼?」

邱繼弘建議:「針對特定問題,運用Ajax解決技術上的瓶頸就好。」許多功能往往是牽一髮而動全身,稍加更動就必須全部改寫,全盤翻新的風險太高。

Ajax原本就是眾多技術的集合。對於初學者而言,Ajax的門檻不低。即使只是微幅的修改,在測試與上線的過程中,仍有許多瑣碎的工作要面對,所以冒然採用未必是明智的決定。

Q11:Ajax技術會不會有跨平臺的限制?
答:若是問Ajax能否跨作業系統平臺,答案是Yes。

Q12:Ajax技術跨瀏覽器的問題該如何解決?
答:Ajax在跨瀏覽器遭遇的問題,在於瀏覽器之間的行為差異,所以開發者需要測試JavaScript程式在各種瀏覽器執行時的相容性,並針對差異的部分,撰寫不同版本的程式。

或者,最簡單的方式,就是套用YUI等Framework,透過平臺解決相容性問題。

Q13:Ajax開發的應用能否平順地在電腦、手機、PDA等不同裝置上順暢運行?
答:答案是No。隨想行動科技總經理馮彥文表示:「主要原因在於手機裝置對規格的支援不一,不論J2ME、Flash或Ajax都會遇到相同的問題。」

再者,每款手機的螢幕大小都不同,況且一般網頁的資料量灌入手機螢幕會顯得冗長。若要講求美觀,都必須針對行動裝置提供特殊化的內容。例如國外知名的微型部落格網站Twitter, 便針對手機平臺設計特製的網站m.twitter.com

Q14:聽說用Ajax開發的網頁內容,搜尋引擎可能找不到,那不就會影響網站的能見度?
答:其實是設計上的問題。這關乎一個專有名詞稱為SEO(Search Engine Optimization,搜尋引擎最佳化)。關於SEO的顧慮,究其原理,搜尋引擎的機器人是根據網頁中的連結找到其他的網頁,再找到內容,所以網頁內 容必須使用固定網址(Permalinks),搜尋引擎才會找得到。

若是改由JavaScript動態產生內容,那麼將變成是由事件驅動(Event Driven),也就是使用者「開啟」網頁或「點選」連結才會產出內容,那麼搜尋引擎機器人便無法找到資料。

邱繼弘說:「這是網站設計的一種思維。希望增加曝光度,就要能夠被搜尋引擎找到。」推推王中關於Ajax技術多半都用在視覺上,每筆資料都有獨立的網址,他們絕對不破壞「Content Unique」的原則。

Q15:什麼樣的應用不適合採用Ajax?
答:以下幾種情況不建議使用Ajax技術:

網頁需要變動的範圍比例很高
張嘉淵強調:「取決的關鍵點,就在於要搬多少資料到瀏覽器。」Ajax適合應用在局部、小量資料的修改,以減少網頁重新載入的機會,網頁中需要更新的比例很高,不如就重新載入吧!

排序
在ASP、JSP盛行之後,在網頁上利用DataGrid控制項建置動態查詢的報表是企業常見的應用。除了簡單的查詢功能,還可以任意地點選欄位變換排序的方式。此種應用便不適合採用Ajax。

尤其是在資料筆數多的情況下,張嘉淵強調:「20筆和100筆資料的排序,對網頁效能的影響,絕對不只是5倍的差距。」對瀏覽器而言,變更排序方 式就是整個DOM(Document Object Model,文件物件模型)的摧毀與重製,這類的應用反而是交給擅長資料處理的資料庫比較適合。

需要換頁的應用
Ajax訴求的就是實現不換頁的資料更新,所以網址列沒有變動,而這也就沒有「上一頁」、「下一頁」的記錄。因此有換頁需求,尤其使用者有可能按「上一頁」的應用,便不適合採用Ajax。

Web應用程式之所以適合採用Ajax技術的原因,也在於應用程式沒有換頁的概念。因此,在開發Ajax應用時,設計者也應在操作思維上,避開使用者會想按「上一頁」的可能性。

Q16:若講究高互動性,其他RIA技術例如微軟的Silverlight及Adobe的Flash,可以提供更即時互動的效果,為什麼選擇Ajax?Ajax會不會只是過渡性的技術?
答:這個問題必須分成以下兩個層面來回答:

Silverlight或Flash的門檻更高
習慣右腦思考的程式開發者,未必能兼擅需要以左腦設計的Flash或Silverlight。當我們詢問推推王的開發團隊這個問題時,相關人等全 部搖頭晃腦地表示不喜歡Flash。其中陳冠傑以過去嘗試使用Flash經驗表示:「Flash的效能比較差,程式化的行為必須寫在 ActionScript中。」

從微軟展示的Silverlight案例中,德國的女性購物網站OTTO、法國的法雅客購物網站,它們的圖像化、直覺式的流暢設計確實令人目炫神迷。

假如是沒有專業美工人才的網站,他們更難以面對Dreamweaver或Expression Blend,要接受以時間線(Timeline)結合圖層產生動感效果的概念,開發人員需跨過的門檻更高。

Flash、Silverlight與Ajax可以並用
就微軟開發平臺而言,企業若需要比Ajax更酷炫的視覺效果,可利用Expression Studio設計網頁、圖像及動畫等視覺元素,而邏輯運算的部分,則仍然是透過Visual Studio工具開發Ajax應用,所以兩者並不衝突。

而Flash的應用,程式化採用的稿本語言是ActionScript,它的語法非常類似JavaScript,但仍可能令開發者感到排斥。 Adobe現已提出解決的方案,為了強化Flash與Ajax的互動,Adobe推出Flex-Ajax Bridge,讓JavaScript與ActionScript可以相互溝通,那麼Ajax與Flash元件就可以並存。

安全性

 

Q17:使用Ajax,是否讓網站曝露在更高的風險中?
答:所謂Ajax,最狹義的說法是指非同步傳輸的溝通方式,也就是使用XMLHttpRequest這個瀏覽器物件來處理用戶端與伺服器端資料交 換的過程。就通用說法而言,Ajax進一步包含了使用JavaScript操作CSS與DOM(文件物件模型),以呈現豐富的視覺效果。因此Ajax的技 術早已存在,它就是JavaScript,而Ajax只是一種應用的觀念。

JavaScript本身是用戶端的程式語言,是在網站使用者的電腦中執行,不像伺服器端的腳本程式,因此對網站本身造成威脅的機會極低。

有些人認為Ajax程式能夠透過檢視程式碼的方式看到它的程式邏輯與變數使用方式,而增加對網站的攻擊面,不像伺服器端的程式,能隱藏程式語法。

事實上,一個安全的網站,原本就必須在前端資料傳遞到後端時,做好過濾與把關的工作,不要相信前端傳來的東西,這是一個網站開發人員必須牢記在心 的金科玉律。如果伺服器端程式在設計時能謹守本份,重視程式的安全規畫,那麼無論前端是由使用者輸入資料傳來的,或是由JavaScript程式傳遞而 來,都一樣安全。

反而是由伺服器端發展出來的Ajax解決方案,例如DWR,能讓使用者能從前端程式使用後端Java語法,即可能有潛在的安全威脅。

Q18:使用XMLHttp Request進行非同步傳輸時,難道沒有潛在風險?
答:事實上,瀏覽器在設計這個物件之初,就已經考量到安全性的問題,因而限制XMLHttpRequest請求的資源與呼叫的腳本程式,兩者必須 在同一個網域內,不能存取網域外的資源,藉此降低風險。這可避免惡意程式任意抓取資料,或是上傳具危險性的程式給其他伺服器執行。

不過Web 2.0盛行的混搭(Mashup)方式,透過開放API進行資料交換,而這種方式的確就是繞過同一網域的限制,會產生一定的風險。設計這類API時,必須特別注意它的存取限制,以免讓駭客有機可趁。

Q19:Ajax會向伺服器頻繁要求資訊,是否會對網站形成阻斷式攻擊(Denial of Service)的效應?
答:就Ajax的設計模式而言,的確向伺服器發出要求的次數將會增加,往往一點異動,就會與網頁伺服器或資料庫互動,尤其互動效果越多,更是如此。

就拿Google搜尋時會採用自動完成的功能,列出可能的搜尋關鍵字,或是雅虎奇摩的字典查詢服務,也有相似設計,只要輸入文字,便會向伺服器要求待選字。

這個安全性問題應該就兩個層面來看。首先應用這類Ajax語法時,原本就必須做好效能考量與測試,例如善用快取功能,記錄反覆查詢高的關鍵字,反而能降低伺服器的負擔。

其次,如果駭客打算使用DoS對一個網站發動攻擊時,事實上無論是不是採用Ajax都一樣,而且利用Ajax發動DoS,不見得是有效率的作法。

Q20:如果Ajax對伺服器端的危害有限,那麼對用戶端呢?
答:雖然採用Ajax進行非同步傳輸時會受到本地端的限制,提供了一定的安全性,然而由於採用JavaScript,便會讓使用者遭到跨站腳本攻 擊(Cross-Site Scripting,XSS)的機會增加,而讓駭客可以趁機竊取使用者的帳號資訊或殖入惡意程式到使用者的電腦中。

過去使用者還可以透過關掉JavaScript方式,以降低瀏覽網站時的風險,不進入Ajax網站關掉JavaScript,形同使用者拒絕進入該網站,因為基本功能都無法使用。

由這觀點來看,的確Ajax盛行,讓駭客更有機會透過XSS的手法侵害使用者,不過XSS之所以能成功,通常是網站本身已經存在資安防線上的漏 洞,例如沒有檢查使用者上傳的資料,或是應用程式、系統本身有漏洞,如果能做好這些資安防護,那麼即使採用再多的Ajax功能,使用者一樣安全無虞。

10大Ajax開發守則 1. 前、端後都要做好安全的把關工作
不能單靠前端做安全驗證工作,後端也必須有過濾機制,檢驗前方傳來的資料。由於Ajax也會接收後端傳送來的資料,對這些資料都要採不信任態度,必須加以檢查。

2. 盡量以HTTP POST方法傳輸資料
使用GET方法容易讓有心人士得到資料,雖然POST並非萬無一失,但比起GET至少較為安全。

3. 不要直接用eval函式喚起JSON物件
JSON是採用JavaScript物件實字的資料格式,從後端傳到Ajax程式時,必須採用eval函式將它從字串轉成物件,這時必須先行檢查資料中是否有非法字元,以免非法程式藉機啟用。

4. 限制使用者可用的HTML語法
許多Ajax網站允許使用者在留言中使用HTML語法,而某些特定語法應該嚴格限制,例如<plaintext>或是<!- -這類語法,都會讓置於之後的程式碼失效。

5. 禁止可留言的網頁頁面使用JavaScript語法
雖然乍看之下覺得不可思議,不過的確在一些部落格平臺上發生過,這讓XSS攻擊開了大門。

6. 使用Ajax框架,必須注意安全性問題
由於駭客利用JavaScript進行攻擊手法日新月異,當網頁開發人員利用Ajax框架時,必須注意框架本身是否對某些特定手法具有防治行為。

7. 讓使用者知道自己身處的狀況
當Ajax載入資料量大時,有時會讓使用者產生錯覺,不確定剛剛按下的按扭是否發生作用。因此開發人員必須設計適當的提示,讓使用者了解目前程式的執行狀況。

8. 保持小量傳輸
Ajax的靈活性在於動態改變局部資料量,因此小量傳輸資料才能達到最高效益。如果一大張資料表都要透過DOM的操作來改變,不如就由後端程式與資料庫來操作,效益更高。

9. 注意易用性與內容的平衡
Ajax雖然為使用者帶來瀏覽時的易用性,不過如果將所有內容都透過Ajax來產生,會造成搜尋引擎無法索引資料的情況。因此與內容相關的部分,需謹慎使用Ajax。

10. 執行優雅降級原則
網站如果並非全面性採用Ajax技術,而只是為了局部增加互動性,這時必須考量不支援JavaScript的使用者,設法在不使用這些功能的前提下,讓他們還能正常地瀏覽網站。

10大加速Ajax開發的框架 隨著Ajax盛行,許多網站紛紛採用這項技術,而這股時代趨力的背後,各式各樣的Ajax框架可說是最大的功臣,讓開發人員不用重造輪子,省去從JavaScript底層重新開始構造程式的工作。

不過開發人員也許會疑惑,Ajax不就是JavaScript嗎?簡單的腳本程式還需要框架?事實上,Ajax框架的確能帶來許多好處。

簡化JavaScript的使用難度
許多開發人員低估JavaScript的難度。過去JavaScript往往被當作是擾人的小玩意,不是彈跳出視窗,就是跑馬燈、動態文字等花俏的應用。

然而JavaScript獨特的物件觀念與靈活的語法,賦予它深入操作文件物件模型(DOM)與操控CSS的強大能力,而能夠充分應用瀏覽器XMLHttpRequest物件,更打下今日Ajax大片江山。

要全盤掌握這些應用,並沒有想像中容易,由於實作的方式充滿彈性,只要檢視各個框架語法,就可發現它們之間的差異性之大。但現存的各種框架致力於簡化JavaScript的應用難度,因此使用Ajax框架,能讓開發人員更快專注在開發工作上。

解決煩人的瀏覽器相容性問題
即使開發人員功力深厚,可以輕鬆駕馭JavaScript語法,然而一旦遇到琳瑯滿目的各式瀏覽器,通常也得敗下陣來。

不同瀏覽器對文件的解析與語法的支援並不一致,在各種作業系統或版本上有時也會表現出不同的行為(例如IE6與IE7的差異),讓許多JavaScript應用程式的瓶頸,都發生在相容性上。

使用Ajax框架的好處之一,便是它已經預先為開發人員解決瀏覽器相容性問題。

開發流程變得更單純
開發過非同步傳輸程式經驗的人,就一定能體會撰寫過程相當煩瑣,必須檢查回傳狀態、指定後端應用程式和回呼程式等細節,而這些流程,Ajax框架通常會予以簡化,減少開發人員與細節奮鬥的時間。

另外,許多Ajax框架都提供了拖曳元件、動畫效果、動態選單等,只需指定方法就能使用,節省不少開發力氣。

不過Ajax框架實作的方式各不相同,有些JavaScript語法開發,也有的用.NET或Java實作;除了在用戶端執行,也有利用伺服器端來實現的方式。我們特別選出十種Ajax框架,讓開發人員了解各項Ajax框架的適用性。

1. APS.NET的官方解決方案
ASP.NET AJAX
網址: ajax.asp.net

ASP.NET AJAX是微軟.NET平臺上的解決方案,提供涵蓋伺服器端與用戶端所需的AJAX技術與JavaScript整合機制。

透過與下載與安裝ASP.NET AJAX到Visual Studio 2005當中,即可利用預設的控制項,開發出一些視覺特效與非同步傳輸的應用。

另外,ASP.NET AJAX也提供控制項的Toolkit,包含開發人員想自行開發AJAX應用時所需的基底類別與專案範本。

ASP.NET AJAX除了處理瀏覽器的相容性問題,也讓用戶端的JavaScript在開發時加入物件導向特性,例如型別系統、資料型別、命名空間、事件等,使得程式碼更容易除錯、維護與重複使用。

雖然ASP.NET AJAX提供伺服器與用戶端的解決方案,透過Visual Studio 2005加持,也讓開發、除錯的難度降低,不過和其他AJAX框架相比,許多AJAX效果和功能都還在測試階段(在CTP版本中供用戶測試),可以應用的功能有限。

2. 支援「上一頁」與加入「我的最愛」功能
Dojo
網址: dojotoolkit.org

一些輕巧的Ajax框架,用意在解決JavaScript遇到的易用性或特效問題,相較之下,Dojo更像是個面面俱到的JavaScript工具套餐,號稱可以降低網頁或網頁應用程式前端開發速度。

Dojo支援拖拉、淡出、淡入、移動、透明、操作SVG圖檔等動態效果,它的Widget也讓使用者可以輕易使用選單,分頁標籤(tab)、樹狀結構、日曆、文字編輯器等效果,當然也支援非同步處理的Ajax功能。

另外,Ajax由於以動態的方式操作文件物件,導致使用者習於使用上一頁、下一頁的功能無法使用,也無法利用像是「我的最愛」的功能,將使用者所需的頁面留下正確的書籤,但這些需求Dojo都已有解法。

比起其他輕巧型的Ajax框架,要摸熟Dojo顯然要下較多的功夫才能掌握,目前文件較少也是個問題。不過由於它的功能更為完整,因此開發人員需要自行加工的地方就相對較少。

3. 可由JavaScript呼叫Java語法
DWR(Direct Web Remoting)
網址: www.getahead.ltd.uk/dwr

DWR是設計給Java語言的Ajax框架,讓開發人員可以利用JavaScript程式呼叫Java語法。

DWR的運作可分為兩個部分,一方面用在瀏覽器上,處理連接伺服器端Java程式,另一部分則是用來展示回傳資料。透過DWR呼叫Java的函式,它會處理連接處理的細節,而當資料被處理完成後,DWR就會執行回呼函式,以進行後續呈現的處理。

在安裝DWR時必須編輯Web應用程式的部署描述檔案,而且也要編輯DWR特定檔案。DWR配置檔案指定了可以遠端建立和呼叫的類別。檔案中包含伺服器程式碼的JAR檔案,另外還有JavaScript檔案,提供一些輔助函式,處理互動呈現的效果。

DWR最大的好處就在於讓Java開發人員可以利用熟悉的語法來處理頁面與資料,並且能配合Struts、Tapestry來使用。不過從用戶端呼叫遠端伺服器的Java程式,仍存在一些安全上的疑慮,在使用時必須注意。

4. 以易用性、簡化語法為目標
jQuery
網址:jquery.com

jQuery是最近大受矚目的Ajax框架,它以Prototype為本,簡化並提升JavaScript語法的功能。

jQuery有點像是將Prototype所做的事再推向極端,讓使用者改變原有撰寫JavaScript的方法。它最為人稱道的地方,就在於強大的存取 頁面元素功能,無論是文件的節點、CSS的選取子或Xpath表達式,都能利用「$( )」函式快速存取,並賦予它更多的功能。

此外,它的chainable方法能將一串處理函式結合在一起,讓程式碼更為簡潔。另外jQuery也提供一些動態效果,不過和其他框架相比,這部分就顯得陽春許多。

jQuery的優劣其實都在同一件事情上,一方面它簡化JavaScript的語法,讓撰寫程式更為簡便,就好用的目的而言,的確是相當成功。然而這卻讓JavaScript的程式碼會發展成另一種樣子,對於初學者而言,一開始學習時,必須要花點時間去適應。

5. 依功能需求,下載模組化工具
MooTools
網址:mootools.net

前身是以輕巧著稱的Moo.fx,與Prototype有著相似的概念和語法,但在物件導向上做得更為徹底,而且在動畫效果和互動行為上,提供更多的功能與應用,能讓使用者更快的寫出物件導向概念的JavaScript語法。

MooTools的下載檔依模組分為核心、類別、原生語法、網頁元素、瀏覽器視窗、動畫效果、拖曳、遠端傳輸與外掛程式,除了核心程式是必要下載之外,其他可依使用者需求,下載所需的JavaScript檔案,藉此減少檔案的體積。

雖然MooTools將JavaScirpt物件導向化的結果做得更徹底,有利於程式的擴展與維護,不過也挑戰原先熟悉JavaScript物件觀的人,需要較多的時間適應。

不過無論是網站本身呈現、程式語法展示,甚至是模組下載介面,MooTools都展現相當精緻的動態效果,參與網站的示範,很快就能實作。

6. 大大擴充JavaScript基本功能
Prototype
網址:prototype.conio.net
Prototype不像其他框架,有許多炫人耳目的動態效果,而是專注在改良JavaScript本身的功能,讓JavaScript更容易使用,也更具物件導向風格。

Prototype在簡化JavaScript方法上,提供許多方便的語法,最著名的如「$( )」函式,只要將DOM節點的ID傳入這個函式,就能取得這個節點物件,簡化了DOM的操作方法。而這個方式也幾乎成為其他開發框架延用的功能。其他如 「$F( )」函數能直接處理Web表單元件的值,「$A( )」函數能將列舉的字串轉換成陣列等,都是Prototype經典功能。

在非同步處理上,它也提供了Ajax.Request、Ajax.Updater等類別,讓開發人員在處理非同步運作時可以利用它提供的方法,讓溝通行為更為容易、正確。

雖然Prototype沒有太多花俏的功能,不過它簡化JavaScript的特性,仍讓許多Web開發人員衷情於它。

7. 平順、豐富的動畫效果
Rico
網址:openrico.org

Rico是基於Prototype之上的Ajax框架,在西班牙文中,「rico」即為「rich」的意思,這也說明Rico的目標是提供開發人員利用JavaScript達到豐富的網頁元件與應用。

Rico提供非同步的Ajax應用,可讓非同步回應繞送到一個或多個回呼以操作DOM或JavaScript物件。在動畫效果方面,支援如拖曳功能、縮放、過場、進度指標和黃褪技術等,可立即套用豐富的效果。

由於Rico志在讓JavaScript也能表現出Flash般的動畫效果,因此像是網頁元件的顏色、形狀或下拉效果的變化都相當平滑,也能讓DIV方塊做出圓角的效果,讓視覺表現更具Web 2.0風格。

Rico的LiveGrid功能同樣是為人所稱道之處。它能讓表單資料產生更多元的表現方式,突破表格的檢視行為。例如它可以讓使用者在觸動捲動軸時,動態下載資料,利用這種方式,可以分段下載,就無需採用分頁檢視的手法。

8. RoR與CakePHP的指定框架
Script.aculo.us
網址:Script.aculo.us

Script.aculo.us是建立在Prototype之上的Ajax框架,是解決視覺效果與互動行為的輕巧框架,Ruby on Rails及PHP上的開發框架CakePHP等, 都是使用Script.aculo.us作為Ajax的解決方案。

在視覺效果上,Script.aculo.us利用改變透明度、大小、位置以及結合以上三種元素,產生更多種變化,例如淡進、淡出、閃動、提示等數十種視覺效果,可讓頁面效果更具變化,引導使用者與介面程式互動等。

在互動介面方面,提供了拖曳元件、就地編輯元件(In-Place Editor)、水平、垂直拉動捲軸、自動完成、元件排序、購物車等,這些預先打包成套的功能,解決了瀏覽器相容性的問題,也讓使用者很容易可以直接導入在現有的專案功能中,節省自行開發的時間。

此外,Script.aculo.us包含單元測試(Unit Test)框架,可以利用本身的test物件,用來驗證程式執行的狀態,並且支援模擬滑鼠與鍵盤的功能。

9. 有Yahoo!網站服務背書的框架
Yahoo! User Interface
網址: developer.yahoo.com/yui/

Yahoo! User Interface(YUI)是Yahoo!所提供的Ajax框架,提供便捷的開發方式與許多JavaScript函式庫,使用者可以利用它來開發互動式 的介面與Ajax效果。YUI可分為三大部分,包含工具、CSS和控制元件等函式庫,工具部分是核心物件,負責一些較底層的處理功能,CSS則提供像版面 規畫、字體工具。而控制元件則有自動完成、月曆、樹狀結構這些工具。

由於YUI實際應用在Yahoo!的網站中,因此實作的可靠性相當不錯,在YUI網站上也提供不少範例與文件,能協助使用者快速上手。雖然YUI 是由Yahoo!所推出,不過它遵循JavaScript的語法規則,並將樣式、內容與行為分離,開發人員如果要擴充功能,也相當容易。

一般Ajax框架都需要置放在網站的伺服器端,隨著頁面一起下載,YUI除了採取這種方式之外,也提供使用連結的方式,使用者只要在應用的頁面中將路徑指向YUI主機即可。

10. 適合Java開發環境的企業級解決方案
ZK
網址:www.zkoss.org

ZK是基於Ajax、XUL(XML User Interface Language)、Java網頁應用程式的開發框架,讓網頁的操作行為可以像是桌面應用程式一般。

不同於用戶端的Ajax解決方案,ZK由伺服器端出發,利用ZK處理Ajax互動的引擎,處理用戶端的頁面行為,也因此大為降低利用JavaScript作為動態開發語法時,常遇到的瀏覽器相容問題。

ZK提供超過70個XUL組件及80個XHTML組件,因此一些網頁或應用程式常見的功能,ZK都提供現成的工具可讓使用者立即應用,只需利用ZK以XML為基礎的使用介面設計語言,即可產生這些組件。應用的人則可在後端利用Java語言進行來處理程式邏輯與資料傳遞。

由於ZK利用Java語言開發,屬於以伺服器為中心的解決方案,因此必須安裝支援Java的應用程式伺服器(如Tomcat)才能執行。

10本Ajax必讀好書
 1. Ajax Design Patterns
 Michael Mahemoff /著
 歐萊禮出版
 售價:44.99美元

推薦1-案頭必備的工具書
《推薦人》葉秉哲,交通大學資訊工程系博士後研究員

身為四人幫《Design Patterns》的譯者,乍看到《Ajax Design Patterns》這樣的書,親切感自不待言,但也會格外挑剔:「這本書配得上『Design Patterns』之名嗎?抑或只是濫竽充數?」

實際使用幾個月之後,這本書已成為我案頭必備的工具書,也常常刺激我進一步思考Ajax技術的潛力與限制。

在這個Ajax技術仍在發展、編寫程式風格尚未大一統的過渡時刻,不能只是認識XMLHttpRequest、DOM及JSON等,或者會使用某些程式庫 並以此為滿足。對於各種真實應用情境的多種可能選項,乃至背後對效能、可用性、編寫程式風格的影響,更該有深入辯證、批判、取捨、再創造的能力。

畢竟檯面上看得到的程式庫、技巧及心得,恐怕仍未完全發揮 Ajax 應有的實力;我們的想像力,怎能被框住呢?好好咀嚼這本書,幫你開光點眼,以更恢宏的視野處理Ajax系統。

推薦2-專為 Ajax設計的百科全書
《推薦人》馮彥文,HappyWeb創辦人

《Ajax Design Patterns》是一本專為 Ajax設計的百科全書。書中詳列了作者在這幾年Ajax討論與經驗中整理出的相關樣式(Patterns),內容包含了所有與 Ajax相關的樣式、框架 (Framework)、工具、範例等,厚厚一本對入門者有點困難,卻是進階的Ajax程式設計師最好的良伴。

若你已經有Ajax相關經驗,順著書中所有樣式的索引讀一遍,絕對可以晉升百毒不侵的Ajax武林高手。書中的樣式都是以實際經驗與實作為主,與 一般大家熟知專門描述程式設計的設計樣式(Design Pattern)不同,但我覺得對於每日實戰的網站設計師,這才是最大的幫助。

使用Ajax的難處在如何與模擬器、規格、框架及安全漏洞周旋,然後找到最佳的解法。這本書舉出很多實際的例子與工具,可以減輕我們在實作Ajax功能的負擔。

 2. Ajax in Action中譯本《Ajax實戰手冊》
 Dave Crane、Eric Pascarello、Darren James/著,
 林信良/譯
 �峰出版
 售價:680元

推薦-引導讀者重新思考Web架構及開發模式的變革
《推薦人》王建興,FunP推推王及Diggirl等新興網站獨立技術顧問

Ajax真正的關鍵,還是必須聚焦在Web應用程式的開發,會因為Ajax產生何種典範轉移。《Ajax in Action》的價值,便在於它深入地探討Ajax開發時的架構問題,引導讀者重新思考--不論是重新詮釋過的MVC,或是扮演角色已大有不同的伺服器或 瀏覽器。因應架構的變革,許多不同的模式也因應而生,了解架構、認識模式之後,操控起Framework自然更能得心應手。

從架構及模式切入Ajax固然是本書的關鍵特色,針對大家所關心的使用者體驗、安全性及效能議題,書中觀點尤其值得開發人員思考。而本書不單只是一本做為提供架構理論基礎的Ajax書籍,對於實務亦多有著墨。本書提供了廣泛的一系列實例及講解,更增強了實戰性。

 3. Ajax與Google Map API入門實作
 高橋 登史朗/著
 柯志杰、博碩文化/譯
 博碩出版
 售價:450元

推薦-一本可以讓你「無痛學習」的Ajax入門書
《推薦人》邱繼弘,FunP推推王創辦人

對於資訊專業人士而言,凡事總要探索得相當仔細,對很多細節非常在意。學習新的東西往往需要完整的瞭解,於是很多書籍會形成初學者的進入障礙。這 本書的風格以初學者的角度出發,以一個個簡單的例子,帶領讀者進入 Ajax與Google Map的世界。作者很有技巧地引用Google Map為範例,讓不熟悉Ajax的讀者也能很快地在網頁中加入一些有趣的應用。

本書相當適合對Google Map API有興趣的開發者,特別是希望網頁中加入Google Map元件的讀者,可以降低進入門檻,依書上範例邊做邊學。除此之外,書中並輔以系統化的範例,加強讀者對Javascript、DOM、DHTML及 JSON的初步瞭解,是一本可以做到「無痛學習」的入門書。

 4. Professional Ajax
 Nicholas C. Zakas、Jeremy McPeak、
  Joe Fawcett/著
 Wrox出版
 售價:39.99美元

一本自學Ajax技術的書,內容包括Ajax技術、剖析Frames、JavaScript、Cookies、XML及XMLHTTPRequest、設計模式及使用案例。

 5. JavaScript: The Definitive Guide
 David Flanagan/著
 歐萊禮出版
 售價:49.99美元

這是一本JavaScript的完整的開發指南和參考手冊,幫助Web開發者很快找到需要的資訊,學習如何建立動態網頁。

 6. Ajax Bible
 Steve, Ph.D. Holzner/著
 Wiley出版
 售價:39.99美元

本書包含易學易懂的教學指南、數百個Ajax實用技巧與訣竅,及Ajax相關的技術知識,幫助讀者快速上手。這是一本專為初學者設計的書,可幫助讀者快速建置與桌面應用程式一樣具高互動性的Web應用程式。

 7. Bulletproof Ajax
 Jeremy Keith /著
 New Riders Press出版
 售價:34.99美元

本書逐步帶領讀者了解以Ajax強化Web應用的最佳實作,學會不仰賴其他Framework,使用CSS、HTML建置Ajax基礎環境,開發Ajax程式。此外,作者明確提醒在採用JavaScript之後,必須在整個開發過程中考慮「可存取性」問題。

 8. Head Rush Ajax
 Brett McLaughlin/著
 歐萊禮出版

 售價:39.99美元
 中譯本《Ajax快速上手》
 歐萊禮出版
 蔡學鏞/譯
 售價:780元

本書具有視覺化豐富的格式,可以幫助讀者快速學會撰寫JavaScript程式,對Web伺服器發出非同步請求。

 9. Ajax Hacks
 Bruce Perry /著
 O'Reilly出版

 售價:29.99美元
 中譯本《Ajax Hacks駭客八十招》
 歐萊禮出版
 楊仁和╱譯
 售價:580元

本書探索Google Maps、Yahoo! Maps與 GeoURL的API並整合運用,及說明如何使用cookie,和操控瀏覽器紀錄與後退鍵等。

 10. JavaScript 與 Ajax 網頁製作徹底研究
 陳會安/著
 旗標出

 售價:590元

本書從最基礎的JavaScript語法開始,詳細說明DHTML技術,及JavaScirpt+DHTML DOM+W3C DOM 建立動態網頁的背後原理。

--
萬歲!您的郵件已被捨棄。一封垃圾郵件也沒有!


--
萬歲!您的郵件已被捨棄。一封垃圾郵件也沒有!

沒有留言: