在BEA WEBLOGIC PORTAL中進行AJAX編程 第1部分

摘要

門戶應用程式非常適用於從多個源提取資訊以及為包含門戶Web應用程式的portlet提供應用服務。對於使用者，portlet應用程式是獨立的實體，類似於案頭上的視窗應用程式。如果在一個視窗應用程式中執行一項操作會導致其他所有應用程式中的內容被重新整理，那又會怎麼樣呢？這就是當前大多數門戶的情況。在一個portlet中通過頁面流進行轉移會導致整個Web頁面被重新整理，包括該頁面上的其他所有portlet。

為了避免出現這種有時不希望有的行為，Web開發人員採用了所謂Ajax-風格的編程方法。Ajax即非同步Java和XML（Asynchronous Java and XML），它是一個技術的集合，包括用於建立互動式Web應用程式的XHTML、CSS、JavaScript、DOM和XmlHttpRequest對象。本文將說明在BEA WebLogic Portal環境中使用Ajax編程方法的基本原理，並提供了一些最佳實務和建議，以避免新手Ajax程式員經常會犯的許多錯誤。

Ajax簡介

考慮一個基於一些使用者標準（比如街道地址、城市和州，）來繪製街道地圖的Web應用程式。這類應用程式在使用者介面中已經存在很多年了，並且很少有所改變。使用者輸入一個地址，然後單擊一個按鈕，頁面中心就會顯示周邊地區的地圖。使用者通常需要縮小和放大以更清楚地顯示周圍地區，或者需要把地圖向左或向右稍作移動，以找到一些能夠協助他們進行定位的主要街道或地界標。訪問maps.yahoo.com或mapquest.com，便可以獲得這種體驗。來吧，試試這個地址：100 East Wacker Drive Chicago, IL

最終，您將看到一幅芝加哥市區的地圖，中心是Wacker和Michigan大街。在右方，您將看到一系列縮放層級，您可以從中選擇一個。當選定一個縮放層級之後，會出現什麼情況呢？整個頁面將會重新整理，這會花費相當長一段時間。現在，當您把地圖向左或向右移動時，又會出現什麼情況呢？您不可避免地會重新整理整個頁面，而整個地圖需要再次下載。頁面大小通常是75到100k，而平均的返回時間大約是3到10秒鐘，這取決於您的網路連接速度。

現在使用Google Maps進行同樣的嘗試，這是一個完全使用Ajax技術的網站。輸入地址，然後單擊Search。頁面將完全顯示出來。現在進行縮放。注意，地圖之外的頁面內容不會重新整理。下面列出了這背後所發生的事情：

使用者單擊縮放控制項。 縮放控制項調用一個JavaScript方法。 JavaScript方法調用伺服器來請求新的地圖資訊。 伺服器建立新的映像，然後將其發回給瀏覽器。 瀏覽器使用新的映像資料替換現有的映像資料。 使用者在舊映像的位置看到新映像。

注意，地圖上沒有指示東西南北的箭頭。使用者如何與地圖進行互動呢？只需像在一個滾動視窗中那樣進行拖拉即可。試著單擊地圖的中心，然後把地圖向左方拖動。注意拖動地圖時地圖是如何響應的！下面列出這背後所發生的事情：

使用者把地圖向左方拖動。 Web頁面使用它所下載的映像資訊，而使用者等待著頁面根據用戶端已經存在的資料重新繪製地圖。 如果預先沒有檢索到映像資料，瀏覽器將從伺服器獲得它所需要的附加資訊（新出現的地圖地區）。 新的資料被添加至現有資料，並在瀏覽器中重新繪製出來。 使用者看見地圖向右方滾動，就像是一幅真正的大圖那樣。

下面是使用Ajax技術所帶來的好處：

用戶端與伺服器之間傳輸的資料量大大減少。 可感知的系統回應時間大幅度縮短。 由於反饋及時，使用者感覺對應用程式的控制更加得心應手。 使用者喜歡這個網站，因為使用它可以提高他們的工作效率。 使用者將會再次訪問網站，這樣其競爭者的客戶就會減少。

上面對於Ajax風格的使用者介面的示範令人印象深刻。（如果在使用Google Maps數天之後，您還不相信其競爭者已經惱羞成怒，那麼您就不必閱讀本文下面的內容了。）

有關Ajax的完整介紹，請閱讀An Introduction to Ajax(中文版，dev2dev，2005年11月)。

Ajax所解決的門戶問題

考慮那些大量使用Java applet而且希望利用其現有資產建立門戶的潛在客戶。把現有applet和其他頁面流封裝到portlet容器中是一件很簡單的事情，但是也要考慮到進行門戶測試時會出現哪些問題。例如，某個porlet中的一個動作會導致重新整理以及隨後的重新載入，並重新初始化頁面上其他所有基於applet的portlet。如果所討論的applet具有後端串連，那麼portlet的重新初始化將導致伺服器丟棄現有串連，然後強制applet重新進行串連，這不僅加重了伺服器的負擔，而且會使門戶使用者看到幾秒鐘的“靜止時間”，在這段時間內，基於applet的portlet必須保持灰色，一直到它們完成初始化為止。

這顯然是一個潛在的瑕疵。告訴客戶們重寫所有的applet，因為基於JSP的應用程式並非有用的響應，尤其是對於已經在現有資產中投入大量資源的客戶來說。此外，門戶必須協助客戶封裝現有的應用程式，而不是強迫他們重寫整個系統。

我們需要一種讓單個portlet在不引起頁面重新整理的情況下進行操作或獲得新資料的方法。雖然這顯然存在一些不利之處（我將在本文後面討論這些），但是在這種情況下，把避免頁面重新整理作為使用門戶的進入屏障是完全有必要的。

註：對於這個問題，一個可行的解決方案是iframes，也就是inline frames，一種基於瀏覽器的機制，它可以使螢幕的一塊地區變為獨立的實體，當頁面重新載入時它不會重新整理。使用類似於Ajax編程中所使用的技術，我們可以使用XML-RPC進行伺服器調用，從而擷取資料並將其載入到DOM文檔中。Apple的開發人員Web網站上有一篇文章非常好地總結了這種方法的優點和缺點。我確信，關於為什麼iframes更好或Ajax更好，雙方的支援者已經進行過精彩的辯論，但是Ajax已經流行開來，而iframes則沒有。因此，本文只介紹了Ajax，而沒有就iframes進行討論。