ADJ網路實驗室 - Powered by Discuz! Board

標題: [教學] AJAX：網頁互動新典範 [打印本頁]

作者: adj 時間: 2007-11-6 14:04 標題: AJAX：網頁互動新典範

原文取自 iThome: http://www.ithome.com.tw/itadm/article.php?c=33052

AJAX結合JavaScript與XML兩種主要的業界標準，讓瀏覽器呈現頁面與伺服器處理回應時，可以不同步運作，減少瀏覽網頁等待的時間，為使用者帶來全新的網路衝浪體驗。

AJAX的出現讓企業重新省視網頁應用（Web Application）設計的兩個重要觀點：開發的方式與互動的模式。在資訊技術快速推陳出新的時代，許多網站設計人員莫不熱情擁抱，深怕落後在潮流以外，AJAX的出現對他們而言卻如同當頭棒喝，它讓網站開發者瞭解到設計網頁並不一定非得採用最新的資訊技術不可，原來使用舊技術也可以開發高互動性的網站。此外，網頁的互動過程，應決定在使用者而不是設計師。

當人們質疑堆砌舊技術所能達成的效果時，Google Maps卻適時地伴演著指標性的範例，結合AJAX互動引擎與簡潔的網頁介面，將虛擬與現實整合等加值應用，讓使用者愛不釋手。只是，對企業而言，Google在AJAX應用的典範上，會不會是一個特例？這一點，仍有待觀望，但它的確為企業在設計網站時，指引新的方向。雖然很少有企業網站會像Google Maps一樣，僅專注在單一商業用途上，但如果AJAX能夠結合JavaEE的應用，重新架構企業網站運作方式，讓企業與使用者間的互動，因網站的改善而更緊密，更重要的是，它是免費的。

儘管如此，當企業採用AJAX這種同屬於RIA技術，開發其商業網站時，雖然它提供一個免費的管道，但必須注意的是，AJAX的應用要適得其所。

AJAX仍存在舊技術的瓶頸
AJAX是新的名詞，但不是全新的技術。這個名稱，原來是「Asynchronous JavaScript and XML」的縮寫，首次出現在Adaptive Path顧問公司的Jesse James Garrett在2005年2月18日，於網路上發表「A New Approach to Web Application」中。這位顧問提出一個新的觀點，認為採用JavaScript與XML等已存在的技術，即可解決網頁設計時，靜態與動態呈現方式難以抉擇的問題，而不是一味地追逐新的資訊技術，並且使得Web Application的操作能像桌上型電腦中的應用程式般，達到RIA（Rich Internet Application）的同樣目的。

傳統網站的設計一直在靜態與動態間游移不定，前者在於執行的效率，後者在於互動的體驗，但很少有兼顧兩者優點的設計管道。雖然Macromedia提出Flash技術，以呈現RIA的強大，但企業也在尋找另一個管道，同時達成靜態與動態的目的。

AJAX雖然採用JavaScript與XML等業界的公開標準，這些技術也已很成熟，但用於開發網站，仍有以下待解決的技術瓶頸：

瀏覽器必需啟用JavaScript：有些使用者會關閉JavaScript功能，因為許多網頁的彈出式廣告，便是以JavaScript所撰寫的，間接影響到AJAX的運作。

瀏覽器必須支援XMLHttpRequest物件：由於AJAX引擎與伺服器間的交談都是經由XML格式，所以瀏覽器必須支援此物件。目前主流瀏覽器都已支援此標準，但Opera尚未完全支援，等更新版本才納入此標準。

使用侷限性：因為AJAX引擎代理瀏覽器與伺服器的交談，雖然使用者不需要按下傳送按鈕，但也因此，無法回到上一頁的畫面，所以在AJAX所撰寫的網頁中，常看不到「前一步（Last）」與「下一步（Next）」等按鈕，這個問題主要是因為JavaScript所造成的，也就是常令人詬病的缺點。接下來，使用者常在這類網站中因為缺少進一步的指引。雖然傳統網頁回傳結果時，會刷新網頁或換頁，但使用者也因此可以判斷處理的過程。可是在AJAX中，卻無法知道目前的狀況是處理前，還是已處理完成，AJAX引擎打斷了一般瀏覽網頁的習慣，也就是稱為「breaking the back botton」的問題。同樣的影響下，我們很難將同一個網頁內容透過URL與朋友分享，即使將JavaScript處理完成後的網頁URL傳給其它人，他們只是看到未處理前的畫面，例如表格欄位仍是空白的狀態。此外，因為AJAX無法記錄狀態，所以使用者也無法經由瀏覽記錄中回到之前的頁面了。

安全性：AJAX引擎因為嵌在用戶端的執行程式中，所以任何使用者可以輕易看到所有程式碼（如IE中「檢視」→「原始碼」或Firefox中「檢視」→「此頁原始內容」）。此外，在AJAX所採用的技術中，並沒有任何一項可以保證資料交換過程的安全性。

雖然AJAX能讓網頁設計者少了傳送按鈕的設計與動作，不過，有些網頁中的傳送按鈕是必要的，主要用來提醒使用者在傳送敏感性資料時，再一次提醒使用者確認此動作，但AJAX中，使用者既無法確認，資料送出後，無論對或錯，都無法反悔。

效能：這個問題根源於JavaScript本身，但因為AJAX包含此技術，所以同樣的問題仍存在。JavaScript本身並非完全的物件導向，而且缺少效能驗證與除錯工具。此外，當網頁中必需包括大量的JavaScript程式碼，因為這些程式都在用戶端執行，所以使用者的電腦處理效能必須足以應付，即使處理器速度夠快，大量的JavaScript程式碼仍足以拖慢瀏覽器的執行速率，這也是JavaScript發展這麼久以來，一直未形成主流應用的原因。

程式開發：因為AJAX所包含的技術都在嵌入同一個程式中，所以開發者很難重複使用程式，但在主流的物件導向中，重複運用程式碼有助於縮短開發時程及加速執行效能，AJAX在這方面顯然力不從心。另外，因為AJAX讓Web Application開發者不僅要懂HTML與JavaScript，也必需懂DOM、CSS、XML等，後續維護上也很困難，因為管理者必需要知道問題發生在那個技術環節上。JavaScript另一個令開發者頭疼的原因是，它既非一般正規的程式語言（如C++或Java），也不是正統的標註語言（如HTML），但嵌入在網頁中後，破壞了整個程式架構與程式的簡潔，讓後續維護變得困難重重。

整合應用程式：AJAX將所有技術混雜，以致於難以整合其它應用，例如串流影音檔案的撥放等。

跨平臺的處理：雖然AJAX所採用的均是開放的標準，但網頁開發者還是必須撰寫程式，主動偵測用戶端的瀏覽器是否支援AJAX所包括的所有技術，如果使用者的瀏覽器不支援，程式中應加上指示，告知使用者如何處理這類網頁，就像網頁處理Flash一樣，提醒使用者下載外掛程式，或選擇跳過Flash撥放的影片。

離線瀏覽行動式周邊：雖然AJAX可以讓Web Application如同操作應用程式一樣便利，但它必須與伺服器互動，以致於離線瀏覽便無法處理頁面資料。如果企業中的Web Application也包括行動式設備的執行環境，例如PDA或Smart Phone，由於這些設備並不完全支援AJAX所包含的各種技術，例如JavaScript或DOM，以致於無法運作。

AJAX企業應用模型：結合JavaEE
AJAX既然能提供使用者減少等待的時間，對許多企業網站而言，只要適當地應用，便能改善原本網站的處理方式，例如：結合JavaEE（Sun將Java Enterprise Edition重新命名為JavaEE，不再使用J2EE）。我們以企業網站常處理的資料庫數據模型為例，說明AJAX如何結合JavaEE。這樣的結合，可以讓許多企業網站的商業邏輯資料在處理的過程中，不致於讓使用者長久地等候，讓使用者在網頁中瀏覽資料庫數據時，如同在企業內部網路中使用般的快速與便利。

依商業邏輯決定AJAX應用
目前，到底哪一種Web Application適合使用AJAX，並沒有定論，但從Google Maps受重視的程度來分析，可以得知單一用途，而且需要大量數據交換的網站形式最適合。不過，主要還是得依企業本身需求而定，也並非整個網頁都必須以AJAX撰寫不可。

AJAX主要能讓開發者更彈性地處理資料交換的過程，而不是侷限在靜態與動態中。如果企業期望能讓Web Application像RIA一般，也不一定非在AJAX與Flash兩者間擇一不可，我們可以在網路中找到同時使用兩種技術的案例，從中發現到其互補的特點。但就像Flash一樣，雖然RIA可以帶給使用者不同的體驗，但也同時改變他們瀏覽網頁的習慣，企業必須在漸進的過程中讓使用者學會並接受。

歡迎光臨 ADJ網路實驗室 (http://dz.adj.idv.tw/)