[发明专利]基于ajax与html标记形成树形显示结构的方法

说明书

技术领域

本发明涉及的是一种计算机界面显示方法，特别涉及的是一种基于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用户界面。