2024年6月18日发(作者：)

(19)中华人民共和国国家知识产权局

(12)发明专利说明书

(21)申请号 CN2.2

(22)申请日 2007.09.21

(71)申请人 北京意科通信技术有限责任公司

地址 100037 北京市西城区百万庄大街22号机工大厦7层

(72)发明人 方晓波 赵龙依 陈明 孟令伟 宋斌 李晓

(74)专利代理机构 北京科龙寰宇知识产权代理有限责任公司

代理人 孙皓晨

(51)

G06F17/30

H04L29/08

(10)申请公布号 CN 101122921 A

(43)申请公布日 2008.02.13

权利要求说明书 说明书 幅图

(54)发明名称

基于ajax与html标记形成树形显

示结构的方法

(57)摘要

本发明为一种基于ajax与html标

记形成树形显示结构的方法，使用了ajax

技术和动态html标记javaScript脚本组合

以列表的形式将数据显示为树型结构。并

且为了提高效率设计成先显示2级的数

据，然后每点击一级再显示出该级的下级

数据。由于使用了ajax技术使得页面可以

局部刷新让用户感觉不到页面的刷新变

化，并且大大提高了页面的效率。

法律状态

法律状态公告日

法律状态信息

法律状态

权 利 要 求 说 明 书

1.一种基于ajax与html标记形成树形显示结构的方法，其特征在于，其包括的步

骤在于：

步骤a：客户端发送访问请求；

步骤b：服务器接受请求，从数据库中查询出前两级机构数据；

步骤c：将所述的数据从控制层传输至相应的页面上；

步骤d：页面接受到数据后，生成前两级机构的树型结构；

步骤e：点击组织机构的图标，页面将再次向服务器发送请求；

步骤f：服务器接受请求，并从数据库中查询出下级机构结构数据；并转换为

XML格式的数据返回页面；

步骤g：页面接收到XML格式的数据，进行dom解析，将解析后的数据加载到当

前机构的下面；

步骤h：再次点击组织机构的图标，判断当前机构下面是否有已经获取的下级机构，

如果是执行下述步骤i，否则执行上述步骤f；

步骤i：将所述的下级隐藏或显示。

2.根据权利要求1所述的基于ajax与html标记形成树形显示结构的方法，其特征

在于，所述的步骤d中生成前两级机构的树型结构是通过javeScript和DHTML标

记实现的。

3.根据权利要求1所述的基于ajax与html标记形成树形显示结构的方法，其特征

在于，所述的步骤g中将解析后的数据加载到当前机构的下面是通过javeScript和

DHTML标记实现的。

4.根据权利要求1所述的基于ajax与html标记形成树形显示结构的方法，其特征

在于，所述的步骤d还包括：同时判断机构是否为公司或部门，并加上适当的图片，

在图片上加入html标签图片的点击事件，点击事件将执行展开或关闭当前级别的

机构树。

5.根据权利要求4所述的基于ajax与html标记形成树形显示结构的方法，其特征

在于，在点击事件将执行展开时，所述的页面会创建一个XmlHttpRequest对象，

向服务器发送参数，以及由该对象产生一个接收服务器传递过来数据的xmldoc对

象。

6.根据权利要求5所述的基于ajax与html标记形成树形显示结构的方法，其特征

在于，当页面通过XmlHttpRequest对象向服务器发送参数时，服务器根据参数在

控制层执行相应的业务层的方法，来获取当前展开的机构的下一级机构的数据；

获取数据后在控制层将数据变为xml格式的数据再传回页面，页面会自动获取到

传回的xml数据格式的数据；

然后通过dom来解析xml数据再通过动态html和javaScript动态生成下级的组织

机构。

7.根据权利要求1所述的基于ajax与html标记形成树形显示结构的方法，其特征

在于，在每次生成前级别机构的下一级时，都要在该级别的外面加上一层div标签，

当展开下一级机构没有被显示过时，所述的页面将发送请求到服务器来获取数据，

当下一级已经被显示过时，用所述的div标签的隐藏来隐藏或显示该级别的数据。

说 明 书

技术领域

本发明涉及的是一种计算机界面显示方法，特别涉及的是一种基于ajax与html标

记形成树形显示结构的方法。

背景技术

树型结构是一类应用非常广泛的数据结构。人类社会中宗族的族谱和现代企业的组

织形式都是树型结构。在计算机领域中，文件系统中文件的管理结构、存储器管理

中的页表、数据库中的索引等也都是树型结构。随着Internet的飞速发展，树型结

构在浏览器/服务器(Browser/Server，简称B/S)应用系统的应用也越来越广泛。

在页面显示树型结构需要先列出树根然后对所有的数据根据上下级关系进行有效的

排列，再根据html标记在页面上显示出树型结构，由于在页面上组织树形结构需

要很多的代码，再加上数据量庞大时页面处理速度变得很慢，导致页面超时并显示

不完整。

针对上述缺陷，本发明创作者经过长期的研究和试验，终于获得了本发明的创作。

发明内容

本发明的目的在于，提供一种基于ajax与html标记形成树形显示结构的方法，用

以克服上述缺陷。

为实现上述目的，本发明所采用的技术方案在于，提供一种基于ajax与html标记

形成树形显示结构的方法，其包括的步骤在于：

步骤a：客户端发送访问请求；

步骤b：服务器接受请求，从数据库中查询出前两级机构数据；

步骤c：将所述的数据从控制层传输至相应的页面上；

步骤d：页面接受到数据后，生成前两级机构的树型结构；

步骤e：点击组织机构的图标，页面将再次向服务器发送请求；

步骤f：服务器接受请求，并从数据库中查询出下级机构结构数据；并转换为

XML格式的数据返回页面；

步骤g：页面接收到XML格式的数据，进行dom解析，将解析后的数据加载到当

前机构的下面；

步骤h：再次点击组织机构的图标，判断当前机构下面是否有已经获取的下级机构，

如果是执行下述步骤i，否则执行上述步骤f；

步骤i：将所述的下级隐藏或显示；

较佳的，所述的步骤d中生成前两级机构的树型结构是通过javeScript和DHTML

标记实现的；

较佳的，所述的步骤g中将解析后的数据加载到当前机构的下面是通过javeScript

和DHTML标记实现的；

较佳的，所述的步骤d还包括：同时判断机构是否为公司或部门，并加上适当的图

片，在图片上加入html标签图片的点击事件，点击事件将执行展开或关闭当前级

别的机构树；

较佳的，在点击事件将执行展开时，所述的页面会创建一个XmlHttpRequest对象，

向服务器发送参数，以及由该对象产生一个接收服务器传递过来数据的xmldoc对

象；

较佳的，当页面通过XmlHttpRequest对象向服务器发送参数时，服务器根据参数

在控制层执行相应的业务层的方法，来获取当前展开的机构的下一级机构的数据；

获取数据后在控制层将数据变为xml格式的数据再传回页面，页面会自动获取到

传回的xml数据格式的数据；

然后通过dom来解析xml数据再通过动态html和javaScript动态生成下级的组织

机构；

较佳的，在每次生成前级别机构的下一级时，都要在该级别的外面加上一层div标

签，当展开下一级机构没有被显示过时，所述的页面将发送请求到服务器来获取数

据，当下一级已经被显示过时，用所述的div标签的隐藏来隐藏或显示该级别的数

据。

与现有技术比较本发明的有益效果在于，为使用了ajax技术和动态html标记

javaScript脚本组合以列表的形式将数据显示为树型结构，并且为了提高效率设计

成先显示2级的数据，然后每点击一级再显示出该级的下级数据！由于使用了ajax

技术使得页面可以局部刷新让用户感觉不到页面的刷新变化，并且大大提高了页面

的效率。

附图说明

图1为本发明基于ajax与html标记形成树形显示结构的方法的流程图。

具体实施方式

以下结合附图，对本发明上述的和另外的技术特征和优点作更详细的说明。

Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web

页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以

创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在

Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服

务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/

响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和

DHTML立即更新用户界面，并向服务器发出异步请求，以执行更新或查询数据库。

当请求返回时，就可以使用JavaScript和CSS来相应地更新用户界面，而不是刷新

整个页面。

Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。

Ajax包含：

基于XHTML和CSS标准的表示；

使用Document Object Model进行动态显示和交互；

使用XMLHttpRequest与服务器进行异步通信；

使用JavaScript绑定一切。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次

引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使用JavaScript

向服务器提出请求并处理响应，而不阻塞用户；

动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是

HTML、CSS和客户端脚本的一种集成。

DHTML建立在原有技术的基础上，可分为三个方面：

第一方面HTML，也就是页面中的各种页面元素对象，它们是被动态操纵的内容；

第二方面CSS，CSS属性也是动态操纵的内容，从而获得动态的格式效果；

第三方面客户端脚本(例如JavaScript)，它实际操纵Web页上的HTML和CSS。

使用DHTML技术，可使网页设计者创建出能够与用户交互并包含动态内容的页

面。实际上，DHTML使网页设计者可以动态操纵网页上的所有元素——甚至是在

这些页面被装载以后。利用DHTML，网页设计者可以动态地隐藏或显示内容、修

改样式定义、激活元素以及为元素定位。DHTML还可使网页设计者在网页上显示

外部信息，方法是将元素捆绑到外部数据源(如文件和数据库)上。所有这些功能均

可用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。这是因为一

切功能都包含在HTML文件中，随着对网页的请求而一次性下载到浏览器端。

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，

可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java脚本语言一

起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的

应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。JavaScript是一种

基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对

调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用

CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了

服务器的开销。

请参阅图1所示，其为本发明基于ajax与html标记形成树形显示结构的方法的流

程图，其包括的步骤为：

步骤a：客户端发送访问请求；

步骤b：服务器接受请求，从数据库中查询出前两级机构数据；

步骤c：将所述的数据从控制层传输至相应的页面上；

步骤d：页面接受到数据后，生成前两级机构的树型结构；

步骤e：点击组织机构的图标，页面将再次向服务器发送请求；

步骤f：服务器接受请求，并从数据库中查询出下级机构结构数据；并转换为

XML格式的数据返回页面；

步骤g：页面接收到XML格式的数据，进行dom解析，将解析后的数据加载到当

前机构的下面；

步骤h：再次点击组织机构的图标，判断当前机构下面是否有已经获取的下级机构，

如果是执行下述步骤i，否则执行上述步骤f；

步骤i：将所述的下级隐藏或显示；

其中所述的步骤d中生成前两级机构的树型结构是通过javeScript和DHTML标记

实现的；所述的步骤g中将解析后的数据加载到当前机构的下面是通过javeScript

和DHTML标记实现的；

其中，所述的步骤d还包括：同时判断机构是否为公司或部门，并加上适当的图片，

在图片上加入html标签图片的点击事件，点击事件将执行展开或关闭当前级别的

机构树；

由于系统是面向对象的MVC模式(Model-View-Controller，模型-视图-控制器)在

Web开发中的应用，Model表示应用的业务逻辑层，View是应用的表示层页面，

Controller是提供应用的处理过程控制。通过这种MVC设计模式把应用逻辑，处

理过程和显示逻辑划分成不同的组件、模块实现，组件间可以进行交互和重用。

本方明是采用J2EE的多层架构，设计时结合Struts框架将表示层、业务逻辑层和

数据层划分成不同的模块。表示层专注于树的外观显示，处理过程控制为页面提供

转向和数据，控制层作为表示层和模型层之间的联系；业务逻辑层是业务逻辑和数

据的存储和表示。

用户访问该页面时首先系统会从数据库中查询出树型结构下包括根在内的前两级机

构数据，然后数据在控制层被传递到相应的页面上。页面接受到数据后，首先通过

javaScript和动态html标记生成前两级机构的树型结构，这同时会判断机构是否为

公司或部门，加上适当的图片，在图片上加入html标签图片的点击事件，点击事

件将执行展开或关闭当前级别的机构树。当然除了一开始显示的2级机构数据外其

余的展开级别的数据来源将由ajax技术来实现。

当点击相应的机构展开时，页面将由ajax技术来实现发送和接收数据，页面会创

建一个XmlHttpRequest对象，向服务器发送参数，以及由该对象产生一个可以接

收服务器传递过来数据的xmldoc对象。

当页面通过XmlHttpRequest对象向服务器发送参数时，服务器会根据参数在控制

层执行相应的业务曾的方法，来获取当前展开的机构的下一级机构的数据。获取数

据后在控制层将数据变为xml格式的数据再传回页面，页面会自动获取到传回的

xml数据格式的数据。然后通过dom来解析xml数据再通过动态html和javaScript

动态生成下级的组织机构。

在每次生成当前级别机构的下一级时，都要在该级别的外面加上一层div标签，当

展开下一级机构没有被显示过，页面将发送请求到服务器来获取数据，然而当下一

级已经被显示过时我们可以用div标签的隐藏来隐藏或显示该级别的数据，只要判

断当前点击的机构下是否已经有数据就可以做到了。这样就可以避免重复的向服务

器发送请求来获取我们已经获取过的数据，这样不但节省了时间还会减少重复的发

送请求给服务器带来的压力。

以上所述仅为本发明的较佳实施例，对本发明而言仅仅是说明性的，而非限制性的。

本专业技术人员理解，在本发明权利要求所限定的精神和范围内可对其进行许多改

变，修改，甚至等效，但都将落入本发明的保护范围内。