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
相关文档：
上篇介绍了如何在Ajax客户端与服务器端之间传送简单的文本数据，其实，也可以使用XML作为数据传送、沟通的格式，Ajax客户端若要发送XML，基本上就是将XML作为字符串，在POST请求时发送，例如：
*HelloAjax.js
var xmlHttp;
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttp = new ......
var xmlHttp;
function createXMLHttpRequestss() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
& ......
图1.1 实例运行效果
1.1.1 技术要点
动态加载FAQ的过程主要是利用XMLHttpRequest（以下简称XHR）对象与服务端通信，根据用户单击的感兴趣问题动态将内容加载到页面中。在具体实现时，有两点要注意的内容。
1．对每个问题进行唯一标识
FAQ主要包含问题与解答两个部分，用户单击一个问题时，服务器必须知道 ......
页面中显示了3个问题，分别编号为1、2、3。每个问题表现为一个超链接，单击超链接触发loadFAQ函数。每个问题下面包含一个用于显示答案的div，id属性设置为“faqDetail+问题编号”，通过style="display:none"默认设置为隐藏。详细的函数说明请参考代码中的注释。
<%@ page contentType="text/plain; c ......
数据库设计
本实例使用名为postalcode的数据库表，包含的部分数据如图1.4所示。具体的创建数据表语句如下：
CREATE TABLE 'postalcode' (
'id' int(11) NOT NULL auto_increment,
'area' varchar(255) NOT NULL,
'city' varchar(255) NOT NULL,
'code' varchar(6) NOT NULL,
&n ......
