基于AJAX的动态树型结构的设计与实现

树型结构是一类应用非常广泛的数据结构。人类社会中宗族的族谱和现代企业的组织形式都是树型结构。在计算机领域中,文件系统中文件的治理结构、存储器治理中的页表、数据库中的索引等也都是树型结构。随着Internet的飞速发展，树型结构在浏览器/服务器（Browser/Server，简称B/S）应用系统的应用也越来越广泛。

　目前，在互联网上广泛存在、应用的树型结构一般分为两种：静态和动态结构。静态结构存在最多、实现简单，但是静态导致不能改变树的结构和内容，无法反映树的节点信息的变化；而实现相对复杂的动态构造树，虽然可以动态增加、删除、更新节点信息，但是大部分不能直接拖放节点来改变树的结构以及节点间的次序，并且反复刷新整个页面，给用户维护带来了许多不便。本文提出了一种基于Ajax（Asynchronous JavaScript and XML）通用的、动态加载节点的解决方案。实现上采用J2EE多层架构，树节点的描述信息采用数据库存储，以可扩展标记语言（eXtensible Markup Language，简称XML）展现给JavaScript解析，支持无刷新地增加、删除、更新节点信息，以及拖放节点来改变树的结构和节点间的次序。文中第1部分简要介绍了Ajax技术；第2部分具体介绍了该方案的技术实现过程；第3部分分析了该方案的效率。

　1、Ajax简介

　Ajax概念的最早提出者Jesse James Garrett认为：Ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在共同的协作中发挥各自的作用，它包括：

　?使用扩展超媒体标记语言（eXtended Hypertext Markup Language，简称XHTML）和级联样式单（Cascading Style Sheet，简称CSS）标准化呈现；

　?使用文档对象模型（Document Object Model，简称DOM）实现动态显示和交互；

　?使用可扩展标记语言（eXtensible Markup Language，简称XML）和可扩展样式表转换（eXtensible Stylesheet Language Transformation，简称XSLT）进行数据交换与处理；

　?使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取；

　?最后用JavaScript绑定和处理所有数据。

　Ajax的工作原理如图1所示，它相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像?些数据验证和数据处理等都交给Ajax引擎处理，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。这样就把一些服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。



　　　　　图 1 未使用Ajax（a）和使用Ajax（b）的web应用比较

　2、总体设计方案

　传统的服务器程序采用Model 1开发模型，通常将业务逻辑、服务器端处理过程和HTML代码集中在一起表示，快速完成应用开发。Model 1 在小规模应用开发时优势明显，但是应用实现一般是基于过程的，一组服务器页面实现一个流程，假如流程改动将导致多个地方修改，非常不利于应用的扩展和更新。此外业务逻辑和表示逻辑混合在服务器页面中，耦合紧密，无法模块化，导致代码无法复用。

　Model 2则解决了这些问题，它是面向对象的MVC模式（Model-View-Controller，模型-视图-控制器）在Web开发中的应用，Model表示应用的业务逻辑，View是应用的表示层页面，Controller是提供给用的处理过程控制。通过这种MVC设计模式把应用逻辑，处理过程和显示逻辑划分成不同的组件、模块实现，组件间可以进行交互和重用。

　本方案是采用J2EE的多层架构，设计时结合Struts框架将表示层、业务逻辑层和数据层划分成不同的模块。表示层专注于树的外观显示，业务逻辑层为服务器端处理程序，处理树的生成、变化，为减少耦合性，该程序全部模块化实现，不在表示页面嵌入服务器程序；模型层是数据的存储和表示。下面分别介绍各层实现。

　2.1 表示层实现

　类似Windows资源治理器的文件夹模式，节点的图片样式如表1所示。对于每个节点的DHTML 代码，需要包含节点的位置、前导图片、样式、针对该节点的其他操作等。同时为了节点显示的连贯性，还需一些前导图片。

　表1 树节点的前的图片样式表
　　

　对于树的非叶子节点，图片和节点信息等，采用一个DIV ( division) 容器包含。DIV 等容器是DHTML 的基础，使用它可以通过脚本程序对其属性进行操作，如设置其style 样式的display 属性来控制子节点的展开和隐藏。节点的位置、前导图片、样式、针对该节点的其他的操作等都放入容器中，例： ＜ DIV id =mParentID＞
＜ IMG align = center border = 0 onclick =″nodeExpand (‘leafid’)″ name = m1Tree src =′Tplus.gif′＞
＜ IMG align = center border = 0 name = m1Folder src =′folderClosed. gif′＞ 计算机学院 ＜/DIV＞


　叶子节点无需容器直接输出即可。

　当点击某节点前的“ ”、“ - ”图片时通过DIV 的style 样式的display 属性控制子节点的展开和隐藏。display：“none”(隐藏,不可见)，display：“block”(显示) 。相关JavaScript 代码如下：

if (expandChild.style.display = =″none″){
　// 当前为隐藏状态,执行展开动作
　this.Loading(parentObject);//判定该分支的数据是否已经加载
　expandChild.style.display =″block″;
if (para2 = =″last″)
　parentObject.src =″Lminus. gif″; // 最后一个节点
else
　parentObject.src = ″Tminus. gif″; // 显示┠
　expandFolder.src = ″folderOpen. gif″;
}else {
　// 将当前节点的子节点全部隐藏
　expandChild.style.display = ″none″;
　if (para2 = = ″last″)
　　parentObject.src = ″Lplus. gif″;
　else
　　parentObject.src = ″Tplus. gif″;
　　expandFolder.src = ″folderClosed. gif″;
}

　2.2 树型表结构设计

　我们以数据库为载体记录节点的变化，树型表结构至少要有以下字段：节点的编号(CLASSID) ,对节点的描述(ClassName)，父节点的编号(ParentId)，这些是构建树结构所必须的信息。同时引入节点的类别代码（ClassCode），节点的级别（ClassLevel），是否叶子节点 (Terminated)等辅助字段，记录节点次序，实体关系图如图3所示。