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

文章作者 100test 发表时间 2007:09:20 13:06:54
来源 100Test.Com百考试题网

　　摘 要:简要介绍了一种通用的，动态树型结构的实现方案，该方案基于Asynchronous JavaScript and XML，结合Struts框架设计实现了结构清晰、扩展性良好的多层架构，数据存储于数据库，结合XML描述树的节点信息，使得任何按预定的XML文档描述的信息都可以通过动态树来展现。

　　关键词:MVC模式；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应用比较