在BEA WebLogic Portal 8.1中进行Ajax编程，第2部分

作者：佚名来源：不详发布时间：2007-4-13 19:01:59

　　编辑注：本文讲述了在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 Lookup

　　Zip Code Lookup（区号查找）portlet说明了两个可用于调用远程Web服务（例如，一个与Web服务器位于不同计算机上的Web服务）的方法。这两个方法（direct和proxy）是通过使用两个直接命名的按钮Direct和Proxy来调用的。Direct方法直接从Web浏览器调用Web服务，这通常会导致违反Internet Explorer中的安全规则，而在Firefox中则根本无法使用。Proxy方法使用了本文稍后将会描述的Java代理servlet。

[责任编辑:cndownzcom]

　　图 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的第一个实例，而这很可能不是您所期望的结果！

[责任编辑:cndownzcom]

　　还要注意使用<div>标签作为动态内容的占位符。这是一个样式选择问题，但是我发现，<div>标签具有成为任何内容的容器的巨大潜力，而<td>标签的限制就要严格得多。更多地使用CSS绝对有助于减少使用嵌入的样式标签，但这将会是留给读者的一道练习题。但是，我要指出的是，明智地使用CSS样式可以极大地减少最终要编写的JavaScript数量。记住，CSS可以用于改变一个元素的颜色、位置、可见性、透明度以及其他许多可视化特性。简单的样式交换通常可以让图形化用户界面变得更加具有交互性。在Employee Listing portlet中，当变化被提交给数据库之后，我使用了这项技术来通知用户。

　　在这个portlet中，我们将从文本栏中获得输入，调用一个Web服务查找与区号相关的城市和州信息，然后使用该Web服务返回的信息动态更新City 和State <div>元素。页面不会刷新——只有City和State元素会更新。

　　将被这个portlet调用的Web服务有一个端点在http://www.webservicex.net/uszip.asmx/GetInfoByZIP上，并带有一个参数USZip。所以，获取区号60118的相关城市和州信息的调用应该是http://www.webservicex.net/uszip.asmx/GetInfoByZIP?USZip=60118。这是使用Ajax调用Web服务的惟一方法。您可以创建一条相应的SOAP消息，但是这已经超出了本文的讨论范围。

　　如果我们通过把上面的查询键入到浏览器中，来使用USZip=60118手动调用Web服务，则该Web服务将使用下面的XML文档做出响应。

　　我们想提取出CITY和STATE元素，并把它们放到我们的Web页面中相应的占位符中。

　　我们将使用Direct按钮的onclick处理程序来执行一小段嵌入的JavaScript zipcode_updateDirect()。下面给出这些JavaScript代码：