編輯註：本文講述了在WebLogic Portal 8.1中進行底層Ajax編程的細節。這與當前的WebLogic Portal 9.2 beta版無關。
摘要Ajax是一種非同步編程範型，藉助於它，開發人員可以建立高度互動Web網站，從而在提高使用者效率的同時減輕伺服器的負載。Ajax結合了Web services、JavaScript和動態HTML編程技術，可以創造豐富的用戶端體驗，並提高本地應用程式的可用性。本系列文章的第一篇介紹了這些相關概念以及在BEA WebLogic Portal中實現一個Ajax解決方案所涉及的架構考慮事項。
本文是此系列文章的最後一篇，提供了一組複雜的樣本portlet，從一些基本的尋找portlet開始，再到一個使用動態表作為前端資料庫表的進階例子，最後以一個有趣的例子結尾，最後這個例子在沒有使用<object>或<iframe>標籤的情況下把一些頁面動態嵌入到另一個頁面中。
所有例子均給出了完整的原始碼，並包括安裝指令碼和文檔。
關於樣本Portlet本文在這裡給出了各種支援Ajax的portlet，並逐行對其原始碼（在本文的下載部分中可以找到）進行瞭解釋。本文還包括了一個可重用Java servlet的原始碼，這個servlet可用於降低Mozilla Firefox和Microsoft Internet Explorer (IE)中固有的安全限制層級。這個servlet實現了第1部分中描述的代理設計模式。
有一點需要指出，我在代碼中使用了最簡單的Ajax庫，因為我想說明整個過程到底是怎麼回事。還有大量可用的庫可以極大地減少需要編寫的代碼量。我在一些代碼中使用了Sarissa庫，主要用於處理一些跨瀏覽器的問題。參見Ajax簡介，可以瞭解有關Ajax庫的更多資訊，比如DWR。當設計和構建自己的生產應用程式時，我不建議您使用這裡給出的底層構件。本文中使用的Ajax庫可以很好地處理跨瀏覽器的問題和Ajax綁定(wiring)。
本文的餘下部分逐個描述了每個樣本portlet。我們鼓勵您瀏覽原始碼，從而更深入地瞭解這些portlet是如何?的。
Zip Code LookupZip Code Lookup（區號尋找）portlet說明了兩個可用於調用遠程Web服務（例如，一個與Web伺服器位於不同電腦上的Web服務）的方法。這兩個方法（direct和proxy）是通過使用兩個直接命名的按鈕Direct和Proxy來調用的。Direct方法直接從Web瀏覽器調用Web服務，這通常會導致違反Internet Explorer中的安全規則，而在Firefox中則根本無法使用。Proxy方法使用了本文稍後將會描述的Java代理servlet。
圖 1:調用遠程Web服務的Zip Code Lookup portlet
注意Zip Code標籤旁邊的輸入欄。我們在這一欄中獲得輸入值，然後把它傳遞給後端的Web服務。當我們從該Web服務獲得城市和州的資訊時，就會把這些資訊放在City和State標籤右邊的相應位置上。
為了能夠引用JavaScript代碼中的元素，我們需要為每個元素指定一個惟一的ID。下面給出了zipcode.jsp的相關HTML代碼：
<body style="font-family:helvetica;font-size:10pt;">
<p>Type in a 5-digit zip code to get information on that zip code.</p>
<form name="zipcode" method="post" action="">
<table cellspacing="0" cellpadding="4" frame="box" bordercolor="#dcdcdc" rules="none" style="border-collapse: collapse;">
<tr>
<td>Zip Code</td>
<td><input type="text" size="5" name="zipcode_USZip" id="zipcode_USZip"></td>
<td><input type="button" onclick="zipcode_updateDirect();" value="Direct"/></td>
<td><input type="button" onclick="zipcode_updateProxy();" value="Proxy"/></td>
</tr>
</table>
</form>
<hr color="blue"/>
<table>
<tr>
<td>City</td>
<td><div id="zipcode_city" style="color:blue;"></div></td>
</tr>
<tr>
<td>State</td>
<td><div id="zipcode_state" style="color:blue;"></div></td>
</tr>
<tr>
<td colspan="2">
<form>
<button onclick="zipcode_showResults();">Returned XML <span id="zipcode_status" style="color:blue;"></span>
</button>
</form>
</td>
</tr>
</table>
</body>
注意，所有ID標籤都使用了portlet名稱作為首碼。這是一個相當好的最佳實務，您必須將其深植到您的編碼風格中。為什麼這很重要呢？因為當BEA WebLogic Portal呈現一個門戶頁面時，它會把所有的portet HTML拷貝和粘貼到一個彙總頁面上。所以，如果您有兩個portlet，而每個portlet都有一個ID為“mylabel”的元素，那麼呈現出來的門戶頁面中將會有兩個元素具有相同的惟一ID。當使用JavaScript/DOM函數getElementById('mylabel')時，返回的元素將會是文檔中“mylabel” ID的第一個執行個體，而這很可能不是您所期望的結果！
還要注意使用<div>標籤作為動態內容的預留位置。這是一個樣式選擇問題，但是我發現，<div>標籤具有成為任何內容的容器的巨大潛力，而<td>標籤的限制就要嚴格得多。更多地使用CSS絕對有助於減少使用嵌入的樣式標籤，但這將會是留給讀者的一道練習題。但是，我要指出的是，明智地使用CSS樣式可以極大地減少最終要編寫的JavaScript數量。記住，CSS可以用於改變一個元素的顏色、位置、可見度、透明度以及其他許多可視化特性。簡單的樣式交換通常可以讓圖形化使用者介面變得更加具有互動性。在Employee Listing portlet中，當變化被提交給資料庫之後，我使用了這項技術來通知使用者。
在這個portlet中，我們將從文本欄中獲得輸入，調用一個Web服務尋找與區號相關的城市和州資訊，然後使用該Web服務返回的資訊動態更新City 和State <div>元素。頁面不會重新整理——只有City和State元素會更新。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
