页面不刷新情况下完成与服务器数据交互的技术方案

【适用范围】
EOS5.0 EOS5.0.1

【内容】
在基于WEB技术构建的应用系统中，由于WEB浏览器是瘦客户端（Thin Client）模式，页面信息与SERVER端的信息交互采用请求（Request）与响应（Respone）机制来实现，即页面发起一个request处理，会将页面FORM的数据以及要调用的服务器动作（Action）基于HTTP通讯机制传递到SERVER端，完成处理后Respone的数据再通过HTTP返回到浏览器的另一个页面（即使是同一页面，该页面也会被刷新一次）。当然，笔者不想在此详细探讨这个实现机制，只是由此机制带出一个问题：当某个应用系统的复杂功能在执行时要进行多次页面与服务器端的数据交互，按照传统的处理方式会让用户感觉页面在不停的刷新，操作方式很不友好，而且交互较慢，使得操作者非常怀念C/S模式应用在操作上的易用与高效。
现在有很多组织或机构在研究在浏览器中实现胖客户端(Rich Client)应用的技术，以满足越来越多构建于WEB之上的企业级应用对用户界面操作方便性的要求。这些技术包括XMLHTTP、Flex/Laszlo、XAML、SWT/Swing，以及最常用的JSP/Servlet，但目前没有一种技术能够在满足上述要求的情况下，又兼备良好的运行效率、层次清晰的软件结构、较好的开发效率、较强的可维护性的特点。以下笔者将通过使用Primeton EOS平台实现一个具体的案例，探讨在J2EE架构上，利用JSP技术，实现在页面无刷新的情况下，完成与服务器数据交互的一种技术方案。
Primeton EOS平台为J2EE应用提供了非常清晰的逻辑层次结构，将软件纵向切割，从上自下分为页面逻辑层（即为JSP实现的用户界面层，对应MVC的View）、展现逻辑层（完成业务逻辑的调用和页面的定位或流转）、业务逻辑层（完成业务的处理）、运算逻辑层（即原子构件层，与业务无关的各种运算处理）、数据逻辑层（即企业级应用的数据结构），在本文中，将重点描述案例在页面逻辑层上的实现过程。
首先描述一下案例的情况：在安装好Primeton EOS后，相应数据库中存在一个定义应用菜单的EOS系统表（EOSMenu），案例中将通过对该表的查询，在页面中显示一级菜单和二级菜单的下拉列表（最终的页面效果如下图）
此主题相关图片如下：

并且有如下要求：
1） 选择一级菜单下拉列表中的菜单项时，从服务器中查询相应的二级菜单，显示在二级菜单的下拉列表中
2） 在获取二级菜单的过程，要求整体页面无刷新感觉
通常的做法，在选择一级菜单的下拉列表时，完成一次动作（Action）的提交（查询选择项的二级菜单），然后将信息反映到下一个页面，但这个过程会导致页面进行一次刷新，这样不符合第2）个要求。在本案例中，解决的思路是只动态更新页面的局部区域，保证整个页面不刷新，借助于jsp中的Form，target，Iframe，DIV，window.parent、innerHTML等技术细节便可以达到以上两个目标，这就是隐含刷新的方法。
具体的做法是：在父页面中定义一个隐含的Iframe（设置其宽度、高度均为0）和一个div(假定name=”replace”)，当一级菜单的下拉列表的onchange事件激活的动作（Action）的目标（target）指定为这个隐含Iframe，同时在Action激活基于EOS实现的展现逻辑，查询选择的一级菜单项的二级菜单项，将查询结果返回到子页面，子页面将查询结果显示在一个下拉列表中，该下拉列表定义也定义在一个div（假定name=”refresh”）中，在子页面末尾通过javascript将子页面的div的内容替换父页面div的内容，这样就动态改变了父页面二级菜单区域的内容，而整个父页面没有刷新。
以下是本案例的具体代码实现，包含的文件列表如下：
1） 展现逻辑prEOSMenuChoose：这是本案例功能的入口，完成如下功能：
a) 设置查询菜单的父菜单编号（父菜单编号为0的为一级菜单）
b) 根据父菜单编号调用业务逻辑bizMenuList，获得一级菜单的查询结果
c) 将业务逻辑返回的结果定位到页面MenuChoose.jsp
该展现逻辑的EOS实现如下图：

此主题相关图片如下：

2） 业务逻辑bizMenuList：根据展现逻辑层传递的条件查询菜单，并返回给展现逻辑，该业务逻辑的EOS实现如下图：

此主题相关图片如下：

3） JSP页面MenuChoose.jsp：该页面为父页面，代码如下(节选)，请结合上面的方案描述关注加了底色的代码行：
<form name="frm" action="" method="post">
 <table class="hci" >
 <tr >
 <td colspan="2" class="hcititle">选择菜单</td>
 </tr>
 <tr>
 <td class="hcihead">一级菜单：</td>
 <td class="hcicontent">
 <html:select name="EOSMenu/parentsID" onchange="java script:changeMenu();">
 <html:options property="list[@type="EOSMenu"]/EOSMenu/menuID" labelProperty="list[@type="EOSMenu"]/EOSMenu/menuLabel"/>
 </html:select>
 </td>
 </tr>
 <tr>
 <td class="hcihead">二级菜单：</td>
 <td class="hcicontent">
 <div id="replace"></div>
 </td>
 </tr>
 <tr class="hcibottom">
 <td colspan="2">
 <input type="button" onclick="java script:dosubmit();" value="查看FORM表单信息" />
 </td>
 </tr>
 </table>
 <iframe frameborder="0" src="" name="hideframe" align="left" width="0" height="0" scrolling="no"></iframe>
 
 </form>
 <%@ include file="/internet/hciTail.jsp" %>
 
 <script>
 //点击确认时，显示提交的信息
 function dosubmit()
 {
 alert("frm.elements["EOSMenu/parentsID"].value="+frm.elements["EOSMenu/parentsID"].value+
 "\r\n"+"frm.elements["EOSMenu/childID"].value="+frm.elements["EOSMenu/childID"].value);
 return;
 }
 
 //改变一级菜单时，响应一个request请求
 function changeMenu()
 {
 frm.action="pkg_demo.pr.prEOSMenuList.do?parent/replace=replace";
 frm.target="hideframe";
 frm.submit();
 }
 changeMenu();
 </script>

4） 展现逻辑prEOSMenuList：该逻辑响应页面一级菜单下拉列表的onchange事件，完成对指定一级菜单的子菜单的查询，并显示到MenuList.jsp的下拉列表中。其中展现逻辑调用的业务逻辑是复用了上面的业务逻辑bizMenuList，该展现逻辑的EOS实现如下图：

此主题相关图片如下：


5） JSP页面MenuList.jsp：显示二级菜单到下拉列表，并将该下拉列表替换父页面MenuChoose.jsp的div区的内容，实现对父页面局部区域的动态更新。代码如下（结合上面的方案描述关注加了底色的代码行）：

<%@ include file="/internet/common.jsp" %>
 <script type="text/javascript" src="/internet/scripts/check.js"></script>
 
 <div id="refresh">
 <html:select name="EOSMenu/childID" value="">
 <html:options property="list[@type="EOSMenu"]/EOSMenu/menuID" labelProperty="list[@type="EOSMenu"]/EOSMenu/menuLabel"/>
 </html:select>
 </div>
 
 <script>
 window.parent.document.all["<bean:write property="parent/replace" />"].innerHTML = gmobj("refresh").innerHTML;
 </script>
 

通过本案例的实现，为减少复杂页面因与服务器交互造成操作时的频繁刷新提供了一种有益的思路。基于这种思路，Primeton EOS产品将在5.1版本推出一组功能强大的Rich Client页面控件，为EOS的用户开发界面表现力丰富的应用提供有力支持。

【备注】
1、 本文案例实现环境：EOS5.0+Jboss3.2+Oracle9i
2、 随本文提供的案例代码以EOS项目工程的方式提供，可以运行于EOS5.0支持的任意应用服务器和数据库平台之上