CN101217507A

CN101217507A - 提供及替换网页中数据的方法、装置及系统

Info

Publication number: CN101217507A
Application number: CNA2007103078474A
Authority: CN
Inventors: 马丁
Original assignee: Shenzhen Xunlei Network Technology Co Ltd
Current assignee: Shenzhen Xunlei Network Technology Co Ltd
Priority date: 2007-12-29
Filing date: 2007-12-29
Publication date: 2008-07-09
Anticipated expiration: 2027-12-29
Also published as: CN101217507B

Abstract

本发明公开了互联网领域的提供及替换网页中数据的方法、装置及系统，以解决现有采用xml技术进行网页模板替换的方案存在跨域、数据冗余，以及数据包文件量大等问题。提供待替换数据的方法包括：服务器收到客户端发来的网页数据替换请求消息；服务器向客户端提供JSON数据页，该JSON数据页中包含数据节点的标识。替换网页中数据的方法包括：客户端收到服务器提供的JSON数据页，该JSON数据页中包含数据节点的标识；客户端获取网页中第一待替换数据对应的节点标识；客户端以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配；客户端以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

Description

提供及替换网页中数据的方法、装置及系统

技术领域

本发明涉及互联网领域，特别是涉及提供及替换网页中数据的方法、装置及系统。

背景技术

在web网页开发技术中，常采用模板替换技术以方便进行网页中的数据更新，模板替换为基于预先定义某种规则的一组固定的页面格式，由不同的导入数据而对固定标记进行替换为固定数据节点的一种操作。

现有的网页模板替换通常基于xml(Extensible Markup Language，也即可扩展标记语言，是一种数据存储语言，其使用简单的标记描述数据)技术，即服务器收到客户端的数据访问请求后，直接返回xml格式的数据，客户端根据一些预设的框架(如：ajax框架)进行解析与替换操作。

但是这种方案存在以下问题：

1、xml跨域问题。由于xml自身安全策略的设定，单纯xml无法进行跨域名操作，需要一个桥接页面(中转页面)来传送数据，这样增加了服务器的开销。

2、xml数据冗余。由于xml格式的设定要求，每一个节点都需要标记名称，因此有大量的冗余字节。

例如：

<？xml version＝″1.0″encoding＝″gb2312″？>

<category id＝″409″category_type＝″0″res_num＝″2″added_res_num＝″0″

comment_num＝″0″flower_num＝″24000″egg_num＝″0″show_status＝″1″

last_time＝″2007-07-13 10:38:35″>

<category_name><！[CDATA[私有专辑]]></category_name>

<！[CDATA[&nbsp；]]>

</tags>

其中<？xml version＝″1.0″encoding＝″gb2312″？>、categories、tags节点名称多次重复，浪费了有效数据的字节数。

3、各种ajax框架包文件量大。由于xml这种通用的格式设定，伴随而出了多种应用框架开发包，如：Dojo、Prototype、jQuery，其文件量少则20K，多则60K。所述开发包中的很多功能并不会被服务器使用，但还是被服务器加载，这样就会造成服务器资源(如：带宽、处理等)的浪费。

综上，现有采用xml技术进行网页模板替换的方案存在跨域、数据冗余，以及数据包文件量大等问题。

发明内容

本发明实施例涉及了提供及替换网页中数据的方法、装置及系统，以解决现有采用xml技术进行网页模板替换的方案存在跨域、数据冗余，以及数据包文件量大等问题。

本发明实施例的一种提供待替换数据的方法，包括下列步骤：服务器收到客户端发来的网页数据替换请求消息；服务器向客户端提供JSON数据页，该JSON数据页中包含数据节点的标识。

本发明实施例的一种替换网页中数据的方法，包括下列步骤：客户端收到服务器提供的JSON数据页，该JSON数据页中包含数据节点的标识；客户端获取网页中第一待替换数据对应的节点标识；客户端以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配；客户端以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

本发明实施例的一种服务器，包括：请求接收单元，用于接收客户端发来的网页数据替换请求消息；数据页提供单元，用于向客户端提供JSON数据页，该JSON数据页中包含数据节点的标识。

本发明实施例的一种客户端，包括：数据页接收单元，用于接收服务器提供的JSON数据页；获取单元，用于获取网页中第一待替换数据对应的节点标识；匹配单元，用于以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配；替换单元，用于以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

本发明实施例的一种提供及替换网页中数据的系统，包括：客户端和服务器；客户端，用于向服务器发送网页数据替换请求消息，并接收服务器提供的JSON数据页，以及获取网页中第一待替换数据对应的节点标识，以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配，并以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据；服务器，用于接收客户端发来的网页数据替换请求消息，并向客户端提供JSON数据页，JSON数据页中包含数据节点的标识。

本发明基于JSON技术，将前端开发与后台开发相互分离。

从服务器侧看，相对xml格式更简洁，冗余数据少；有数据轻量化，无跨域问题，数据通用性好，解析速度快，跨浏览器兼容性好等优点。

从客户端侧看，根据业务逻辑编写模版替换脚本程序的开发量相对于xml技术较小，并且具有标准化，模版化，自动化，通用化，执行效率高等优点。

附图说明

图1为本发明实施例的一种提供待替换数据的方法步骤流程图；

图2为本发明实施例的一种替换网页中数据的方法步骤流程图；

图3为本发明的服务器实施例1的结构示意图；

图4为本发明的服务器实施例2的结构示意图；

图5为本发明的服务器实施例3的结构示意图；

图6为本发明的客户端实施例1的结构示意图。

具体实施方式

为了解决现有采用xml技术进行网页模板替换的方案存在跨域、数据冗余，以及数据包文件量大等问题，因此发明人提出基于JSON技术，将前端(客户端)开发与后台(服务器端)开发相互分离的方案进行web开发。

JSON(Javascript Object Notation)：JSON是一种轻量级的数据交换格式，其易于人阅读和编写，同时也易于机器解析和生成。它基于JavascriptProgramming Language，Standard ECMA-262 3rd Edition-December 1999的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C，C++，C#，Java，Javascript，Perl，Python等)。这些特性使JSON成为web开发中理想的数据交换语言，它能使JavaScript轻松的读取复杂的数据结构。JSON概念简单，即服务器直接将客户端所请求的数据对象生成Javascript语句，并向客户端发送，客户端获取后，直接用eval方法来获得该数据对象，较之于采用XML方式，这样可省去客户端用于解析XML的性能损失。

以下分别描述本发明的方法、装置及系统。

基于上述前端开发与后台开发相互分离的思路，本发明实施例提出了一种提供待替换数据的方法，参见图1所示，包括下列主要步骤：

S11、服务器收到客户端发来的网页数据替换请求消息。

S12、服务器向客户端提供JSON数据页。

以下通过两个实施例进一步详述提供待替换数据的方法。

方法实施例1、服务器向客户端提供对应的静态的JSON数据页，包括下列步骤：

100、服务器定期查询数据库，更新生成静态的JSON数据页。

该数据库根据需求把网页中需要替换的数据汇集在一起，即存储了网页中需要替换的数据值，例如一个网络论坛中各用户的基本信息及所发表言论等。

可通过服务器的cgi(Common Gateway Interface)程序更新生成静态JSON数据页，JSON数据页中包含数据节点的标识。静态JSON数据页可以html页作为JSON格式数据的载体，将JSON格式的数据对象携带于html页的html标记中。

进一步为了对静态JSON数据页中的JSON格式数据进行保护，还可对JSON格式的数据设置域(domain)信息。

以下为一个静态JSON数据页的实例：

<HTML><HEAD><META http-equiv＝Content-Type content＝″text/html；

charset＝gb2312″>

document.domain＝″gougou.com″；

varjsonObj＝{

cid：″00E02CC2A96542492075A0473C67F0F16922896C″，

totalCmtNum：442，

orderby：1，

speed_mark_cnt_0：70，

speed_mark_cnt_1：73，

speed_mark_cnt_2：133，

quality_mark_cnt_0：6079，

quality_mark_cnt_1：241，

quality_mark_cnt_2：387，

comment：[

{id：219，commenter：″zhangzhenhua20″，title：″相当不错

″，content：″相当不错的版本″，time：″2007-07-15 16:10:37″，rplNum：1，

usableNum：28，unusableNum：14，

userInfo：{valid：true，level：9，rank：″大校″，nick_name：″你好″}，

blog：{valid：true，

pic：″http：//t11.blogimg.xunlei.com/107/60/zhangzhenhua20/0.gif″}，

reply：[

{replyer：″okokmail″，content：″求助″，time：″2007-08-10

18:25:29″}，

{}]

}

其中，document.domain＝″gougou.com″的设定，在非gougou.com域下加载就会引起浏览器脚本错误。如此可以进行一定程度的数据保护。

另外由于xml数据每个节点值都需要列出节点名，而且节点结束还需要再列出节点名，这样当节点值比较多时就会有很多冗余字节。而本发明基于JSON技术，相对xml格式更简洁，冗余数据少；有数据轻量化，无跨域问题，数据通用性好，解析速度快，跨浏览器兼容性好等优点。而且对于开发人员可读性比较清晰。

101、客户端判定需要替换网页中的数据时，通过iframe等手段向服务器发送网页数据替换请求消息。

102、服务器向客户端提供相应的静态JSON数据页。

由于本实施例中服务器预先已生成了全部或部分静态JSON数据页，所以服务器收到客户端发来的网页数据替换请求消息后，依据网页与静态JSON数据页的对应关系，直接从本地(即该服务器)保存的静态JSON数据页中查找对应的静态JSON数据页，并向客户端提供查找到的静态JSON数据页，而无需再去查询数据库，这样就节省了响应时间，从而给用户带来更好的体验。所述对应关系可预先在开发时约定，例如通过网页的URL地址，或所述静态JSON数据页的文件标识等将网页与静态JSON数据页关联起来，则客户端发送的所述网页数据替换请求消息中包含需要访问网页的URL地址或所需获取的静态JSON数据页的文件标识，服务器通过根据所述对应关系查找对应的静态JSON数据页。

方法实施例2、服务器即时生成并向客户端提供JSON数据页，包括下列步骤：

201、客户端判定需要替换网页中的数据时，通过iframe等手段向服务器发送网页数据替换请求消息。

202、服务器即时生成并向客户端提供JSON数据页。

服务器根据所述网页数据替换请求消息，通过服务器的cgi程序从所述数据库中实时更新生成JSON数据页，可以html作为JSON格式数据页的载体，将JSON格式的数据对象携带于html页的html标记中。进一步为了对JSON数据页中的JSON格式数据进行保护，还可对JSON格式的数据设置域(domain)信息。之后，服务器将生成的JSON数据页提供给客户端。

至此，本发明的提供待替换数据的方法描述完毕，以下描述本发明的替换网页中数据的方法。

基于上述前端开发与后台开发相互分离的思路，并与上述提供待替换数据的方法相应，本发明实施例还提出了一种替换网页中数据的方法，参见图2所示，包括下列主要步骤：

S21、客户端收到服务器提供的JSON数据页。

S22、客户端获取网页中第一待替换数据对应的节点标识。

S23、客户端以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配。

S24、客户端以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

以下通过一实施例进一步详述替换网页中数据的方法，并且该实施例可与上述方法实施1或方法实施2接续。

方法实施3、客户端收到服务器提供的JSON数据页后，完成数据替换。

301、客户端收到服务器提供的JSON数据页。

302、客户端加载待替换数据的网页，并从中获取该网页中第一待替换数据对应的节点标识。

303、客户端采用第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配。常用的方法为采用正则表达式进行匹配。正则表达式是进行文本匹配的工具，可在给定的字符串中，寻找与给定的正则表达式相匹配的部分。

304、客户端以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

上述步骤301至304在具体实现中可通过脚本程序实现。当待替换数据的网页加载到html最后一行代码启动脚本程序后，脚本程序将自动创建一个iframe去加载JSON数据页。同时去该网页中获取需要替换的数据节点标识，然后递归对所需要替换的数据进行替换。

305、根据替换后的数据，生成html代码，并送回网页进行显示。

以下为待替换数据的网页的相关说明，以及数据替换实例：

1、网页页面所要替换的部分运用html标签(div、span等)来封装。

2、在所替换数据的开头和结尾可用<％repeat_0 match＝″xxx″％>及<％_repeat_0％>标记。其中xxx为所要替换数据对应的节点标记。

3、其中在“[]”中的例如[％＝id％]、[％＝content@pf＝″showContent(str)″％]等(参见下文中代码片段)，为需要替换的节点值(节点值标记该节点的值，也就是对象的键值，这个值是根据数据库中对应表里对应字段的某一个值，具体根据业务逻辑查数据库)；@pf＝″showContent(str)为对节点值进行预处理函数的写法，其会将替换出来的值先导入到showContent(str)这个函数中按需求处理后再显示。

代码片段如下：

<％repeat_0 match＝″jsonobj.comment″％>

[％＝commenter@pf＝″showCmtBlogUinTemp(str)″％]

<dl>

<dt><span><div style＝″display：none″>[％＝id％]</div><a

href＝″javascript：；″onclick＝″addComment(this，1)″>支持

</a><em>[％＝usableNum％]</em>&nbsp； <a href＝″javascript：；″

onclick＝″addComment(this，0)″>反对</a><em>[％＝unusableNum％]</em>&nbsp；

<a alt＝″点击回复本评论″href＝″[％＝id@pf＝&quot；getReplyHref(str)&quot；％]″

target＝_blank>回复

</a><em>[％＝rplNum％]</em></span>[％＝userInfo@pf＝″showCmtNick(str)″％]&

nbsp；<em>发表于[％＝time％]</em></dt>

<dd>[％＝content@pf＝″showContent(str)″％]</dd>

</dl>

<％_repeat_0％>

</div>

<％repeat_0 match＝″jsonobj″％>

共<em>[％＝totalCmtNum@pf＝″setTotalNum(str)″％]</em>，显示

<％_repeat_0％>

</div>

注：代码片段中的“[]”中的内容为需要替换的节点值，“[]”还可为“<>”、“<！-- -->”所替换，可根据用户设定的开发环境，当某一种标记格式被其他功能占用时，选择另一种标记格式。

由于本发明基于JSON技术，所以客户端根据业务逻辑，编写模版替换脚本程序的开发量相对于xml技术较小(xml需要额外的JavaScript代码进行分析以显示结果)。模板替换脚本程序可用javascript编写类似ajax的异步读取数据，并进行数据自动化模板替换的程序类(类似cgi程序)。其优点在于标准化，模版化，自动化，通用化，其负责相关数据的抽取与替换，使客户端执行效率高。

至此，本发明的替换网页中数据的方法描述完毕，以下通过3个实施例描述本发明的服务器1。

服务器实施例1、参见图3所示，其包括：请求接收单元11和数据页提供单元12。

请求接收单元11，用于接收客户端发来的网页数据替换请求消息。

数据页提供单元12，用于向客户端提供JSON数据页，该JSON数据页中包含数据节点的标识。

服务器实施例2、参见图4所示，其包括：请求接收单元11、第一查询单元13、第一生成单元14、保存单元15、查找单元16，以及数据页提供单元12。

第一查询单元13，用于定期查询数据库，该数据库存储了网页中需要替换的数据值。

第一生成单元14，用于根据第一查询单元13的查询结果，更新生成静态的JSON数据页。

保存单元15，用于保存第一生成单元14更新生成的JSON数据页。

查找单元16，用于根据所述网页数据替换请求消息，从保存单元15中查找对应的JSON数据页，并传送给数据页提供单元12。

数据页提供单元12，用于向客户端提供JSON数据页。

服务器实施例3、参见图5所示，其包括：请求接收单元11、第二查询单元17、第二生成单元18和数据页提供单元12。

第二查询单元17，用于根据所述网页数据替换请求消息查询数据库，该数据库存储了网页中需要替换的数据值。

第二生成单元18，用于根据第二查询单元17的查询结果，生成JSON数据页，并将生成的JSON数据页传送给数据页提供单元12。

数据页提供单元12，用于向客户端提供JSON数据页。

至此，本发明的服务器1描述完毕，以下通过1个实施例描述本发明的客户端2。

客户端实施例1、参见图6所示，其包括：数据页接收单元21、获取单元22、匹配单元23和替换单元24。

数据页接收单元21，用于接收服务器提供的JSON数据页。

获取单元22，用于获取网页中第一待替换数据对应的节点标识。

匹配单元23，用于以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配。

替换单元24，用于以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

至此，本发明的客户端2描述完毕，以下通过3个实施例描述本发明的系统。

系统实施例1、包括：客户端和服务器。

客户端，用于向服务器发送网页数据替换请求消息，并接收服务器提供的JSON数据页，以及获取网页中第一待替换数据对应的节点标识，以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配，并以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

服务器，用于接收客户端发来的网页数据替换请求消息，并向客户端提供JSON数据页，JSON数据页中包含数据节点的标识。

系统实施例2、包括：客户端、服务器和数据库。

数据库，用于存储网页中需要替换的数据值。

服务器，用于定期查询数据库，根据查询结果，更新生成静态的JSON数据页。

该服务器在收到客户端发来的网页数据替换请求消息后，从该服务器中查找对应的JSON数据页，并向客户端提供查找到的JSON数据页，JSON数据页中包含数据节点的标识。

系统实施例3、包括：客户端、服务器和数据库。

数据库，用于存储网页中需要替换的数据值。

服务器，用于根据所述网页数据替换请求消息查询数据库，并根据查询结果生成JSON数据页，提供给客户端。

综上，本发明基于JSON技术，将前端开发与后台开发相互分离。

从服务器侧看，相对xml格式更简洁，冗余数据少；有数据轻量化，无跨域问题，数据通用性好，解析速度快，跨浏览器兼容性好等优点；而且对于开发人员可读性比较清晰；并且可降低耦合，提高效率。进一步若对JSON数据页中的JSON格式的数据进行域设置，还可达到一定程度的数据保护。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims

1.一种提供待替换数据的方法，其特征在于，包括下列步骤：

服务器收到客户端发来的网页数据替换请求消息；

服务器向客户端提供JSON数据页，该JSON数据页中包含数据节点的标识。

2.如权利要求1所述的方法，其特征在于，还包括：

服务器定期查询数据库，该数据库存储了网页中需要替换的数据值；

服务器根据查询结果，更新生成JSON数据页。

3.如权利要求2所述的方法，其特征在于，服务器向客户端提供JSON数据页包括下列步骤：

服务器根据所述网页数据替换请求消息，从该服务器中查找对应的JSON数据页，并向客户端提供查找到的JSON数据页。

4.如权利要求1所述的方法，其特征在于，还包括：

服务器收到客户端发来的网页数据替换请求消息后，查询数据库，该数据库存储了网页中需要替换的数据值；

服务器根据查询结果，生成JSON数据页。

5.如权利要求1所述的方法，其特征在于，所述JSON数据页以html为载体，则将JSON格式的数据对象携带于html页的html标记中。

6.如权利要求1所述的方法，其特征在于，服务器在向客户端提供JSON数据页之前，为该JSON数据页中包含的JSON格式的数据设置域信息。

7.一种替换网页中数据的方法，其特征在于，包括下列步骤：

客户端收到服务器提供的JSON数据页，该JSON数据页中包含数据节点的标识；

客户端获取网页中第一待替换数据对应的节点标识；

客户端以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配；

客户端以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

8.如权利要求7所述的方法，其特征在于：

客户端采用正则表达式，将第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配。

9.如权利要求7所述的方法，其特征在于，客户端完成替换操作后，还包括步骤：

客户端生成所需的html代码，并送回所述网页的页面进行显示。

10.一种服务器，其特征在于，包括：

请求接收单元，用于接收客户端发来的网页数据替换请求消息；

数据页提供单元，用于向客户端提供JSON数据页，该JSON数据页中包含数据节点的标识。

11.如权利要求10所述的服务器，其特征在于，所述服务器中还包括：

第一查询单元，用于定期查询数据库，该数据库存储了网页中需要替换的数据值；

第一生成单元，用于根据第一查询单元的查询结果，更新生成静态的JSON数据页；

保存单元，用于保存第一生成单元更新生成的JSON数据页。

12.如权利要求11所述的服务器，其特征在于，所述服务器中还包括：

查找单元，用于根据所述网页数据替换请求消息，从保存单元中查找对应的JSON数据页，并传送给数据页提供单元。

13.如权利要求10所述的服务器，其特征在于，所述服务器中还包括：

第二查询单元，用于根据所述网页数据替换请求消息查询数据库，该数据库存储了网页中需要替换的数据值；

第二生成单元，用于根据第二查询单元的查询结果，生成JSON数据页，并将生成的JSON数据页传送给数据页提供单元。

14.一种客户端，其特征在于，包括：

数据页接收单元，用于接收服务器提供的JSON数据页；

获取单元，用于获取网页中第一待替换数据对应的节点标识；

匹配单元，用于以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配；

替换单元，用于以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据。

15.一种提供及替换网页中数据的系统，其特征在于，包括：客户端和服务器；

客户端，用于向服务器发送网页数据替换请求消息，并接收服务器提供的JSON数据页，以及获取网页中第一待替换数据对应的节点标识，以第一待替换数据对应的节点标识与JSON数据页中包含的数据节点标识进行匹配，并以匹配得到的节点标识对应的JSON格式的数据替换第一待替换数据；

16.如权利要求15所述的系统，其特征在于，所述系统还包括：

数据库，用于存储网页中需要替换的数据值；

服务器定期查询该数据库，并根据查询结果，更新生成JSON数据页。

17.如权利要求16所述的系统，其特征在于，所述服务器根据所述网页数据替换请求消息，从该服务器中查找对应的JSON数据页，并向客户端提供查找到的JSON数据页。

18.如权利要求15所述的系统，其特征在于：

服务器根据查询结果，生成JSON数据页。