Ajax特效 动态树形列表 之一
树形列表（菜单）在Web应用中十分常见，通常应用于目录式结构，例如产品分类、部门机构等。传统的树形菜单主要有两种加载方式：一种是一次性加载全部数据，另一种是根据用户操作逐步加载数据，但是需要刷新页面。前者加载速度较慢，并且存在大量数据没有被使用的浪费情形。后者可以逐步加载，但是频繁地刷新页面在给用户带来不便的同时，也增加了系统开发的复杂度。
当前使用的Ajax技术，同时兼顾了两种传统方式的优点，即无刷新和动态加载特性。从用户体验到服务器负担来讲都是有利的。
由于编写一个动态树形列表要考虑的问题很多，在进入正式的讲解之前，先以一个简单的页面展示一下树形列表的基本原理。了解了基本原理后，再深入研究树形列表的细节就容易多了。图1.6所示是基本原理演示页面的运行效果。
动态树形列表的基本原理是：每当单击一个子项时，动态地在子项节点内追加新的节点，同时依靠样式表设置新节点的缩进。由于新节点在父节点内追加，因此缩进效果也建立在父节点已有的缩进基础上。通过叠加的缩进使得整个列表具有了树形结构。图1.7所示是各函数之间的调用关系。
图1.6 基本原理演示页运行效果 图1.7 基本原理演示页函数调用关系
样式的缩进写法为margin-left:10px，表示左边距为10像素。为了表示节点的动态性，增加一个计数器变量counter，用于为每个新创建的子项进行编号。在响应onclick事件时，由于新的子项是包含在父节点内的，所以onclick事件会冒泡响应。为了避免出现这种情况造成创建出多余的子项，通过设置event.cancelBubble = true阻止事件冒泡。这种阻止方式仅适用于IE浏览器，在正式的树形列表中，使用了其他方式避免此问题的发生。下面是基本原理演示页面的详细代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>动态树形列表基本原理演示</title>
<style>
/* 设置class属性为item的div缩进10px */
div.item {
margin-le
相关文档：
一 .下面先对asp.net ajax做一个简单的介绍:
asp.net ajax 的 前身就是我们大家熟悉的Atlas ，后来被正式的纳入到vs框架中来。通过对asp.net ajax的应用 ，我们可以方便的将ajax的特性引入到项目中来，显著的提高用户体验。其实asp.net ajax的特点也是继承了微软产品一贯的特点，简单易用。功能强大。只需要掌握asp ......
Ajax
一.资源类网站
1,国内网站
1)Ajax中国(推荐)
一个专业的ajax技术网站,分类清晰,有大量的电子版教程,以及AJAX源码下载!
www.okajax.com
2)ajaxcn.org
李琨老师的blog。李琨:《ajax实战》译者.
www.ajaxcn.org
-----------------------------------------
2,国外网站
1)、Ajax的诞生
Ajax:ANewApproachtoWeb ......
本实例使用名为faq的数据库表，包含的数据如图1.2所示。具体的创建数据表语句如下：
CREATE TABLE 'faq' (
'id' int(11) NOT NULL auto_increment,
'faq' varchar(255) NOT NULL,
'detail' varchar(255) NOT NULL,
PRIMARY KEY ('id')
)
图1.2 表faq包含的数据
主 ......
在很多系统中，需要用户填写个人资料，其中包含地区、城市、邮政编码等信息。而邮政编码本身包含了地区和城市信息，所以可以利用此规则简化操作。用户只需要输入邮政编码，系统根据邮政编码自动取得地区信息。这样做使得用户可以获得更好的使用体验，也可以减少错误的发生。
要实现自动获取地区信息，主要考虑3个问� ......
服务器端响应文件postalcode.jsp
服务器响应文件根据用户输入的邮政编码，从数据库中查询对应的地区信息。如果没有取到，则返回空字符串。
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,ajax.db.DBUtils"%>
<%!
......
