基于Ajax技术的Web树状菜单实现.pdf

( ) 第 36 卷 　第 2 期 贵州工业大学学报 自然科学版 Vol . 36 No . 2 　2007 年 　4 月 J OU RNAL OF GU IZHOU UN IV ER SI T Y OF TECHN OL O GY Ap ril . 2007 (N at ural Science Edition) 文章编号 : 10090 193 (2007) 基于 Ajax 技术的 Web 树状菜单实现 邓少勋 (贵州大学计算机科学与技术学院 ,贵州 贵阳 550025) 摘 　要 :叙述了Aj ax 技术实现动态获取数据的W EB 树状菜单的方法 。当展开菜单时 ,浏览器 端自动向服务器端发送请求 ,服务器端查询对应菜单下的子菜单 ,然后把子菜单的数据向浏览 器端送显而得到子菜单 ,整个过程只是页面局部刷新 ,不仅能与传统的桌面型树状菜单相婢 美 ,还大大提高了菜单的运行性能 ,节约了网络资源 。 关键词 :Aj ax ;树状菜单 ;浏览器端 ;服务器端 ;局部刷新 中图分类号 : TP3 11 　　　文献标识码 :A 0 　引　言 树是一种常用的显示数据的结构 ,软件程序中有许多地方都会用到树结构 。如操作系统的文件 目录就 是一个典型的树结构 。一个文件系统有一个根 目录 ,根 目录下有许多文件夹 ,每个文件夹可以称为该 目录 的子孙 。 树状菜单是为了方便查找每个结点而实现的导航菜单 ,它通过展开和折叠来进行浏览用户所需要的内 容 。本文通过动态获取数据的树状菜单的Aj ax 实现技术与传统的实现技术相对比,体现出 Aj ax 实现技术 的优越性 。 1 　实现树状菜单的传统方法 在传统的 Web 应用程序中 ,动态获取数据的树状菜单都是采用请求 - 刷新 - 显示的模式 。即每当 用户通过单击父结点按钮或链接向服务器发送一个请求时 ,都由服务器接收请求并处理 ,处理完毕后服务 器将信息发送至浏览器端进行显示 。而在服务器处理的时间里 ,浏览器端即用户端处于 Loading 状态 ,显示 为空白和无响应状态 ,用户能做的事情只有等待 。 以下介绍两种常用的动态获取数据的 Web 树状菜单的传统实现方法及其它们的优缺点 。 1 . 1 　完全在浏览器端实现 通常实现树状菜单最简单的办法就是完全利用J avaScript 进行菜单的控制 。浏览器端向服务器端发送 一次请求 ,服务器端返回该树的所有数据 ,浏览器端再通过 J avaScript 语言控制菜单的展开与折叠 。图 1 所 示为完全在浏览器端实现树状菜单时 ,与服务器通信的整个过程图。 这种方法的缺点主要体现在以下几个方面 。首先 , 由于浏览器端只向服务器端发送一次请求 , 需要获 得所有的数据才能够显示完整的树结构 ,这就要求服务器端要处理大量的数据 。而对于用户来说 ,有时并 不需要获得树的所有数据 ,而只关心某一结点下的数据 ,但服务器端已产生了大量的无用数据 。其次 ,浏览 器端发送一次请求后 ,用户在查找某结点时 ,可能要花费很长的时间。而在这段时间内,该结点的数据很可 能已经发生了变化 ,这就造成了用户不能及时获得最新的数据 。所以这种实现方法只适合于菜单数据量非 常少并且数据不需频繁更新的场合 。 1 . 2 　完全由服务器端实现 除了完全在客户端实现树状菜单外 ,也可以完全在服务器端实现 。每次的展开与折叠操作 ,都先发送 请求 ,再根据请求来判断返回给树状菜单的显示内容 。服务器端要随时记录菜单的展开与折叠状态 。图 2 收稿 日期 :2006 - 12 - 10 ( ) 作者简介 :邓少勋 1980 - ,男 ,硕士 ,贵州兴义人 ;研究方向:计算机软件开发 。 ( ) 　 贵 　州