一种HTML页面控件变化的定位方法和系统 【技术领域】
本发明涉及计算机技术领域，尤其涉及一种HTML页面控件变化的定位方法和系统。
背景技术
AJAX(Asynchronous JavaScript and XML)，即异步JavaScript脚本语言和可扩展标记语言XML，是一种创建交互式网页应用的网页开发技术，基于AJAX实现的WEB页面无刷新技术则是通过AJAX从服务端程序中获得需要更改的HTML控件，然后在页面上通过JavaScript对该控件进行更新。
HTML(HyperText Mark-up Language)，即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。实现页面无刷新重点在于对HTML页面中需要更新的控件进行定位。
目前实现的方式有2种：一种是通过编码的方式手动指定需要更新的HTML控件；另一种则是将可能需要进行无刷新更新的控件使用DIV元素进行包裹，然后对包裹的控件进行更新。其中DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
现有技术中的HTML系统控件页面变化的定位方案存在以下缺点：
1、带宽占用过多。现有的定位方式仅仅指定了需要更新的HTML控件，并无法预知这些控件在页面执行的过程中是否发生了变化。因此，每次页面的执行都会对这些指定的控件进行更新，即使这些控件没有发生任何的变化。这就造成了每一个操作都会需要通过AJAX方式从服务端取得这些控件的HTML控件代码，没有做到控件有变化则更新，没有变化则不更新。
2、使用复杂。使用DIV进行包裹的方式需要对原有页面进行更改，而且由于DIV本身就是一个HTML控件，这就可能对HTML页面布局产生影响。另外，一旦页面需要撤销无刷新方式，又得对页面进行更改，删除这些用以包裹的DIV。
【发明内容】
本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种HTML页面控件变化的定位方法和系统，其可以不更改页面，自动定位页面执行过程中发生变化的控件。
本发明解决其技术问题所采用的技术方案是：
构造一种HTML页面控件变化的定位方法，其包括以下步骤：
A、分解页面操作前的控件代码，得到无子控件的多个独立控件，根据各自的原层级关系进行编号后，存储为数据1；
B、分解页面操作后的控件代码，得到无子控件的多个独立的控件，根据各自的原层级关系进行编号后，存储为数据2；
C、按编号层级从外向内的顺序，比较数据1和数据2中编号相同的控件代码，得到变化控件编号。
本发明所述的HTML页面控件变化的定位方法，其中，所述步骤C中，只比较具有相同编号的控件。
本发明所述的HTML页面控件变化的定位方法，其中，所述步骤C中，从层级的最外层开始，逐步向内层进行比较。
本发明所述的HTML页面控件变化的定位方法，其中，所述步骤C中，在比较控件代码时，如果两段控件代码相同，则进入到下一层级进行比较，如果两段控件代码不同，则记录这段不同的控件代码所对应的编号，并且不再进入到下一层级的比较。
本发明所述的HTML页面控件变化的定位方法，其中，在所述操作前的控件代码中包括三个控件，分别记作a控件、b控件、c控件；其中a控件内包含了b控件、c控件，而b控件包含了c控件；所述步骤A包括以下步骤：
A1、分解页面操作前的控件代码，得到独立的a控件、b控件、c控件；
A2、使用具有层级关系的编号方式分别对a控件、b控件、c控件进行编号，其中a控件编号仍为a，b控件编号为a-b，c控件编号为a-b-c；
A3、将步骤A2中得到的编号分别为a、a-b、a-b-c的控件中所包含的子控件去掉后，保存为数据1。
本发明所述的HTML页面控件变化的定位方法，其中，所述步骤B包括以下步骤：
B1、分解操作后的控件代码，得到a控件、b控件、c控件；
B2、使用具有层级关系的编号方式分别对a控件、b控件、c控件进行编号，其中a控件编号仍为a，b控件编号为a-b，c控件编号为a-b-c；
B3、将步骤B2中得到的控件a和a-b中所包含的子控件去掉后，保存为数据2。
本发明所述的HTML页面控件变化的定位方法，其中，所述步骤C包括以下步骤：
C1、比较数据1和数据2中的编号为a的控件，若不相同，则记录a控件的编号，若相同，则执行步骤C2；
C2、比较数据1和数据2中编号为a-b的控件，若不相同，则记录b控件的编号，若相同，则执行步骤C3；
C3、比较数据1和数据2中编号为a-b-c的控件，若不相同，则记录c控件的编号，若相同，则退出比较。
本发明还提供了一种HTML页面中控件变化的定位系统，其中，包括控件代码分解模块、编号及存储模块、比较模块和变化控件列表生成模块；其中，
所述控件代码分解模块，用于分解页面操作前的控件代码，得到无子控件的多个独立控件，以及分解页面操作后的控件代码，得到无子控件的多个独立的控件；
所述编号及存储模块，用于对分解前的页面操作前的多个独立控件，根据各自的原层级关系进行编号后，存储为数据1，以及对分解后的页面操作前的多个独立控件，根据各自的原层级关系进行编号后，存储为数据2；
所述比较模块，用于按编号层级从外向内的顺序，比较数据1和数据2中编号相同的控件代码，得到变化的控件编号；
所述变化控件列表生成模块，用于根据得到的变化的控件编号，生成变化控件编号列表。
本发明通过将页面操作前后的HTML页面控件进行分解、编号及比较，可准确判断出页面操作前后所变化的控件的编号，可自动定位发生更改的HTML控件，只定位发生更改的HTML控件，无变化的控件无需更新，有利于减少网络传输数据量，简化页面的无刷新开发与改造过程。
【附图说明】
下面将结合附图及实施例对本发明作进一步说明，附图中：
图1是本发明实施例的HTML页面控件变化的定位方法流程图；
图2是本发明实施例的HTML页面控件变化的定位系统原理框图。
【具体实施方式】
下面结合图示，对本发明的优选实施例作详细介绍。
本发明较佳实施例的HTML页面控件变化的定位方法流程图如图1所示，本实施例中以操作前的控件代码中包括ID分别为a、b、c的a控件、b控件、c控件来进行具体说明，其中a控件内包含了b控件、c控件，而b控件包含了c控件。页面HTML控件代码层次结构如下：
<div id＝”a”>
<div id＝”b”>
<div id＝”c”>
</div>
</div>
</div>
应当理解，上述控件代码在本实施例中仅用于结构上的示意，而与其所表示的具体含义无关，下面详细描述对以上控件代码变化的定位方法，包括以下步骤：
步骤S10、分解页面操作前的控件代码，得到无子控件的多个独立控件，根据各自的原层级关系进行编号后，存储为数据1，共包括以下三步：
第一步S11：分解以上HTML控件代码，得到独立的控件，其中：
a控件代码：
<div id＝”a”>
<div id＝”b”>
<div id＝”c”>
</div>
</div>
</div>
b控件代码：
<div id＝”b”>
<div id＝”c”>
</div>
</div>
c控件代码：
<div id＝”c”>
</div>
第二步S12、通过第一步得到的控件，可以看到这些控件都是互相嵌套的，也就是说a控件内包含了b、c控件，而b控件则包含了c控件，为了能准确标示其层级关系，我们使用具有层级关系的编号方式分别对这三个控件进行编号。编号后结果如下：
a控件编号为a，代码如下：
<div id＝”a”>
<div id＝”b”>
<div id＝”c”>
</div>
</div>
</div>
b控件代码编号为a-b，代码如下：
<div id＝”b”>
<div id＝”c”>
</div>
</div>
c的控件编号为a-b-c，代码如下：
<div id＝”c”>
</div>
第三步S13、将步骤S12中得到的各控件中所包含的子控件去掉，于是得到以下结果
编号为a的a控件代码：
<div id＝”a”>
</div>
编号为a-b的b控件代码：
<div id＝”b”>
</div>
编号为a-b-c的c控件代码：
<div id＝”c”>
</div>
现在第三步S13得到的结果作为页面的结构数据保存起来，命名为数据1。
当执行完页面之后，新的HTML控件代码可能会变成如下结构：
<div id＝”a”>
<div id＝”b”>this is test！
<div id＝”c”>
</div>
</div>
</div>
步骤S20、对以上页面操作后的控件代码重复进行步骤S101中的三步分析，得到以下控件：
编号为a的a控件代码：
<div id＝”a”>
</div>
编号为a-b的b控件代码：
<div id＝”b”>this is test！
</div>
编号为a-b-c的c控件代码：
<div id＝”c”>
</div>
将步骤S120中得到的控件结构命名为数据2，并保存。
步骤S30、按编号层级从外向内的顺序，比较数据1和数据2中编号相同的控件代码，得到变化控件编号。比较的逻辑如下：
1)比较只在具有相同编号的控件中进行；
2)从层级的最外层开始比较，顺序为a、a-b、a-b-c；
3)比较的时候，如果两段控件代码相同则进入到下一层级进行比较，如果两段控件代码不同，则记录这段不同的控件代码所对应的编号并不再进入到下一层级的比较。
根据以上比较的逻辑，步骤S103中对数据1与数据2比较的过程如下：先比较编号为a的两段控件代码，如果编号为a的两段控件代码完全相同，则开始对下一层级的编号为a-b的两段控件代码进行比较；如果编号为a-b的两段控件代码不同，则不再对下一层级的编号为a-b-c的两段控件代码进行比较，记录b控件的编号。
本实施例中给出的是编号为a-b的两段控件代码不同的情况，但是如果编号为a-b的两段控件代码相同，则需要再对下一层级的c控件代码进行比较，如果c控件代码不同，则记录c控件的编号。
步骤S40、最后再将步骤S103中比较得到的发生变化的控件编号记录下来，生成变化控件编号列表，以便于通过JavaScript对该控件进行更新。这样，就可以只定位发生更改的HTML控件，无变化的控件会被自动忽略，有利于减少网络传输数据量，简化HTML页面的无刷新开发与改造过程。
以上方法中，虽然只例举了三层嵌套关系的控件代码结构的定位，但是可以依次原理，将该方法应用于对多层嵌套关系的控件代码的定位。
本发明实施例还提供了一种能实现以上定位方法的HTML页面中控件变化的定位系统，原理框图如图2所示，其包括控件代码分解模块10、编号及存储模块20、比较模块30和变化控件列表生成模块40。
其中，控件代码分解模块10用于分解页面操作前的控件代码，得到无子控件的多个独立控件，以及分解页面操作后的控件代码，得到无子控件的多个独立的控件。编号及存储模块20用于对分解前的页面操作前的多个独立控件，根据各自的原层级关系进行编号后，存储为数据1，以及对分解后的页面操作前的多个独立控件，根据各自的原层级关系进行编号后，存储为数据2。比较模块30用于按编号层级从外向内的顺序，比较数据1和数据2中编号相同的控件代码，得到变化的控件编号。变化控件列表生成模块40用于根据得到的变化的控件编号，生成变化控件编号列表。
本发明实施例的定位系统的具体实现方法参照前面描述的定位方法，在此不再赘述。
本发明通过将页面操作前后的HTML页面控件进行分解、编号及比较，可准确判断出页面操作前后所变化的控件的编号，可自动定位发生更改的HTML控件，只定位发生更改的HTML控件，无变化的控件无需更新，有利于减少网络传输数据量，简化页面的无刷新开发与改造过程。
应当理解的是，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，而所有这些改进和变换都应属于本发明所附权利要求的保护范围。