論壇文章
AJAX─減少頁面重新整理次數 降低等待時間
下一篇 - 叡揚資訊在金融業的解決方案與服務能量

AJAX─減少頁面重新整理次數 降低等待時間

撰文 | 叡揚資訊

如果要提到近年來網路應用程式的發展，就不得不提到RIA（Rich Internet Application），它被《Business 2.0》雜誌評選為2005年七大發燒潛力技術之一，其核心精神在於讓使用者在操作網路應用程式時，能享受與操作桌面應用程式一樣的便利感，降低兩者間的差異，其中最顯著的作法是減少頁面重新整理的次數，進而降低使用者無謂的等待時間。目前有兩大陣營朝以上目標邁進，分別為Flash-based和JavaScript-based的技術，因屬於JavaScript-based陣營的AJAX隨著軟體大廠Google的大量採用，同時做出令人眼睛為之一亮的網路應用程式，例如：Gmail、Google Map等，AJAX因而成為近來被廣泛討論的技術，故本文將帶領您一窺AJAX的奧秘。

AJAX是「Asynchronous JavaScript and XML，非同步JavaScript及XML技術」的簡寫，本身並不算是嶄新的技術，充其量只能算是幾個已經問世多年的技術合作下產物，AJAX為著名UI顧問公司Adaptive Path於2005年二月所提出，它包括了以下幾種技術：

  • XHTML和CSS：負責合於標準的呈現（presentation）。
  • DOM（Document Object Model）：負責動態表現（display）與互動。
  • XML和XSLT：負責資料交換與處理。
  • XMLHttpRequest：負責非同步的資料回取。
  • JavaScript：負責將以上所有的部份結合在一起。

傳統網路應用程式運作流程是由使用者利用瀏覽器提出需求給Web Server，Web Server再依據使用者所提出的需求進行資料庫存取、後端運算等動作，Web Server最後再將運算結果以HTML和CSS的格式回傳給使用者。在這一連串的運作流程中，使用者經常耗費無謂的時間浪費在等待運算結果的回傳上，若遇資料量龐大或網路頻寬不夠充裕的情況，相對的，使用者等待的時間也將隨之拉長；此外，使用者在送出需求後，瀏覽器頁面會出現整頁重新載入的情形，畫面往往是呈現空白或靜止不動的狀態，這對使用者而言易產生某種不安感或不確定感，使用者可能會因而懷疑需求是否已『真的』傳送出去？！有的使用者甚至會再多按幾下按鈕或連結以求安心，然而，這樣的動作反而易造成網路與伺服器不必要的負擔。
針對以上問題，AJAX有不同的作法，AJAX利用AJAX engine來縮短使用者等待的時間，AJAX engine在與伺服器連線之初就已被瀏覽器所載入，engine通常是以JavaScript 撰寫並且藏在隱藏的框架（hidden frame）內，engine負責提供介面的呈現，並與伺服器進行非同步的溝通，意即使用者不需等待伺服器的回應仍可進行介面的操作，畫面將不再是一片空白。而AJAX engine在使用者提出需求後，隨即在幕後與伺服器進行溝通，這也使得網路應用程式能更貼近並提高桌面軟體的友善度。
正因為AJAX有別於傳統網路應用程式的運作方式，因此，不但帶來了一些值得考量的新議題，同一時間對於AJAX優缺點的爭論也逐漸在網路上引發熱烈討論，以下試列舉幾個AJAX的基本應用：

載入新資料時，無需重新載入整頁

這是AJAX的一大特色，以Google Map為例，它只會更新需要更新的部分，使用者放大或縮小地圖時，整個網頁只有地圖的部份會改變，網頁上的其他元件都不會有所變更，網頁也不會整頁更新。

資料檢核

過去資料檢核分成在用戶端或伺服器端進行檢核，用戶端的檢核必須借助JavaScript的輔助，伺服器端檢核則要忍受網頁更新的不便。相對而言，AJAX則提供了不需要網頁更新，即可進行伺服器端資料檢核的功能，提高資料檢核的便利性與速度。

輸入輔助

使用者輸入資料時，畫面會即時地提供『提示』的協助，以Google Suggest為例，當使用者輸入“apple”，此時網頁會出現數個建議使用者選擇apple ipod、apple pie等的提示，每個建議後面還會顯示所搜尋到的筆數供使用者參考，而這些『提示』並非是使用者於事前載入的資料，而是AJAX engine根據使用者提出的需求在幕後完成的。

　　儘管，AJAX擁有許多過人之處，但在採用AJAX之前必須考慮以下幾項問題：

Client端程式開發需求高

AJAX 所使用技術以Client端為主（JavaScript，HTML，CSS，XML），對於原本就以Server端為主的網路應用程式而言，必須進行一定程度的修改。

原始碼的保護

由於程式必須下載到Client端後才能開始執行，因此，原始碼易有遭外人或駭客取得的風險。

Client端瀏覽器對JavaScript的支援

如果使用者將JavaScript功能關閉，則AJAX將無法發揮效用。

網路上仍有許多關於AJAX有趣的Demo提供有興趣的讀者參考，相信讀者能從中獲得更多的樂趣與靈感：
Google Suggest
http://www.google.com/webhp?complete=1
Google Map
http://maps.google.com/
Rico的Weather Widget
http://openrico.org/rico/demos.page?demo=ricoWeather.html
Upload progress bar
http://sean.treadway.info/demo/upload
參考資料：
Jesse James Garrett.（2005）. Ajax: A New Approach to Web Applications. http://www.adaptivepath.com/publications/essays/archives/000385.php