基于AJAX的动态树状菜单的设计及实现

李 祁，李 瑛，陈青华

（海军航空工程学院 兵器科学与技术系，山东 烟台 264001）

树形菜单在web应用系统中十分常见，它可以直观地描述内容层次结构，方便用户通过导航菜单查找结点内容。传统的树形菜单有两种数据加载方式：1）将所有数据一次加载，这样对数据的展开、折叠等操作均在客户端完成，响应速度快，但是存在的问题是，当数据层次复杂且多半数据并没有被使用时会出现延时；2）根据用户操作动态加载数据，分类树会随着页面数据操作不断刷新整体页面，造成资源的浪费[1]。本文给出了一种比较理想的树形菜单实现方式，数据动态加载而不致整个页面刷新，只需更新展开结点部分内容即可，提高菜单运行效率，节省网络资源。

1 Ajax概述

1.1 Ajax定义

Ajax是异步JavaScript和XML的简称。当用户浏览器在执行任务时即装载了一个用JavaScript语言编写的Ajax引擎，该引擎位于一个隐藏框架中，负责用户界面与Web服务器之间的交互。通过用JavaScript调用Ajax引擎来产生一个Http的用户请求，页面导航、数据验证等操作不需要重新加载页面。从本质上说，Ajax是应用于客户端的几种技术的结合，主 要 包 括 ：JavaScript、XHTML 和 CSS、DOM、XML 和 XSTL、XMLHttpRequest等技术。其中，主要技术功能如下[2]：

1）JavaScript代码 一种基于对象和事件驱动并具有较高安全性能的脚本语言。是运行Ajax应用程序的核心代码，将其他技术绑定在一起，帮助改进与服务器应用程序的通信。

2）XMLHttpRequest对象 是Ajax异步处理的核心。使用该对象可以使用异步方式将数据传递给服务器，并从服务器中获取返回结果，该处理过程实现了真正意义上的无刷新页面的功能，从而减轻服务器负担和带宽压力，提高了响应速度。……