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
相关文档：
这几天一直在研究treeTable（是一款jQuery的插件），这款插件将普通的表，变成一个可以收缩的treeTable。这种表格主要应用于权限处理，可以使用户一目了然地看见各个资源的继承关系。 上图就是一个简单的treeTable图例。 但是该表是一个静态的表，表格里的内容是一次性从服务器上获取下来，然后插件根据tr的id以及clas ......
一、XMLHttpRequest 对象的方法与属性
方 法
描 述
abort()
停止当前请求
getAllResponseHeaders()
把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")
返回指定首部的串值
open("method", "url")
建立对服务器的调用。method参数可以是GET、POST或PUT。 ......
Figure A MaskedEdit 扩展器属性
属性
默认值
说明
AcceptAMPM
False
一个布尔属性，用于指示是否应使用 AM/PM 符号。
AcceptNegative
None
指示是否允许使用负号 (-)。来自 MaskedEditShowSymbol 枚举的可用值包括：None、Left 和 Right。
AutoComplete
True
一个布尔属性，用于指� ......
页面中显示了3个问题，分别编号为1、2、3。每个问题表现为一个超链接，单击超链接触发loadFAQ函数。每个问题下面包含一个用于显示答案的div，id属性设置为“faqDetail+问题编号”，通过style="display:none"默认设置为隐藏。详细的函数说明请参考代码中的注释。
<%@ page contentType="text/plain; c ......
在很多系统中，需要用户填写个人资料，其中包含地区、城市、邮政编码等信息。而邮政编码本身包含了地区和城市信息，所以可以利用此规则简化操作。用户只需要输入邮政编码，系统根据邮政编码自动取得地区信息。这样做使得用户可以获得更好的使用体验，也可以减少错误的发生。
要实现自动获取地区信息，主要考虑3个问� ......
