问题 > 问题详情
EOS AJAX应用框架实现
最后更新: 1年前 · 

38876 浏览
随着B/S应用的深入,最终客户对于浏览器界面互动操作越来越不满意,很多新的B/S大量应用了AJAX技术来实现在浏览器上完成丰富的页面操作。
为了适应客户的需求,普元PSO部门提供了一套基于EOS的AJAX应用框架的实现。技术实现的源代码在开源的组织机构权限管理系统应用中。请联系管理员
43 个回应
Normal
wangkq 2006年01月11日 15:27
基于浏览器的应用系统中,获取服务端数据时候需要通过HTTP的Request的方式获得服务器放回的HTML数据,而且在页面中需要刷新页面才能获得数据。因此在很多需要大量和服务端交互的应用程序编写负责,而且给使用者进行页面操作起来非常不方便。因此出现这么一种技术,通过XMLHTTP、DOM、Javascript等技术组合实现动态显示与交互。
* 基于XMLHTTP/CSS
* 由DOM(Document Object Model)实现动态显示和交互
* 通过XML和XSLT进行数据交换及处理
* 使用JavaScript整合B/S两端直接数据交互
[img align=center]http://gocom.primeton.com/uploads/attatch/ajax.jpg[/img]
在AJAX技术使用前,已经有程序实现了一些不刷新获得数据的解决方案,通常大家在HTML页面中增加一个大小为0的空的IFRAME,然后将需要不刷新提交的请求提交到整个IFRAME页面中,然后从IFRAME页面中获得的HTML对象中获取数据。这种方式存在着很多问题:
* 页面都要包含一个空的IFRAME,造成编写的HTML非常复杂,而且提交都要指定target,编写程序很容易出错
* 因为仍然采用了HTTP的Request方式,请求返回的内容仍然是HTML,对于返回的数据需要重新解析才能得到有用的数据
* 因为采用了HTTP的Request方式,一个完整的HTTP请求消耗较多资源,而且返回的数据都是HTML,所以网络中交互的数据量比较大,页面表现会感觉效率低。

而AJAX就很好的解决了原来解决方案存在的问题,AJAX(Asynchronous JavaScript and XML)的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎(js)来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求采用(XMLHTTP方式)。XMLHTTP的请求交互的数据都是XML,所以很容易构造符合业务需要的数据结构,而且交互的数据量远远小于HTML。
Normal
wangkq 2006年01月11日 15:32
因为AJAX是一个页面解决方案,而EOS是一个开发的平台,很容易就和AJAX进行结合。而且EOS有一个最大的优势就在于EOS的中间件平台都是采用了XML数据总线进行交互数据,这样可以说EOS和AJAX是一对完美的组合。
首先大家先看EOS的运行原理:
[img align=center]http://gocom.primeton.com/uploads/attatch/eos.jpg[/img]
任何一个HTTP请求首先都将数据转换为XML,然后调用相应的展现逻辑,展现逻辑又根据流程调用业务逻辑,然后返回XML数据,最后通过JSP中的TAG将XML数据转换为HTML返回到页面中。
根据上面的运行图,我们就不难看出,我们可以通过JS将页面的请求通过XMLHTTP直接提交到业务逻辑层,然后直接将业务逻辑层返回的数据返回到JS中,然后通过JS或者回填到HTML 页面中,或者生成HTML 在页面中显示。
在开源的组织机构和角色管理系统中,fbtools构件包main构件中有两个重要的资源(hiddensubmit.jsp 和 hiddensubmit.js),这两个资源分别实现了EOS AJAX引擎的客户端和服务端部分。

EOS AJAX运行关键点在于,客户端可以通过HiddenSubmit的JS class对象使用key=value的方式提交到服务端的hiddensubmit.jsp,这个jsp根据HiddenSubmit提交参数bizAction调用相应的业务逻辑,然后将业务逻辑返回的DOM以XML String的方式返回给HiddenSubmit,然后通过手工编写js或者调用HiddenSubmit对象方法将数据填入到页面中。
[img align=center]http://gocom.primeton.com/uploads/attatch/eosajax.jpg[/img]
HiddenSubmit.js 文件中HiddenSubmit对象使用手册:

1、 构造函数HiddenSubmit HiddenSubmit(bizAction)
参数:bizAction - 业务逻辑名称字符串。
sample: var sub = new HiddenSubmit('fborg.bizorg.bizEmpExpand');
2、 function add(name, value)
功能:增加提交参数
参数:name 提交参数的名称
value 提交参数的值
sample: sub.add('EOSORG_V_Users/operatorID', '1');
3、 function clear()
功能:清除提交参数列表
4、 function submit()
功能:将增加的参数提交到服务端执行业务逻辑
5、 function submitForm(formObject)
功能:将一个表单中当前数据提交到服务端执行业务逻辑,注:提交表单(form)时候,用add增加的参数列表无效。
参数:formObject 页面form表单对象
返回值: true/false true - 调用成功, false - 失败
sample: sub.submitForm(document.form1);
6、 function submitXML(xmlString)
功能:将一个XML字符串提交到服务端执行业务逻辑,注:提交XML字符串数据时,用add增加的参数列表无效
参数:xmlString xml的字符串,xml值是root/data节点下的XML,HiddenSubmit.js会默认在字符串前后加上<root><data> 和</data></root>
返回值: true/false true - 调用成功, false - 失败
sample: sub.submitXML("<EOSORG_V_Users><operatorID>1</operatorID></EOSORG_V_Users>");
7、 function getProperty(property)
功能:根据property值获得返回的XML节点的值,property是xpath相对位置是/root/data
参数:property xpath属性,xpath位置相对于/root/data
返回值:property节点对应的text值,如果节点不存在返回null对象
sample: sub.getProperty("EOSORG_V_Users/operatorID");
8、 function getValue(xpath)
功能:根据xpath获得XML节点值
参数:xpath 完整xpath路径
返回值:xpath节点对应的text值,如果节点不存在返回null对象
sample: sub.getValue("root/data/EOSORG_V_Users/operatorID");
9、 function getValues(xpath)
功能:根据xpath获得XML节点数组值
参数:xpath 完整xpath路径
返回值:xpath节点对应的所有节点的值,返回是是数组
sample: sub.getValue("root/data/list/EOSORG_V_Users/operatorID");
10、 function setObjectValue(object, property)
功能:根据property设置某个HTML对象的值,如果对象不是form表单中的对象,那么将设置这个对象的innerText值
参数:object html对象
property 节点路径,从root/data节点开始的路径,property参数可以没有,如果没有,节点路径会根据object对象的name属性做为节点路径
sample: sub.setObjectValue(document.form1.elements["EOSORG_V_Users/operatorID"]);
sub.setObjectValue(document.all("user_name_text"), "EOSORG_V_Users/operatorName");
11、 function setForm(formObject)
功能:设置表单所有的元素的值
参数:formObject 页面form表单对象
根据表单中元素的名称做为property值从返回的DOM中获取这个节点的值,将这个值赋给表单的元素值

HiddenSubmit进行隐含提交时候有一个默认的规则:
应用会自动检查 root/data/return/code 这个节点中对应返回值
* 这个返回值不存在或者大于0,隐含提交请求成功
* 这个返回值小于0,隐含提交失败,并且检查 root/data/return/ message节点,如果存在提示这个节点中的内容
* 如果这个值等于0,隐含提交成功,并且检查root/data/return/ message节点,如果存在提示这个节点中的内容
Normal
wangkq 2006年01月11日 15:33
<%@include file="/internet/common.jsp"%>
<SCRIPT language="JavaScript" src="/pageComponent/resources/scripts/dataformcheck.js"></SCRIPT>
<SCRIPT language="JavaScript" src="/pageComponent/resources/scripts/calendar.js"></SCRIPT>
<link rel="stylesheet" href="/pageComponent/resources/theme/style.css" type="text/css"/>
<link rel="stylesheet" href="/fbrole/theme/style.css" type="text/css">
<SCRIPT language="jscript" src="/fbtools/page/hiddensubmit.js" type="text/javascript"></SCRIPT>
<br>
<form name="form1" method="post">
<input type="text" name="EOSORG_V_Users/operatorID" value="1"><br>
<input type="button" value="submit" onclick="dosubmit()">
<input type="button" value="submit form" onclick="dosubmitForm()">
<input type="button" value="submit xml" onclick="dosubmitXML()">
</form>
<script>
function dosubmit() {
var sub = new HiddenSubmit('fborg.bizorg.bizEmpExpand');
sub.add("EOSORG_V_Users/operatorID", document.form1.elements["EOSORG_V_Users/operatorID"].value);
if (sub.submit()) {
sub.setObjectValue(document.all("user_name_text"), "EOSORG_V_Users/operatorName");
}
}
function dosubmitForm() {
var sub = new HiddenSubmit('fborg.bizorg.bizEmpExpand');
if (sub.submitForm(document.form1)) {
sub.setForm(document.form2);
}
}
function dosubmitXML(){
var sub = new HiddenSubmit('fborg.bizorg.bizEmpExpand');
var str = "<EOSORG_V_Users><operatorID>" +document.form1.elements["EOSORG_V_Users/operatorID"].value+ "</operatorID></EOSORG_V_Users>";
if (sub.submitXML(str)) {
var ret = sub.getValue("root/data/EOSORG_V_Users/userID");
if (ret == null || ret == "") {
alert("没有此操作员编号的用户!");
} else {
sub.setForm(document.form2);
}
}
}
</script>
<br>
<PG:DataForm>
<form action="#.do" target="_self" name="form2" method="post">
<TABLE width="95%" align="center" cellPadding="0" cellSpacing="1" class="fb_add">
<TR><TD class="fb_add_title" colspan="6">用户信息【<font id="user_name_text"></font>】</TD></TR>
<TR>

<TD class="fb_add_head">登录名:</TD>
<TD class="fb_add_content">

<html:text property="EOSORG_V_Users/userID" attributesText='eos_isnull="true" eos_maxsize="20" eos_displayname="登录名"' onblur="checkInput(this)"/>

</TD>

<TD class="fb_add_head">操作员姓名:</TD>
<TD class="fb_add_content">

<html:text property="EOSORG_V_Users/operatorName" attributesText='eos_isnull="true" eos_maxsize="32" eos_displayname="操作员姓名"' onblur="checkInput(this)"/>

</TD>

<TD class="fb_add_head">员工代码:</TD>
<TD class="fb_add_content">

<html:text property="EOSORG_V_Users/empCode" attributesText='eos_isnull="true" eos_maxsize="12" eos_displayname="员工代码"' onblur="checkInput(this)"/>

</TD>

</TR><TR>

<TD class="fb_add_head">性别:</TD>
<TD class="fb_add_content">

<dict:select businTypeId="BNDICT_gender" nullOption="true" nullLabel="" property="EOSORG_V_Users/gender" />

</TD>

<TD class="fb_add_head">工作电子邮件:</TD>
<TD class="fb_add_content">

<html:text property="EOSORG_V_Users/OEmail" attributesText='eos_isnull="true" eos_maxsize="128" eos_displayname="工作电子邮件"' onblur="checkInput(this)"/>

</TD>

<TD class="fb_add_head">手机号码:</TD>
<TD class="fb_add_content">

<html:text property="EOSORG_V_Users/mobileNO" attributesText='eos_isnull="true" eos_maxsize="14" eos_displayname="手机号码"' onblur="checkInput(this)"/>

</TD>

</TR><TR>

<TD class="fb_add_head">邮政编码:</TD>
<TD class="fb_add_content">

<html:text property="EOSORG_V_Users/zipCode" attributesText='eos_isnull="true" eos_maxsize="10" eos_displayname="邮政编码"' onblur="checkInput(this)"/>

</TD>

<TD class="fb_add_head">操作员编号:</TD>
<TD class="fb_add_content">

<html:text property="EOSORG_V_Users/operatorID" attributesText='eos_isnull="true" eos_maxsize="22" eos_displayname="操作员编号"' onblur="checkInput(this)"/>

</TD>

</TR>

<TR class="fb_add_bottom">
<TD colspan="6" align="center">
<input type="button" value="保存" onclick="javascript:check(document.form2);">
<input type="button" value="重置" onclick="javascript:resetData(document.form2);">
<input type="button" value="返回" onclick="javascript:history.go(-1);">
</TD>
</TR>
</TABLE>
</form>
</PG:DataForm>
Normal
jeseechen 2006年01月17日 17:10
我最近开发的一些页面中获取数据库表的值使用了HiddenSubmit,感觉很不错,解决了以往不提交页面如何查询数据库的问题,也不用编写大量的代码通过回调函数的方式实现,效果很棒。

关于HiddenSubmit我有两个问题,一是通过hiddensubmit返回的DOM生命周期有多长(这个DOM好像不在XML总线上)?二是讲到的例子是处理单笔返回的,如果多笔返回有方法处理吗(比如返回一个List用来组成一个html:select)?我试验了几次没成功。

麻烦王老师解答一下我的菜鸟级的问题,谢谢!
Normal
Tidan 2006年02月11日 19:50
希望能够看到有谁能够给出一个AJAX结合Struts的例子出来共享.谢谢!
Normal
peacedog 2006年02月23日 09:05
【适用范围】
适用的EOS版本,相关的操作系统/数据库/应用服务器环境
zxczxczxc
【问题描述和定位】


【解决方案和步骤】


【备注】
Normal
kipos 2006年03月13日 00:21
[quote]
digital2005 写道:
希望能够看到有谁能够给出一个AJAX结合Struts的例子出来共享.谢谢![/quote]
试试这个struts-ajax框架
Normal
Zlt_Aspx 2006年04月05日 16:01
长见识啊!
Normal
jzckm 2006年05月19日 16:07
学习中,希望高手指点!
Normal
美丽天使 2006年05月20日 04:49
up
Normal
美丽天使 2006年05月20日 04:51
不错
Normal
xw1981 2006年05月24日 15:55
好,大家一起来学习ajax
Normal
yakikiss 2006年06月20日 20:51
zxczxczxc
Normal
jinming1314 2006年06月23日 16:26
ajax有什么例子没
Normal
hjw_128 2006年07月07日 10:53
【适用范围】
适用的EOS版本,相关的操作系统/数据库/应用服务器环境

【问题描述和定位】


【解决方案和步骤】


【备注】

good
Normal
徘徊者 2006年07月07日 14:28
大家看一看ajax的定义自然就知道为什么了,还要什么例子?
客户端和服务器通讯的组件有很多,xmlhttp时最好用的而已。
Normal
valley6688 2006年07月20日 10:50
那个hiddensubmit能不能调业务逻辑
Normal
valley6688 2006年07月20日 10:51
打错,是能不能调展现逻辑。。
Normal
秋刀鱼 2006年07月26日 08:53
<FORM actoin="Test.pr.pr_test.do" name="Form2" target="_self" method="post">
<A href="javascript:check(document.Form2);">提交</A>】
</FORM>
为什么表单就是提交不了 老是说页错误
Normal
zhanershiyi 2006年09月06日 19:45
woyaoguanshuia
Normal
zhanershiyi 2006年09月06日 19:45
woyaoguanshuias
Normal
SOSOS 2006年09月08日 14:34
这年头,不能瞎灌水。
Ajax的例子,我看\jboss-3.2.5\server\default\deploy\eos4jboss\default.war\fbtools\page\ajaxSample.jsp就是个好例子嘛,感受一下就行。喜欢一点的自己可以来个级联下拉菜单或者来个动态树,包你感觉爽!
Normal
lszxc2 2006年09月20日 11:10
希望提供源代码,网上不能下。2005_mba#163.com。
把Email中的“#”改成"@"
Normal
lszxc2 2006年09月20日 11:10
希望提供源代码,网上不能下。2005_mba#163.com。
把Email中的“#”改成"@"
Normal
loyofo 2006年11月09日 14:50
好贴,共同学习!
Normal
yubin 2006年12月26日 15:29
怎么下载不了呢?
Normal
locking 2007年03月09日 14:00
真帅,学习了,谢谢!
Normal
wjp129 2007年03月09日 18:11
好文章,顶一个
Normal
zgqone 2007年03月22日 10:46
不错,顶一下
Normal
newtest 2007年04月03日 13:37
ssds
Normal
newtest 2007年04月03日 13:41
我没钱
Normal
test54321 2007年04月17日 12:21
我也没有,怎么办啊
Normal
firebird 2007年06月28日 14:01
没钱的日子不好过呀
Normal
tianluo 2007年07月26日 13:55
<span style="LINE-HEIGHT: 2">不错 学习中<br />
</span>
Normal
zouxiaoping 2007年07月26日 14:04
学习下~~~~~~~~~
Normal
lslsls 2007年11月12日 17:12
.............
Normal
dianxianga 2008年02月26日 11:53
hiddenSubmit.js中的如下函数在firefox中报错-错误: fields[i] has no properties
源文件:http://localhost:8088/bless/page/hiddensubmit.js
行:167
var BL_ID=sub.getValues('root/data/list[@type="QueryBL_BLESSVote"]/QueryBL_BLESSVote/ID');

function _get_xpath_values(xpath)
{
var values = new Array();
if (this.dom == null) return values;
if (xpath == null || xpath == "") return values;
var fields = this.dom.selectNodes(xpath);
for (var i=0; i
values[i] = fields[i].text;
}
return values;
}

请求帮助
Normal
java9920 2008年03月13日 20:13
怎么安装eos???
Normal
comadmin 2008年05月16日 10:40
虽然不是很懂。
正学习中。
Normal
eeerrr 2008年05月16日 15:58
自己做了一个,还不错!
Normal
jliker 2008年05月18日 11:28
这是老贴了,又顶上来了
Normal
daiqunbiao 2008年07月31日 11:25
与ext2.0整合同治知道容易吗? :-)
Normal
lanmah 2008年08月22日 16:48
6楼说到AJAX与struts的结合!
其实AJAX与Struts的结合是最容易实现,也是最容易理解的。
当前用的比较多的AJAX框架就是DWR和DOJO,关于在Struts2中的使用真实太多了,尤其是DWR!
EOS是对AJAX进行了自己的封装,但是它封装的代码是不公开的,所以学起来很繁琐,完全就是按照它自己的要求走的。
EOS的稳定性也存在问题。
它本身是用于快速开发的,这就存在一个问题,它并不能解决一切问题,只是解决最普遍最大众化的问题。
如果它能开源代码就好了!
需要 后方可回复
如果没有账号可以 一个帐号。