為WebSphere Portal構建Ajax Portlet

簡介：在我們的前一篇文章結合使用 Ajax 和 WebSphere Portal 中，我們討論了在門戶應用程式中 使用 Ajax 時的一些問題和設計關注事項。在本教程中，我們將把新發現的知識投入使用，並建立一個 Ajax Portlet 應用程式。為了增加趣味，我們決定構建一個大量使用 Ajax 和 DHTML 的 Portlet。這 可以使您初步瞭解該技術的功能，同時還為您提供一個用於瀏覽資料庫的有用工具。雖然該應用程式的 大部分都是已經編寫好的，但是您將負責填補未編寫好的部分以使其正常運行。

開始之前

在本教程中，您將為特定於 Ajax 的調用編寫代碼，檢查操作頁面的 DHTML 的代碼，並完成從瀏覽 器到伺服器的完整往返 Ajax 調用的過程。整個應用程式套件組合括幾百行代碼，但是我們僅要求您編寫重要 組件的代碼，其餘代碼將由我們提供。相關步驟包括：

編寫用於建立 XMLHttpRequest (XHR) 和處理 XML 文檔對象的瀏覽器無關的代碼。

向伺服器發送 Ajax 請求並操作所返回的結果。

檢索並操作 Portlet 配置中的 Servlet 上下文，以便動態訪問 Portlet .war 檔案中包括的 Ajax Servlet。

使 JavaScript 事件能夠處理操作並顯示或更新 JSP 頁上的資料。

將該 Portlet 應用程式部署到 WebSphere® Portal 上並查看結果。

我們還將檢查用於操作此特定應用程式資料的代碼，包括如何：

在非同步 Ajax 調用期間啟用和禁用表單元素。

在通過 Ajax 調用檢索到新資料以後，使用 DHML 來更新選擇框。

使用 innerHTML 來替換網頁的部分，從而動態更新 HTML <div> 地區標記。

設定

本教程假設您將使用 Rational® Application Developer (RAD) 或其系列成員之一，但是您可 以使用自己喜歡的任何工具來編輯和部署該門戶應用程式。本練習中的所有內容都與特定的工具無關。 您還需要安裝 WebSphere Portal v5.x 或更高版本，以及一個可用的資料庫，當然，我們假設該資料庫 是 DB2®。

為了使所有這些部分協同工作，您需要將應用程式代碼匯入一個 RAD 門戶項目，並在 WebSphere 中 至少建立一個資料來源。以下步驟將協助您著手開始此任務。