websphereportal:为 WebSphere Portal 构建 Ajax 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 中至少创建个数据源以下步骤将帮助您着手开始此任务

　　配置项目并导入文件

　　在 RAD 中创建个 JSR 168 Portlet 项目

　　启动 RAD

　　选择 File > New > Other然后定位并选择 Portal > Portlet Project (JSR 168)注意:如果您没有看到 Portal 部分请选中 Show All Wizards

　　图 1. JSR 168 Portlet 项目



　　单击 Next

　　输入如下所示信息

　　Name:Ajax_and_Portal

　　Project location:接受缺省值

　　WebSphere Portal version:选择您 WebSphere Portal 版本

　　Create a portlet:取消选中此复选框

　　图 2. 新 Portlet 项目定义



　　单击 Finished

　　将所提供源文件导入新项目

　　右键单击最顶层“Ajax_and_Portal”项目

　　选择 Import...> Import ...

　　选择 Zip file

　　单击 Next

　　图 3. 从 zip 文件导入



　　在 zip 文件导入页上执行以下操作:

　　From Zip file:定位并选择您随本教程起下载 zip 文件

　　Into folder:确保选择 Ajax_and_Portal 项目

　　Overwrite existing resources without warning:选中此复选框

　　图 4. Select zip file to import 屏幕



　　单击 Finished

　　您项目结构现在应和图 5 所示类似

　　图 5. 导入项目结构



　　部署和测试

　　要做第件事情是以其当前状态部署该应用有关使用 RAD 将 Portlet 应用部署到门户中介绍说明请参考附录 B在部署该 Portlet 并将其放到某个页面上以后我们希望查看下它

　　图 6. 应用网页



　　尝试查找个数据源什么也没有发生！不是非常激动人心是吧？到本练习结束时基于对服务器 Ajax 和用于更新 HTML 标记 JavaScript 代码该页面上所有这些项将执行操作或显示新数据

　　请注意Context Path 在该 Portlet 顶部很快您将需要上下文路径来直接从浏览器中该 Servlet在上面举例代码中上下文路径为: /wps/PA_dsllabu.

　　它真是个 Portlet绝不是开玩笑

　　是它是个 Portlet并且它完全符合 Java® Portlet (JSR168) 规范标准然而Ajax 本身是项独立技术本练习将演示此项技术并且它碰巧使用个 Portlet 来显示数据这非常重要我们还包括了个 Servlet它检索 Portlet WAR 文件中应用数据WebSphere Portal 将把该 Portlet 以及 Servlet 作为 Web 应用部署到 IBM WebSphere Portal 中这为该 Portlet 提供了动态访问其应用所附带 Servlet 能力不必在另个 J2EE 应用中单独部署它

　　让我们首先看下 Portlet 代码

　　定位到页面左侧 Project Explorer展开 Ajax_and_Portal 项目并直展开到 DBExplorerPortlet.java 文件通过图 7 来确定该文件位置和树结构

　　图 7. DBExplorerPortlet.java 位置



　　双击该文件以在编辑器视图中打开它仔细浏览该代码并注意它除了显示该 Portlet JSP 页以外其他什么也不做下面显示了 doView 思路方法作为您应该看到内容举例public void doView(RenderRequest request, RenderResponse response)
throws PortletException, IOException {　　
// ------------------------------------------------------------
// Note: The portlet is just diplaying a JSP for the AJAX Lab.
// It does absolutely nothing .
// ------------------------------------------------------------
// Set the MIME type for the render response
response.ContentType(request.getResponseContentType);
// Invoke the JSP to render
PortletRequestDispatcher rd =
getPortletContext.getRequestDispatcher(JSP_FOLDER + VIEW_JSP);
rd.(request,response);
}

　　Ajax 技术通过 JavaScript 和 DHTML 来使用其功能这个特定举例并不需要任何预先确定 JSP 数据；因此该 Portlet 本身除了显示该 JSP 外其他什么也不做

　　我告诉过你们它是个普通 Servlet

　　创建 Servlet 是非常简单事情您已经做过几百次了只需实现您服务思路方法 (doGet/doPost) 和所需任何业务逻辑在通常情况下您会希望向方返回个 XML 文档但是您可以向客户端返回任何文本信息让我们看下所提供 Servlet 代码以了解用于 Ajax 数据来自何处

　　在 Project Explorer 下面将树形结构展开到该 Servlet 代码该文件名为 com.ibm.examples.Ajax.servlets > DBExplorerServlet.java双击该 Java 文件以在编辑器中打开它

　　注意该 Servlet doPost 思路方法及其完成任务此特别代码并不特定于 Ajax但它是使用 XMLHttpRequest 对象发送参数来获得个 Servlet 以响应请求思路方法的本练习稍后将对 XMLHttpRequest 对象进行解释

　　如果您希望更好了解它所做工作可以随便浏览该代码

　　向该 Servlet 请求每组参数都导致它使用唯 XML 结果来作出响应然后浏览器端 JavaScript 分析响应数据并根据需要呈现该数据例如如果向该 Servlet 发送参数“LIST=SCHEMAS”则它将以 XML 格式返回数据库模式列表让我们试验下只是为了证明该 Servlet 代码并没有什么特别的处

　　在您浏览器窗口中输入以下 URL图 8 显示了个举例http://localhost:9081/wps/PA_dsllabu/DBExplorerServlet?DS=jdbc/sample&LIST=SCHEMAS

　　图 8. 直接 Servlet 结果



　　注意: 您需要调整实际 URL 以匹配您部署我们举例 URL /wps/PA_dsllabu 部分是您在第次部署 Portlet 应用时由门户定义若要查看您门户上下文请查看我们前面部署 Ajax Portlet 顶部

　　该 Servlet 是个非常简单 J2EE Servlet您可以通过浏览器访问它就像访问任何通常通过 WebSphere Application Server 界面来部署其他 Servlet 样WebSphere Portal 使用各自唯 URI 来部署 WAR 文件以便 Portlet 和其他 Web 组件都能访问该特定应用文件例如图像、JavaScript、级联样式表和我们举例中 Servlet由于该 Servlet 部署方式和任何其他 Web 应用样因此它在部署时还具有和 Portlet 应用相同 Web 上下文

　　在将 Servlet 和 Portlet 应用捆绑在起时唯真正诀窍是将它注册到 web.xml 文件中此任务和在通常 Web 应用中完全样

　　下面是取自我们练习中 web.xml 文件片段需要重点注意项是 Servlet-mapping > url-pattern在本例中它是 /DBExplorerServlet当我们定义 JavaScript 变量(Ajax 将通过该变量和 Servlet 进行通信)时将会使用到此值继续查看我们项目部署描述符图 9 显示了个举例

　　图 9. 具有捆绑 Servlet 定义 Portlet web.xml 文件



　　定义用于和该 Servlet 通信 JavaScript 变量

　　为了使应用知道如何动态我们 Servlet(在部署它的前您不知道 URI 上下文)您需要编写些代码来动态定义该 Servlet URL

　　在 Project Explorer 中打开以下文件:Ajax_and_Portal > WebContent > jsp > DBExplorer_View.jsp通过图 10 在树形结构中定位该文件

　　图 10. 查看 JSP 文件位置



　　选择 Source 选项卡(如果还没有选择话)定位到注释文本“Insert JavaScript for the Ajax_SERVLET servlet URL here”并按如下所示编写该 JavaScript 部分代码使用下面代码举例来确定所插入代码位置和要在应用中输入实际代码<%--
-------------------------------------------------------------------------------------
Set AJAX response servlet URL variable
-------------------------------------------------------------------------------------
Placing this variable in the JSP allows for runtime compile updates to the javascript
We are using encodeURL and getContextPath to get the path of the web application
deployed as a WAR file in Portal for accessing the servlet, stylesheet and javascript
-------------------------------------------------------------------------------------
--%>
<%--------------- Insert JavaScript for the AJAX_SERVLET URL here --------%>
<script type="text/javascript">
　var AJAX_SERVLET = "<%=renderResponse.encodeURL(renderRequest.getContextPath)%>"
　　+ "/DBExplorerServlet";
</script>
<%------------------------------- End JavaScript insert ------------------%>

　　您必须将此代码放在 JSP 中以便门户运行时能够使用 Portlet 对象(renderResponse 和 renderRequest)来确定在部署 Portlet 应用时生成 Servlet 上下文JavaScript 中 Ajax 现在可以使用此变量来对该 Servlet 发出以检索动态更新页面所需数据

　　仔细查看该 JSP 文件其他部分下面是些要查看关键点:

　　所有表单字段都没有被分配任何事件处理(例如onclick="event")我们将在运行时使用 JavaScript 来注入它们

　　不存在实际 <form> 标记也不存在向服务器提交表单输入字段内容思路方法同样这将由 Ajax 来处理

　　就在该文件结尾处有个很小 Javascript 块该块了个 "init" 此向我们输入字段添加事件侦听器在普通 Web 应用中此作为 body 元素“onload”事件来但是由于这是个 Portlet JSP 片段我们将不使用 body 标记因此需要在将 HTML 内容加载到 DOM 中以后才发出此

　　通过选择顶部菜单上 File -> Save 或按 Ctrl-S 来保存 JSP 更改

　　那么 Ajax 代码在何处呢？

　　这个问题问得好！让我们开始编写实际代码吧为了使 Ajax 正常工作您需要从客户端可能使用任何浏览器中检索并使用 XMLHttpRequest 对象为此可以编写个 JavaScript 来获取浏览器无关 XMLHttpRequest 对象区别浏览器以区别方式例子化该 XHR 对象

　　在 Project Explorer 中打开以下文件:Ajax_and_Portal > WebContent > js > DBExplorer.js

　　定位到 getXMLHttpRequest 将以下代码插入脚本中所指示行上function getXMLHttpRequest {
　var xhr = null;
// ---- Insert code here ----
　 ( window.XMLHttpRequest ) {
　　// Mozilla/Safari
　　xhr = XMLHttpRequest;
　} ( typeofActiveXObject != "und" ) {
　　// IE
　　xhr = ActiveXObject("MicroSoft.XMLHTTP");
　}
// ---- End insert code ----
　 xhr;
}

　　此对于使浏览器无关 Ajax 正常工作非常关键它确定浏览器是支持 XMLHttpRequest 还是支持 ActiveXObject (Microsoft.XMLHTTP) 对象此返回正确对象具体取决于所支持浏览器类型旦创建了该对象API 本身就是相同但是区别浏览器支持区别例子化思路方法并需要唯以创建每个对象此可处理大多数浏览器

　　配置 Ajax 并检索数据

　　现在您可以获得实际 XMLHttpRequest 对象以向服务器发出 Ajax 回调您需要创建将实现此行为

　　为了理解接下来部分中代码您需要理解为 XMLHttpRequest 指定区别状态在 JavaScript(在该文件顶部)中为便于本练习稍后工作我们已作为变量添加了该代码下面代码片段显示了本练习中使用代码个举例您不 必编写本练习此部分代码它已经在脚本中了这仅供参考

// -------------------------------------------------------------------------
// Set global ready state and HTTP variables to check AJAX status
// -------------------------------------------------------------------------
var READY_STATE_UNITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;
var HTTP_OK = 200;

　　下步我们需要创建向服务器发出 XMLHttpRequest 并请求特定数据代码

　　定位到 event_DataSource 按下面指示插入以下代码function event_DataSource {
　log("event_DataSource: starting", "#660");
　// ... Existing code removed for brevity...
　// XHR for Schemas
　log("event_DataSource: getting schemas", "#660");
// ---- Insert code here ----
　xhr_getSchemas = getXMLHttpRequest;
　xhr_getSchemas.onreadystatechange = callback_getSchemas;
　xhr_getSchemas.open("POST",AJAX_SERVLET,true);
　xhr_getSchemas.RequestHeader ("Content-Type", "application/x-www-form-urlencoded");
|--10--------20--------30--------40--------50--------60--------70--------80--------9|
|-------- XML error:　The previous line is longer than the max of 90 characters ---------|
　xhr_getSchemas.send("LIST=SCHEMAS&" + getFormDataParams );
// ---- End insert code ----
　
　log("event_DataSource: finished", "#660");
}

　　这个特定用于向 Ajax Servlet 发出并请求数据库中模式列表此脚本中还有若干个已经为您编写好其他它们发出类似但是由于本练习范围所限您应该集中于这个特定此代码部分创建个 XHR 对象分配个回调并打开个到 AJAX_SERVLET(在前面 JSP 中定义) POST 连接最后它发起个请求并传入些参数确定用于 XMLHttpRequest 对象以下思路方法及其功能

思路方法名称 功能
.onreadystatechange 告诉要在请求状态更改时哪个 JavaScript (您将在接下来部分中编写此代码)
.open 设置请求思路方法(在我们举例中为 POST)、URL并确定浏览器是应该异步发出 (true) 还是等待结果 (false)此举例不需要浏览器等待响应因此我们将其设置为 true表示异步
.RequestHeader 告诉该 Servlet 请求中发送是什么类型内容在此举例中将包含 HTTP 表单参数
.send 发起对该 Servlet 并将参数附加到请求中



　　用于其他表单字段以下已经为本练习编写好了不需要再添加它们它们使用和上面添加代码类似代码来更新屏幕其他区域这仅供参考:

　　event_Schema

　　event_Table

　　event_addColumn

　　event_deleteColumn

　　event_getTableData

　　由于您在前步中告诉 XMLHttpRequest 对象您将使用个状态处理因此您需要编写回调代码并让它在状态更改时执行操作定位到 callback_getSchemas 并在所指示区域插入以下代码function callback_getSchemas　{
　handlerLog("callback_getSchemas", xhr_getSchemas, "#00c");
// ---- Insert code here ----
　// Show object is updating the ready state is loading
　 (xhr_getSchemas.readyState READY_STATE_LOADING) {
　　showSelectUpdating("schema_select");
　}
　// Handle results the ready state is complete
　 (xhr_getSchemas.readyState READY_STATE_COMPLETE) {
　　 (xhr_getSchemas.status HTTP_OK) {
　　　fillSelect("schema_select", xhr_getSchemas.responseXML, true);
　　　formUnlockField("schema_select");
　　} {
　　　error("Failed to retrieve schema list:" + xhr_getSchemas.status);
　　}
　}
// ---- End insert code ----
}

　　请注意此代码中存在两个区别部分如果请求状态更改为 "READY_STATE_LOADING"(或 1)则它更新页面上数据从而指示已发出请求并且正在更新数据该应用此部分是已经为您编写好最好显示正在为 Ajax 相关而更新数据您不知道网络连接速度将会如何或者返回数据将需要多长时间设置个“更新”指示器可以在浏览器等待响应时让最终用户了解活动情况如果没有指示器最终用户可能以为什么事情也没有发生当响应非常慢时尤其如此

　　该第 2部分将在请求状态更改为 "READY_STATE_COMPLETE"(或 4)时执行这意味着请求已完成并且通常已经为处理结果准备就绪这个 fillSelect 接受结果 XML 文档并用返回数据来更新 HTML select 标记用于此页上其他字段以下已包括在该文件中不需要再添加它们它们使用和上面添加代码类似代码来更新屏幕其他区域这仅供参考:

　　callback_getDatabaseProperties

　　callback_getTables

　　callback_getColumns

　　callback_getTableData

　　在继续的前通过选择 File > Save 或按 Ctrl-S 来保存该文件

　　启动代码

　　现在您已经准备好所有 Ajax 代码但它不会自己启动您需要告诉浏览器您实际希望在执行某个操作时发生什么事情您需要编写些 JavaScript 事件以便最终用户能够在和应用交互时启动 Ajax 在本部分中您将向“数据源查找”按钮添加“onclick”事件

　　定位到 DBExplorer.js 文件中 init 通过将以下代码插入脚本中所指示行上从而为“加载数据源”按钮添加个事件处理document.getElementById("datasource_button").onclick =event_DataSource;

　　这告诉浏览器在该按钮被单击时执行此我们原本可以将这些事件侦听器直接添加在表单输入标记中但那样不是非常有趣当使用此思路方法添加事件侦听器时您添加是实际对象因此不包括引号或括号其他字段事件代码已经为您编写好了下表包含已经为您编写好其他“onXXX”事件您无需执行任何操作如果您希望获得更好了解可以查看代码这些部分

输入字段 事件 处理 执行操作
数据源加载按钮 onclick event_DataSource 检索数据库属性和模式列表
Schema select onchange event_Schema 检索表列表
Table select onchange event_Table 检索可用列
Available columns select ondblclick event_addColumn 向活动列列表添加列并检索表数据
Active columns select ondblclick event_deleteColumn 从活动列列表删除列并检索表数据



　　在继续下步的前通过从菜单选择 File -> Save 或按 Ctrl-S 来保存更改

　　部署和测试应用

　　现在您已经编写好 JavaScript Ajax 部分代码并告诉 JSP 在查找数据源时执行该代码您需要将完成应用部署到服务器

　　现在已经部署了该 Portlet您需要测试该应用

　　将浏览器指向包含我们 Portlet 门户页

　　首先输入个数据源名称或者接受缺省值“jdbc/sample”并单击 Lookup 按钮请注意其他项开始根据数据源值和您放在 JSP 中 _disibledevent=>

　　您可以试验和使用区别数据源并探索您数据试验尝试区别事情如何增强该应用？

　　故障排除

　　大功告成！您现在已经是 Ajax 技术和门户开发方面专家了什么？某个地方无法工作？您有几种选择

　　返回去检查您所有代码更新Ajax_and_Portal zip 文件中还提供了个名为 solutions.txt 替代文件请将其中包括源代码块和您代码中内容进行比较

　　使用 Mozilla Firefox 浏览器以及 FireBug 扩展来调试 JavaScript由 Joe Hewitt 编写 Firebug 很容易学习并且可以快速帮助您跟踪代码中任何花 30 分钟使用这个令人惊异工具您将节省数小时甚至数天时间并试着弄清楚任何 JavaScript 相关

　　检查门户日志文件中由该 Servlet 生成消息常见通常和到数据库数据源连接有关

　　作为最后手段您还可以向作者发送电子邮件并详细描述所发生情况我们将尽最大努力帮助您纠正

　　屏幕更新背后神话

　　就 Ajax 而言您发出以获得数据并使用返回数据来更新页面这就是对 Ajax 简单描述如果您希望继续探索在更新数据时使用某些 DHTML您可以继续该练习在以下部分中您将了解如何动态更新 HTML 对象这些只是您在检索数据以后所能做工作些举例该练习此部分主要是 DHTML 举例并且是可选我们将介绍:

　　使用 DOM 动态更新 HTML select 内容

　　使用 innerHTML 动态更新 HTML DIV 内容

　　禁用表单字段并在完成 Ajax 后重新启用它们

　　将表单数据作为 Ajax 中参数来发送

　　日志记录区域

　　使用 DOM 动态更新 HTML select 内容

　　使用前面描述思路方法定位到 DBExplorer.js 文件并找到 fillSelect

// -------------------------------------------------------------------------------------
// Function to fill a specic select object from a properly formatted XML document
// -------------------------------------------------------------------------------------
function fillSelect( id, xmlResults, addAny) {
　clearSelect(id);
　selectObj = document.getElementById(id);
　 ( selectObj ) {
　　 (addAny) {
　　　selectObj.options[0] = Option("All Schemas", "any");
　　}
　　var xmlRoot = xmlResults.getElementsByTagName("htmlselect")[0];
　　 (xmlRoot) {
　　　for(var i=0; i < xmlRoot.childNodes.length; i) {
　　　　child = xmlRoot.childNodes[i];
　　　　 (child.nodeName "select") {
　　　　　attrs = child.attributes;
　　　　　selectObj.options[selectObj.length] = Option(
　　　　　　child.firstChild.nodeValue, attrs.getNamedItem("value").value);
　　　　}
　　　} //for
　　}
　　 (selectObj.length0) {
　　　selectObj.options[0] = Option("Not Available", "None");
　　　selectObj.disabled = true;
　　}
　　 (selectObj.options[0]) {
　　　selectObj.options[0].selected = true;
　　}
　} // obj
}

　　注意该代码如何检查 Ajax Servlet 发送 XML 中标记元素 htmlselect 和分析 select 标记以获得用于更新选择选项数据如果您在本练习开头直接访问过该 Servlet您会注意到返回 XML 格式非常熟悉当在 XML 中找到个 select 标记时则会在选择列表上创建个新选项这允许在使用 clearSelect(id) 思路方法(此思路方法也包括在 JavaScript 中)来清除列表后动态更改选择框

　　使用 innerHTML 动态更新 HTML DIV 内容

　　定位到 DBExplorer.js 文件中 updateDivHtml

// -------------------------------------------------------------------------------------
// Function to update a specic DIV object from an XML Document
// -------------------------------------------------------------------------------------
function updateDivHtml(xmlDoc, divName) {
　var divHtml = "<table ='property_table'>";
　var xmlRoot = xmlDoc.getElementsByTagName("htmldiv");
　 (xmlRoot) {
　　// Limit to _disibledevent=>　　 (xmlRoot.childNodes.length 0) {
　　　divHtml = createDivRow("No data available","");
　　} {
　　　for(var i=0;i<xmlRoot.childNodes.length;i) {
　　　　textLine = xmlRoot.childNodes[i];
　　　　 (textLine.nodeName"textline") {
　　　　　attrs = textLine.attributes;
　　　　　 (attrs && textLine.firstChild) {
　　　　　　divHtml createDivRow(attrs.getNamedItem("label").value,
　　　　　　　textLine.firstChild.nodeValue);
　　　　　}
　　　　}
　　　}
　　} //
　}
　divHtml "</table>";
　document.getElementById(divName).innerHTML = divHtml;
}

　　此举例以区别方式更新 DIV 标记其相似的处在于它也分析返回 XML但是该 XML 具有区别格式它以表格格式动态创建 HTML 以插入 DIV请注意该最后行使用在分析期间创建表 HTML 来更新 DOM 元素 innerHTML 属性这将 DIV 中 HTML 完全动态替换为新格式化 HTML并更新屏幕

　　禁用表单字段并在完成 Ajax 后重新启用它们

　　位于 Ajax_and_Portal.js 文件中接下来两个在发出 Ajax 时启用和禁用页上表单对象当有多个项可能在单个请求期间更改时这可以减少可能出现问题数量通过禁用该字段您可以确保最终用户在等待来自 Servlet 请求时他们不会更新任何其他可选择项

// ----------------------------------------------------------------------------
// Functions to lock/unlock form objects.　Used when processing
// requests so the user doesn't try to update the field when the
// requests are not finished processing.
// ----------------------------------------------------------------------------
function formLockField( id ) {
　 document.getElementById( id ).disabled = true;
}
function formUnlockField( id ) {
　 document.getElementById( id ).disabled = false;
}

　　典型逻辑流是让事件处理禁用将在 Ajax 期间被更新任何字段旦收到 Ajax 响应则解锁相应表单字段就是回调责任

　　将表单数据作为 Ajax 中参数来发送

　　将表单数据作为参数传递就像某个 HTML 表单发出普通请求样在此代码中对于每个 DOM 对象(它们具有我们希望作为 Ajax 部分来发送信息)我们对其进行编码并放在参数串中以将其和请求起发送注意该代码还随请求起发送个时间戳这促使浏览器不将 URL 缓存Cache到 Serlvlet以防止存在多个针对同系统请求

// -------------------------------------------------------------------------------------
// Function to retrieve all of the form data to send to the AJAX servlet as parameters
// -------------------------------------------------------------------------------------
function getFormDataParams {
　var params = "DS=" + encodeURIComponent( document.getElementById("get_ds").value )
　　+ "&SCHEMA=" + encodeURIComponent(getSelectedOption("select_schema"))
　　+ "&TABLE=" + encodeURIComponent(getSelectedOption("select_table"))
　　+ "&COLUMNS=" + getOptionList("selected_columns")
　　+ "&NOCACHE=" + Date.getTime;
　　log("Form params: " + params);
　　 params;
}

　　日志记录区域

　　我们应用中有个部分提供了用于对事件进行日志记录窗口以便更好地跟踪流程流这是个将要实现简单子系统工具包通常提供了类似功能不过这对我们练习来说已经足够了

　　首先打开 css > DEBExplorer.css 文件并定位到位于该文件底部附近 div.logger 和 stanza

div.logger {
　　height: 200px;
　　width: 100%;
　　font-family: monospace;
　　font-size: small;
　　background-color: #eaeaea;
　　overflow: scroll;
　　border: 1px solid #000099;
}

　　可以看到我们在创建个具有固定高度可滚动 DIV 区域这导致在我们向日志记录区域顶部添加新日志消息时内容将向下滚动下步打开 DBExplorer.js 文件并定位到位于该文件底部附近日志记录

// -------------------------------------------------------------------------------------
// update logging window with messages
// -------------------------------------------------------------------------------------
function log(msg, color) {
　var logger = document.getElementById("logger");
　 ( color null ) {
　　color = "black";
　}
　 ( logger ) {
　　var d = Date;
　　var time = (d.getHours + ":" + d.getMinutes + ":"
　　　+ d.getSeconds).replace(/b(d)b/g, '0$1');
　　logger.innerHTML = "<span style='color:"+color+"'>"
　　　+ time + ": " + msg + "</span><br />" + logger.innerHTML;
　} {
　　alert("No logging area found! Log message is:n" + msg);
　}
}

　　在该中我们使用其 ID 属性获得个对日志记录 DIV 引用我们希望向每个消息添加很好地格式化时间戳这是所有日志都应该有因此我们创建个 Date 对象并获得所需字段所示替换正则表达式只是向单词边界中任何位数插入个前导零(例如“3:47:2”将转换为“03:47:02”)最后在日志记录区域中存在现有内容前面我们插入具有所请求颜色日志消息请注意innerHTML 属性在同上下文中既是可写又是可读

　　附录 A. 配置举例数据库和数据源

　　我们应用缺省数据源是 DB2 通用“Sample”数据库它被定义为名为“jdbc/sample”数据源如果您知道应用服务器中存在其他数据源名称您也可以使用自己数据源名称来改写缺省数据源名称让我们继续配置该举例

　　首先让我们创建该举例数据库DB2 使得此过程非常容易要么运行 DB2 “First Steps”并选择 Create sample database要么作为 DB2 例子用户从命令行运行 db2sampl如果您需要更多帮助请参考 DB2 入门文档

　　其次我们需要为该举例数据库定义个数据源启动您主 WebSphere Application Server它通常是 server1

　　登录到管理员控制台:

　　对于 WebSphere Application Server v5:http://localhost:9090/admin

　　对于 WebSphere Application Server v6:http://localhost:9060/ibm/console

　　创建个新 JDBC 驱动提供:

　　选择 Resources > JDBC Providers

　　单击 New 按钮

　　对于 JDBC Providers请选择 DB2 Universal JDBC Driver Provider

　　单击 OK

　　您可以将 New provider definition 页上所有内容保留原样

　　单击 OK

　　单击该页顶部 Save 链接并保存设置

　　定义我们 DB2 JDBC 驱动位置:

　　选择 Environment > Manage WebSphere Variables

　　将以下环境变量设置为 db2java.zip 文件位置如果您没有安装 DB2 或 DB2client则需要从已安装 DB2 部署获得该文件并将其放在您系统上某个地方${DB2UNIVERSAL_JDBC_DRIVER_PATH}
${UNIVERSAL_JDBC_DRIVER_PATH}

　　对于每个变量:

　　单击变量名称

　　对于 Value 字段输入 db2java.zip 文件所在目录对于 Linux: /opt/IBM/db2/V8.1/java.

　　单击 OK

　　单击该页顶部 Save 链接并保存设置

　　创建 J2C 身份验证别名:

　　选择 Security > JAAS Configuration > J2C Authentication Data

　　单击 New 按钮

　　输入以下字段并根据您实现需要进行调整:

　　Alias:sampleDBAuth

　　User ID:您 DB2 例子用户 ID例如 db2inst1

　　Password:您 DB2 例子密码

　　单击 OK

　　单击该页顶部 Save 链接并保存设置

　　为我们举例数据库创建个新数据源

　　选择 Resources > JDBC Providers

　　单击我们刚才创建 JDBC 提供 DB2 Universal JDBC Driver Provider

　　单击页面顶部 Data Sources 链接

　　单击 New 按钮

　　设置 Configure Data Source 页上以下字段:

　　Name:sample

　　JNDI name:jdbc/sample

　　Container-Managed Authentication Alias:xxxxx/sampleDBAuth

　　注意:该值将附带您应用服务器节点名称作为前缀

　　单击 OK

　　单击新创建举例数据源链接

　　单击页面底部 custom properties 链接

　　对于下面所示每个变量名称根据您配置将各个值设置为适当值下面所示值针对缺省安装

　　serverName:localhost

　　portNumber:50001

　　更新各个字段以后单击屏幕顶部 Save 链接并保存设置

　　测试新数据源:

　　选择 Resources > JDBC Providers

　　单击我们刚才创建 JDBC 提供 DB2 Universal JDBC Driver Provider

　　单击页面顶部 Data Sources 链接

　　单击新创建举例数据源链接

　　单击 Test Connection 按钮您应该在屏幕顶部看到成功消息如果看到请检查所有设置并重试另外还要确保实际将数据库运行起来！

　　祝贺您现在您数据库和数据源已经准备就绪可供使用了

　　附录 B. 部署 Portlet

　　本部分提供相关信息介绍如何使用 RAD通过几次简单点击来完成 Portlet WAR 文件部署

　　在 Project Explorer 中右键单击 Ajax_and Portal project 并从菜单中选择 Deploy Portlet...如图 12 所示

　　图 12. Deploy Portlet 菜单选项



　　配置个门户服务器以支持部署当您第次运行此向导时将不存在已配置服务器如果没有已配置服务器则按照以下步骤操作否则继续步骤 3

　　单击 New... 按钮以配置新服务器注意:如果您希望将 Portlet 部署到远程门户服务器则您应该拥有 FTP 访问权限或某个共享目录(例如NFS)设置远程服务器主题超出了本练习范围您需要参考 RAD 和 WebSphere Portal 帮助文档

　　对于普通门户环境您需要选择如图 13 所示值请调整这些值以匹配您环境并单击 Next

　　图 13. 部署和定义新服务器



　　输入以下信息:图 14 显示了标准值不过您可能必须根据特定部署进行调整当完成时单击 Next

　　图 14. 部署门户设置



　　配置发布设置图 15 所示值针对个 Linux 平台上本地安装请调整这些值以匹配您配置然后单击 Finish

　　图 15. 部署发布设置



　　选择您希望将 Portlet 部署到适当服务器通常该服务器是 localhost > WebSphere Portal v5.1 for Import, Export and Deploy @ localhost选择服务器的后单击 Finish请参见图 16

　　如果以前已部署了该 Portlet您将看到个弹出窗口提示您是否改写现有内容回答 Yes 以继续部署所做更改

　　图 16. 部署服务器选择



　　现在您 Portlet 应该已部署到该服务器上！

　　如果这是第次部署该 Portlet您需要将其添加到门户上某个页面:

　　使用您 Web 浏览器使用管理帐户登录门户

　　[可选] 为该 Portlet 创建个新页面

　　选择 portal Administration 链接

　　选择 Portal User Interface > Manage Pages

　　从列表页中选择 My Portal 链接

　　单击 New page 按钮

　　提供 Ajax 和 Portal 名称并根据情况进行自定义单击 OK 然后再次单击 OK

　　将该 Portlet 添加到某个页面:

　　选择 portal Administration 链接

　　选择 Portal User Interface > Manage Pages

　　从列表页中选择 My Portal 链接

　　单击您将放置 Portlet 页面所对应 Edit Page Layout 按钮

　　单击 Add portlets 按钮

　　搜索“Ajax”选择 Ajax Database Explorer Portlet并单击 OK

　　单击 Done 以完成页面编辑

　　结束语

　　在本教程中我们描述了如何和为什么在门户应用中使用 Ajax我们还构建了个在多个区域使用 Ajax 全功能 Portlet 应用我们还向您介绍了 DHTML 操作所涉及到紧密耦合技术虽然无法在本教程中研究 Ajax 和 WebSphere Portal 所有可能用途但我们意图旨在促使您学习并在将来应用开发工具包中应用这项激动人心技术

延伸阅读

• 2010-12-9-- phpajax,什么是Ajax
• 2010-12-9-- ajax教程,十大最佳Ajax教程收集(图文)
• 2010-11-24-- phpajax,Unobtrusive Ajax 的两种境界
• 2010-12-9-- ajax入门教程,Ajax+PHP简单基础入门实例教程
• 2009-1-15-- eclipseajax:使用 Google Web Toolkit、Apache Derby 和 Eclipse 构建 Ajax 应用程序 4
• 2009-1-15-- eclipseajax:使用 Google Web Toolkit、Apache Derby 和 Eclipse 构建 Ajax 应用程序 3
• 2009-9-2-- ajaxlibrary:用PHP for Microsoft AJAX Library增强PHP编程
• 2010-12-9-- ajax基础教程,Ajax.基础教程 电子书版 提供下载
• 2009-1-12-- asp.netajax:PHP中使用ASP.NET AJAX
• 2009-1-8-- eclipseajax:Eclipse平台上开始支持AJAX和动态语言