Ajax  这个当今流行的技术名词,几年前  ajax  开始流行时,也花过点时间研究了一下  ajax.net  控件．只是工作原因，一直没有用到项目中去．一晃几年  ajax  依旧如火如荼．最近闲来无事，重温  ajax．就好象  AJAX  当初被遗弃，现在又被热捧一样．这次我没有去下载ajax.net,altas  等控件．而是从  ajax  基础看起，呵呵，一种一切从头开始开始感觉．

ibm  中国开发区翻译的＜掌握  Ajax  系列＞几篇文章写的不错．想了解  ajax  的基础朋友可以去看看．

做过  web  开发的朋友,一定都收藏了  javascrip  树形菜单，我也有．Javascript  树形菜单和我这次写的  ajax  树形菜单最大不同点是  ajax 树形菜单不是一次性将菜单的全部数据提出来．而是当点了节点时才去从数据库中读取该节点的子树信息，再加载到  DIV  标签中，而  javascript  是一次性将数据全部读出来．两者的相同点就是显示子树时，都不会刷新页面．效果图如下:

现实步骤:
1、新建表，并在表中添加数据。这里要注意的是，树形菜单的数据都是从这个表中读出来，表结构设计要做到无限级。

CREATE TABLE [dbo].[SysBaseData](
    [BaseDataID] [int] NOT NULL,
    [BaseDataCode] [char](10) NOT NULL,
    [BaseDataName] [varchar](30) NOT NULL,
    [ParentCode] [char](10) NOT NULL,
    [Description] [varchar](100) NULL,
    [LevelType] [int] NOT NULL,
    [VaildType] [char](1) NOT NULL,
    [PathCode] [varchar](100) NULL,
    [SerialNumberID] [int] NOT NULL,
 CONSTRAINT [PK_SysBaseData] PRIMARY KEY NONCLUSTERED 
(
    [BaseDataID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

2、新建树形菜单显示文件  LeftTreeAjax.html。

(1)createXMLHttpRequest()创建  xnlHttp  对象，由于不同的浏览器  XMLHttpRequest  控件名不同。代码种用了几个  try。这样几种主流的浏览器都可以兼容呢。

//创建对象
function createXMLHttpRequest()
...{

    var isRight = true;
    try...{ xmlHttp = new XMLHttpRequest(); }
    catch(trymicrosoft)
    ...{
        try...{xmlHttp = new ActiveXobject("Msxml2.XMLHTTP");}
        catch(othermicrosoft)
        ...{
            try...{xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");}
            catch(failed)
            ...{
                isRight = false;
            }
        }
    }
    if(!isRight)
      alert("XML  对象创建失败");
}

(2) GetData(ID) 单击节点时，调用该函数。该函数发送请求给  CreateTreeAjax.aspx．

//获取数据
function GetData(ID)
{
    ParID  = document.getElementById("M1_" + ID);
    ShowID = document.getElementById("M2_" + ID);
    if(ShowID.innerHTML != "")
    {
        if(ShowID.style.display == "none")
            ShowID.style.display = "block";
        else
            ShowID.style.display = "none";
        ShowFolderICO();
        return;
    }
    
    ShowID.style.display = "block";
    ShowID.innerHTML = "<span class="load">Loading Tree ……</span>";
    var Url = "CreateTreeAjax.aspx?ID=" + ID;
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = ShowTree;
    xmlHttp.open("GET", Url, true);
    xmlHttp.send(null);
}

(3)ShowTree() 显示子树，CreateTreeAjax.aspx  反回子树信息，ShowTree() 获取信息，并加载到  DIV  标签中．

//此方法直接从服务器端返回  HTML
function ShowTree()
{
    if (xmlHttp.readyState == 4){
        if (xmlHttp.status == 200)
        {
            ShowID.innerHTML = xmlHttp.responseText;
           // alert(xmlHttp.responseText);
            ShowFolderICO();
            //alert(M1_DCCK.innerHTML);
        }else
        {
            ShowID.innerHTML = "数据获取错误！"+xmlHttp.status;
        }
    }
}

2、新建创建子树的文件  CreateTreeAjax.aspx,CreateTreeAjax.aspx.cs
CreateTreeAjax.aspx  文件中只要这一句，其它的都删除

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreateTreeAjax.aspx.cs" Inherits="Manage_BaseData_CreateTreeAjax" %>

CreateTreeAjax.aspx.cs   根据接收到  ID，读取子树信息。