发明内容
本发明的目的在于,提供一种WEB页面流中数据共享的方法和客户端设备,通过将共享数据存储于客户端中,避免了服务器对共享数据的识别过程、避免了服务器对共享数据的存储、避免了服务器和客户端之间传输共享数据的过程,实现了节约网络传输资源、提高服务器性能的目的。
为达到上述目的,本发明提供的一种WEB页面流中数据共享的方法,包括:
a、客户端浏览器对提交页面中的数据进行识别,并将识别出的共享数据在客户端中进行存储管理;
b、客户端浏览器在显示页面流中的页面、并确定该显示页面中需要加载客户端存储的共享数据时,在所述存储的共享数据中查找对应的共享数据;
c、浏览器将查找获得的共享数据加载到该显示页面中。
所述步骤a包括:
设置页面中的数据属性、数据在客户端中的存储路径、数据的存储名称;
客户端浏览器根据提交页面中的数据属性识别出共享数据,并根据该共享数据对应的存储路径、存储名称对该共享数据在客户端中进行存储管理。
所述数据属性包括:共享数据属性和私有数据属性。
所述存储于客户端的共享数据为基于XML描述的共享数据。
所述步骤a中的存储管理包括:存储节点数据、插入节点数据、修改节点数据、删除节点数据;且所述步骤a包括:
客户端浏览器识别提交页面中的共享数据,并在确定该共享数据需要新增保存时,在客户端中增加存储节点数据;
客户端浏览器识别提交页面中的共享数据,并在确定该共享数据需要插入存储时,在客户端存储的指定节点中插入该共享数据;
客户端浏览器识别提交页面中的共享数据,并在确定该共享数据需要删除时,删除客户端中存储的节点数据;
客户端浏览器识别提交页面中的共享数据,并在确定该共享数据需要修改时,修改客户端中存储的节点数据。
所述步骤b包括:客户端浏览器在显示页面流中的页面时,判断该页面中是否需要加载客户端存储的共享数据;
如果需要加载,在客户端存储的共享数据中查找对应的共享数据;
如果不需要加载,仅显示该页面流中的页面。
本发明还提供一种客户端设备,设置有浏览器,所述浏览器中设置有:
共享数据模块:用于接收并存储页面中的共享数据;
数据控制模块:用于识别提交页面中的共享数据,并根据识别出的共享数据对共享数据模块中的共享数据进行存储管理,根据WEB页面模块传输来的查询请求,从共享数据模块存储的共享数据中查找对应的共享数据,并将查找到的共享数据传输至WEB页面模块;
WEB页面模块:用于在确定显示页面中需要加载共享数据时,向数据控制模块发送查询请求,并将数据控制模块发送来的共享数据加载到显示页面中。
所述共享数据模块中存储的共享数据为基于XML描述的共享数据。
所述数据控制模块包括:查询子模块:用于根据数据控制模块接收的查询请求,从共享数据模块存储的共享数据中查找对应的共享数据,并将查找到的共享数据传输至WEB页面模块;
保存子模块:用于识别提交页面中的共享数据,并在确定该共享数据需要保存时,控制共享数据模块增加存储节点数据;
插入子模块:识别提交页面中的共享数据,并在确定该共享数据需要在指定节点中插入存储时,控制共享数据模块在指定节点中插入存储该共享数据;
删除子模块:用于识别提交页面中的共享数据,并在确定该共享数据需要删除时,控制共享数据模块删除存储的节点数据;
修改子模块:用于识别提交页面中的共享数据,并在确定该共享数据需要修改时,控制共享数据模块修改存储的对应节点数据。
所述WEB页面模块包括:显示子模块:用于显示页面流中的页面;
加载子模块:用于在确定显示页面中需要加载共享数据时,向数据控制模块发送查询请求,并在接收到数据控制模块传输来的共享数据时,将该共享数据加载到显示页面中。
通过上述技术方案的描述可知,本发明通过使客户端识别提交WEB页面中的共享数据,将服务器识别WEB页面中共享数据的识别过程分散到各客户端,避免了服务器对WEB页面中共享数据的识别过程,减轻了服务器的负载,节约了服务器的处理器资源;通过将共享数据存储于客户端,将服务器中存储的共享数据分散到各客户端,避免了服务器对共享数据的存储,节约了服务器的存储资源;同时,本发明通过将共享数据存储于客户端,使客户端浏览器从一个页面提交到另外一个页面显示过程中,不需要客户端浏览器先将数据先发送到服务器、再让服务器将共享数据回传给浏览器,避免了共享数据在客户端和服务器之间的传输,节约了网络传输资源;本发明的客户端浏览器能够对存储于客户端的共享数据进行修改、删除、插入等处理,完善了浏览器对共享数据的管理;从而通过本发明提供的技术方案实现了节约网络传输资源、提高服务器性能的目的。
具体实施方式
如果能够将提交的WEB页面中的共享数据存储于客户端中,不但能够避免服务器对共享数据的识别、存储处理,还能够避免服务器与客户端之间对共享数据的传输过程,从而能够达到减轻服务器的负载、提高服务器的性能、节约网络传输资源的目的。
因此,本发明的核心技术为:客户端浏览器对提交页面中的数据进行识别,并将识别出的共享数据在客户端中进行存储管理,客户端浏览器在显示页面流中的页面、并确定该显示页面中需要加载客户端存储的共享数据时,在所述存储的共享数据中查找对应的共享数据,浏览器将查找获得的共享数据加载到该显示页面中。
下面结合附图2对本发明提供的浏览器进行详细描述。
本发明提供的客户端浏览器如附图2所示。图2中,客户端浏览器中设置有共享数据模块、WEB页面模块和数据控制模块,这三个模块组成浏览器的数据保存系统。
共享数据模块主要用于对其接收的共享数据进行存储,共享数据模块接收的共享数据是由数据控制模块传输来的。共享数据模块中存储的共享数据可以为基于XML格式的共享数据。
WEB页面模块主要用于展现其接收到的数据,WEB页面模块展现的数据可以为:页面流中的WEB页面,也可以为:页面流中的WEB页面和共享数据模块中存储的共享数据,即WEB页面模块显示的页面可以仅仅为页面流中的页面,也可以为加载了共享数据模块中存储的共享数据之后的页面。WEB页面模块接收到的共享数据是由数据控制模块传输来的。WEB页面模块在显示WEB页面时,需要判断WEB页面中是否需要加载共享数据,并在确定需要加载共享数据时,向数据控制模块发送查询请求。
WEB页面模块由加载子模块和显示子模块组成。
显示子模块主要用于显示页面流中的显示页面。
加载子模块主要用于判断页面流的显示页面中是否需要加载共享数据,如果确定需要加载共享数据,则将查询请求传输至数据控制模块,查询请求中携带有需要加载的共享数据信息,如共享数据的存储路径、存储名称等;如果确定不需要加载共享数据,则该判断过程结束。加载子模块在接收到数据控制模块传输来的共享数据时,将该共享数据加载到显示子模块显示的页面中。
数据控制模块主要用于对共享数据模块中存储的共享数据进行存储管理,并将需要显示的共享数据传输至WEB页面模块。其具体实现过程为:数据控制模块在接收到WEB页面模块传输来的查询请求时,数据控制模块根据该查询请求中携带的信息如共享数据的存储路径、存储名称等,到共享数据模块中查找对应的共享数据,并将该查找获得的共享数据传输至WEB页面模块中。数据控制模块在提交页面中的共享数据进行识别,并根据识别出的共享数据控制共享数据模块对共享数据模块中存储的共享数据进行存储管理。
从上面的描述可以看出,数据控制模块实现的功能主要为:查询共享数据和共享数据的存储管理。这里的存储管理包括:保存节点数据、插入节点数据、删除节点数据、修改节点数据等。数据控制模块可以根据提交页面中的数据属性确定提交页面中的共享数据,本发明中的数据属性包括:私有数据、共享数据。数据控制模块可以根据为页面中数据设置的数据在客户端中的存储路径、数据的存储名称对共享数据模块中存储的共享数据进行存储管理。数据控制模块传输至共享数据模块中的数据可以为基于XML格式的共享数据。
数据控制模块由查询子模块、保存子模块、插入子模块、删除子模块和修改子模块组成。
查询子模块主要用于在接收到加载子模块传输来的查询请求时,从共享数据模块存储的共享数据中查找对应的共享数据,并将查找到的共享数据传输至加载子模块。
保存子模块主要用于根据显示页面中的数据属性,来识别显示页面中的共享数据,保存子模块在确定该共享数据需要保存时,控制共享数据模块增加存储节点数据。
插入子模块主要用于根据显示页面中的数据属性,来识别显示页面中的共享数据,插入子模块在确定该共享数据需要在指定节点中插入存储时,控制共享数据模块在指定节点中插入存储该共享数据。
删除子模块主要用于根据显示页面中的数据属性,来识别显示页面中的共享数据,删除子模块在确定该共享数据需要删除时,控制共享数据模块删除存储的节点数据。
修改子模块主要用于根据显示页面中的数据属性,来识别显示页面中的共享数据,修改子模块在确定该共享数据需要修改时,控制共享数据模块修改存储的对应节点数据。
本发明的浏览器加载一个WEB页面的具体实现过程包括如下6个步骤。
在步骤1、WEB页面模块向服务器发送加载页面请求。
步骤2、服务器根据加载页面请求向WEB页面模块返回具体页面的详细信息。
步骤3、WEB页面模块根据服务器端返回的页面的详细信息,分析出该页面中哪些元素需要查询共享数据。
步骤4、WEB页面模块发送查询请求给数据控制模块,使数据控制模块查询共享数据。
步骤5、数据控制模块根据查询请求向数据共享模块查询具体的共享数据,并将查询到的共享数据返回给WEB页面模块。
步骤6、WEB页面将数据控制模块传输来的共享数据加载到服务器传输来的页面的相应元素中,并显示加载后的页面。
下面结合一个客户在网上购物的例子对本发明的WEB页面流中数据共享的方法进行详细说明。
设定客户在网上购物的过程包括如下4个步骤:
步骤1、登记客户资料。客户资料包括客户姓名如张三、性别如男、登陆时间如下午2点等详细信息。
步骤2、客户选购商品。在选购过程中,客户可以一次选购多件不同的商品、或者多件相同的商品。
步骤3、客户选择付费帐户。在付费过程中,客户可以通过多家银行的多张卡来购买不同的商品。
步骤4、客户确定购买。
针对上面描述的客户在网上购物的过程,本发明提供的WEB页面流中数据共享方法的设计过程如附图3所示。
图3中、在步骤3-1、本发明首先需要定义一个框架页面,这个框架页面分为三个部分,即数据区、控制区和显示区,框架页面如附图4所示。
数据区用于保存共享数据,并且数据区中保存的共享数据在对应页面流的整个生命周期内都是有效的。
控制区用于控制数据区中存储的共享数据的显示、隐藏,以及对数据区中存储的共享数据进行查询,向数据区中增加存储共享数据,删除数据区中存储的共享数据,修改数据区中存储的共享数据。在调试的过程中可以通过控制区调试定位程序问题。
显示区用于显示客户端与服务器之间传输的页面流中的各个具体的页面。
在框架页面发布以后,数据区、控制区默认是看不到的,只有显示区可见;在调试框架页面的时候,可以设置数据区、控制区可见。
框架页面的HTML示意代码如下:
<frameset rows=″*″cols=″167*,70*,677*″framespacing=″0″
frameborder=″NO″border=″0″>
<frame src=″dataFrme.html″name=″dataFrame″>
<frame src=″controlFrame.html″name=″controlFrame″>
<frame src=″pageFlowFrame.html″name=″pageFlowFrame″>
</frameset>
在步骤3-2、客户端浏览器分析页面流,确定页面流的组成部分,如在上面的网上购物的例子中,包括四个组成部分,即客户资料、订购商品、费用支付、客户确认购买。
在步骤3-3、分析页面流中组成页面的具体数据、以及页面需要的共享数据,如在上面的网上购物的例子中,页面流包括三个页面,即:客户资料页面、商品订购页面、支付页面和客户确认页面。
客户资料页面的示意效果可以如附图5所示。图5中的客户资料页面包括:客户姓名、性别、出生年月、登陆时间等详细信息数据,由于在商品订购页面和支付页面中需要显示“张三先生你好,你于下午2点登陆本站”的信息,所以,客户资料页面中的姓名、性别、登陆时间为共享数据。
图5中的客户姓名的HTML代码示意如下:
<input type=″text″name=″shareData″hw_isShared=″true″
hw_position=″ShareData/Customer″hw_name=″Name″>
在上述HTML代码中,输入文本框有三个私有属性,即hw_isShared=″true″、hw_position=″ShareData/Customer″和hw_name=″Name″,其中,当hw_isShared属性等于″true″时,表示“客户姓名”为共享数据,当hw_isShared属性等于″false″、或者没有hw_isShared属性时,表示“客户姓名”为私有数据。hw_position属性表示共享数据“客户姓名”在框架页面数据区中的存储路径,hw_name表示共享数据“客户姓名”在框架页面数据区中的存储名称,另外,name=″shareData″在加载、保存共享数据时会用到。
点击图5中的“下一步”按钮时,浏览器先调用数据控制类保存功能保存共享数据,然后,再提交给服务器。
商品订购页面的示意效果可以如附图6所示。图6中的商品订购页面包括:可订购商品列表和客户已订购商品列表;由于在支付页面,客户端可以使用不同卡为商品付费,所以,图6中的已订购商品列表为共享数据。
在图6中,“张三”、“先生”、“下午2点”是从“客户资料页面”中识别并保存的共享数据,这些共享数据在“商品订购页面”加载时,从浏览器存储的共享数据中获取,并显示在图6的页面中。
获取共享数据并加载在图6页面中的HTML代码示意如下:
<script language=″javascript″>
function My_Load()
{
//调用数据控制类加载功能加载共享数据
RestoreNodeData();
}
My_Load();
</script>
支付页面中包括:客户已订购商品列表和银行卡号对应银行名称列表;其中,客户已订购商品列表为共享数据。银行卡号和银行名称为共享数据。
客户确认页面显示客户所有的输入信息如客户资料、订购商品、支付信息等,在客户确认信息正确后,点击客户确认页面中的“购买”按钮,浏览器将数据传给服务器,整个网上购物的页面流就结束了。
步骤3-4、本发明可以使用XML格式来定义浏览器存储的共享数据格式,即共享数据以XML格式保存在框架页面的数据区中。
上述网上购物例子中的共享数据的格式为:
<xmlid=″hw_ShareData″>
<?xml version=″1.0″encoding=″gb2312″?>
<ShareData>
<!--客户资料-->
<Customer>
<Name>张三</Name>
<Sex>男</Sex>
<LoginTime>下午2点</LoginTime>
</Customer>
<!--订购商品列表-->
<Offers>
<!--商品1信息-->
<Offer>
<Name>商品1</Name>
<Description>商品1的简单描述</Description>
<Price>100</Price>
<Unit>元</Unit>
</Offer>
<!--商品2信息-->
<Offer>
<Name>商品2</Name>
<Description>商品2的简单描述</Description>
<Price>200</Price>
<Unit>元</Unit>
</Offer>
</Offers>
<!--支付信息-->
</ShareData>
</xml>
步骤3-5、定义共享数据控制类,共享数据控制类用于控制“使用XML定义的共享数据”。数据控制类是针对所有页面流的。
共享数据控制类提供如下功能:
1)查询节点数据:根据输入的查询路径获取对应的共享数据,如当输入条件为“ShareData/Customer/Name”时,共享数据控制类会返回客户姓名,如“张三”。
查询节点数据的HTML代码示意如下:
<script language=″javascript″>
//公共函数,获取共享XML数据对象
function GetXmlObj()
{
//查询框架页面数据区document
var dataDoc=window.top.frames(′数据区′).document;
if(dataDoc!=null)
{
//获取dataDoc中ID为hw_ShareData的XML节点
var objXML=dataDoc.getElementById(‘hw_ShareData’).XMLDocument;
return objXML;
}
return null;
}
//查询节点数据
function GetNodeData(expression,retValue)
{
var xmlObj=GetXmlObj();
if(xmlObj!=null)
{
//返回节点的值
var objNode=xmlObj.selectSingleNode(expression);
if(objNode!=null)
{
retValue=objNode.text;
return true;
}
}
return fase;
}
</script>
2)增加节点数据:在指定节点插入数据。
增加节点数据的HTML代码示意如下:
<script language=″javascript″>
function CreateNodeData(parentNodeExpression,tagName,value)
{
//获取共享数据XML对象,具体说明参见“查询节点数据”
var xmlObj=GetXmlObj();
if(xmlObj!=null)
{
var parentObjNode=xmlObj.selectSingleNode(parentNodeExpression);
if(parentObjNode!=null)
{
var newNode=xmlObj.createElement(tagName);
var textNode=xmlObj.createTextNode(value);
newNode.appendChild(textNode);
parentObjNode.appendChild(newNode);
return true;
}
}
return false;
}
</script>
3)删除节点数据:删除指定节点的数据。
删除节点数据的HTML代码示意如下:
<script language=″javascript″>
function DelNode(expression)
{
//获取共享数据XML对象,具体说明参见“查询节点数据”
var xmlObj=GetXmlObj();
if(xmlObj!=null)
{
var objNode=xmlObj.selectSingleNode(expression);
if(objNode!=null)
{
objNode.parentNode.removeChild(objNode);
return true;
}
}
return false;
}
</script>
4)修改节点数据:修改指定节点的数据。
修改节点数据的HTML代码示意如下:
<script language=″javascript″>
function ModifyNodeData(parentNodeExpression,tagName,value)
{
var xmlObj=GetXmlObj();
if(xmlObj!=null)
{
var objNode=xmlObj.selectSingleNode(parentNodeExpression+“/”+tagName);
//如果节点存在,那么设置节点的值
if(objNode!=null)
{
objNode.text=value;
return true;
}
//如果节点不存在,那么创建该节点
else
{
CreateNodeData(parentNodeExpression,tagName,value);
}
}
return false;
}
</script>
5)保存节点数据:保存页面中ID为″shareData″、且属性hw_isShared为″true″的所有元素数据。
保存节点数据的HTML代码示意如下:
<script language=″javascript″>
function SaveNodeData()
{
//查询当前页面所有需要共享的数据
var neededSaveObjs=document.getElementsByName(‘shareData’);
//遍历每个节点
for(var i=0;i<neededSaveObjs.length;i++)
{
var obj=neededSaveObjs.item(i);
if(obj.type!=null)
{
//下面只示意”text”类型节点值的保存
if(obj.type==″text″)
{
//共享数据标志为true
if(obj.hw_isShared==″true″)
{
//节点不存在会自动创建该节点
ModifyNodeData(obj.hw_position,obj.hw_name,obj.value);
}
}
else if(obj.type==″select″)
{
……
}
……
}
}
return“”;
}
</script>
6)加载节点数据:将共享数据加载到页面中的ID为″shareData″、且属性hw_isShared为″true″的页面元素中。
加载节点数据的HTML代码示意如下:
<script language=″javascript″>
function RestoreNodeData()
{
//查询当前页面所有需要加载的元素
var neededSaveObjs=document.getElementsByName(‘shareData’);
//遍历每个节点
for(var i=0;i<neededSaveObjs.length;i++)
{
var obj=neededSaveObjs.item(i);
if(obj.type!=null)
{
//下面只示意”text”类型节点值的加载
if(obj.type==″text″)
{
if(obj.hw_isShared==″true″)
{
var value=“”;
//查询节点在共享数据区的值
if(GetNodeData(obj.hw_position+”/”+obj.hw_name,value)==true)
{
//设置页面元素的值
obj.value=value;
}
}
}
else if(obj.type==″select″)
{
……
}
……
}
}
return“”;
}
</script>
下面结合附图7对本发明的WEB页面流中数据共享的方法进行说明。
图7中,在步骤1、用户输入框架页面的网址,浏览器向服务器发送加载框架页面请求,浏览器根据服务器返回的结果显示页面。这里的框架页面中的数据区、控制区默认是不显示的。
到步骤2、框架页面中的显示区为页面流中的具体页面,客户端浏览器根据服务器返回的结果显示页面流中的具体页面。
到步骤3、浏览器在页面流中的具体页面加载结束的时候,调用数据控制类的加载功能来加载共享数据,以更新页面中相应元素的数据。
到步骤4、用户完成页面数据输入以后,将页面提交给服务器。
到步骤5、在步骤4的“页面提交”函数中需要先调用数据控制类的数据保存功能,保存页面中的共享数据,以便供后续的页面使用。返回到步骤2。
重复上述步骤2至步骤5,直到整个页面流的处理过程结束。
从上述描述中可以看出,本发明通过采用客户端浏览器来识别、并保存提交页面中的共享数据的方法,解决了页面流中的数据共享问题,即本发明通过使浏览器来识别、存储提交页面中的共享数据,在浏览器从一个页面提交到另外一个页面时,就不需要将数据先发送到服务器、再让服务器将共享数据回传给浏览器了,这样,浏览器和服务器之间交互的时候就只需要传送私有数据,减少了浏览器和服务器之间传送的数据量,从而提高了程序的执行速度;采用本发明中的浏览器能够使服务器不再需要关心页面中的共享数据和私有数据,有效的降低了开发B/S程序的复杂性,而且,也不需要服务器对垃圾数据进行清理,使服务器对共享数据的处理过程变的非常简单,从而有效降低了服务器的负载、提高了服务器性能。
虽然通过实施例描绘了本发明,本领域普通技术人员知道,本发明有许多变形和变化而不脱离本发明的精神,本发明的申请文件的权利要求包括这些变形和变化。