用AJAX实现目录树，菜鸟也能学会(asp)

数据库

数据库使用ACCESS，数据表只有一张，即t_column。字段如下：

字段名称	字段类型	说明
c_Id	自动编号	ID，主键
c_ParentId	数字	父ID，默认0
c_Name	文本（50）	栏目名称
c_Depth	数字	所在层级，默认0
c_ChildNum	数字	子栏目数，默认0

 

Javascript部分

var xmlHttp; //定义一个全局变量

//取得页面对象

//id,层id

function GetId(id)

{

return document.getElementById(id);

}

说明：这个大家应该都明白了，就是获得页面指定层的ID，因为用的比较多，所以单独写成了函数以便调用。

//主函数，用于层和图标的样式及执行AJAX

//id,层id

//rid,数据在表中的id

//pid,图id

function DivDisplay(id,rid,pid)

{

if (GetId(id).style.display=='')

{

GetId(id).style.display='none';

GetId(pid).src = 'images/closed.gif';

}

else

{

GetId(id).style.display='';

GetId(pid).src = 'images/opened.gif';

if (GetId(id).innerHTML=='')

{

ShowChild(id,rid);

}

}

}

说明：此函数是当栏目前的图标被点击时（onclick）的处理函数。当其子栏目处于显示状态时，单击后将子栏目隐藏，并将前面的图标变为关闭 ；当其子栏目处于隐藏状态时，单击后首先判断子栏目是否已经加载到页面，如果没有则通过ajax方法加载，然后显示，如果已经加载，则直接显示，同时将前面的图标变为打开 。

 

//创建XMLHttpRequest对象

function CreateXMLHttpRequest()

{

if (window.ActiveXObject)

{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else

{

xmlHttp = new XMLHttpRequest();

}

}

说明：此函数是创建XMLHttpRequest对象，如果是IE，则创建ActiveXObject，如果是FireFox等其它浏览器则直接创建XMLHttpRequest()。

//Ajax处理函数

//id,层id

//rid,数据在表中的id

function ShowChild(id,rid)

{

CreateXMLHttpRequest();

if(xmlHttp)

{

xmlHttp.open('POST','columnAdmin.asp',true);

xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

var SendData = 'id='+rid;

xmlHttp.send(SendData);

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

GetId(id).innerHTML = xmlHttp.responseText;

}

else

{

GetId(id).innerHTML='出错：'+xmlHttp.statusText;

}

}

else

{

GetId(id).innerHTML="正在提交数据...";

}

}

}

else

{

GetId(id).innerHTML='抱歉，您的浏览器不支持XMLHttpRequest，请使用IE6以上版本！';

}

}

说明：这是Ajax的核心了，我们仔细分析。首先判断XMLHttpRequest是否已被成功创建，如果没有则给出提示：抱歉，您的浏览器不支持XMLHttpRequest，请使用IE6以上版本！

接下来的几行代码，是通过Post的方式将表记录的id发给处理页columnAdmin.asp进行数据查询，然后通过xmlHttp.responseText接收返回的数据。xmlHttp.readyState有四种状态，当它为4时，即从服务器返回结果的状态时（其它状态都显示：正在提交数据...），如果返回的数据没有错误（即xmlHttp.status==200），则将返回的结果填入相应的层中，如果有错误，则给出错误提示。

 

Asp部分

页面一：showChild.asp

 

<%

'连接数据库
dim conn,connstr,db
db="/websys/okajax/database/tree.mdb"
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
conn.Open connstr

'显示根目录
sql="select * from t_column where c_Depth=0 "
set rs=server.createobject("adodb.recordset")
rs.open sql,conn,1,1
do while not rs.eof

说明，前面几些大家如果熟悉ASP的话，都明白了，就是连接数据库然后查找出第一层目录，我们主要说明下面的程序。

if rs("c_childnum")>0 then
response.Write("<img id='p"&rs("c_Id")&"' src=""images/closed.gif"" width=""30"" height=""15"" οnclick=""DivDisplay('c"&rs("c_id")&"','"&rs("c_id")&"','p"&rs("c_id")&"')"" style=""cursor : hand;"" align=""absmiddle"">")
else
response.Write("<img src=""images/nofollow2.gif"" width=""30"" height=""15"" align=""absmiddle"" >")
end if

说明：判断是否有子目录，如果有则显示图标 ，并给此图标赋一个ID，类似P1，P2，P3……，这里面还有一个单击事件，οnclick=DivDisplay(divid,id,picid)，就是前面JS里的主函数，如果没有则只显示图标

response.Write("<b>")
response.Write(rs("c_Name"))
if rs("c_childnum")>0 then response.Write("("&rs("c_childnum")&")")
response.Write("</b>")
response.Write("<br>")
if rs("c_childnum")>0 then
response.Write("<div id='c"&rs("c_Id")&"' style='display:none;'></div>")
end if

说明：上面这个IF也是判断目录是否有子目录，如果有则创建一个层，并给此层赋一个ID，类似C1，C2，C3……，层在开始时隐藏。

rs.movenext
loop
rs.close
set rs=nothing
conn.close
Set conn = Nothing
%>

 

页面二：columnAdmin.asp

<%
Response.ContentType = "text/html"
Response.Charset = "GB2312" '解决乱码问题

Dim id,child
id=Request.Form("id")
if id="" then response.end()

'连接数据库
dim conn,connstr,db
db="/websys/okajax/database/tree.mdb"
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
conn.Open connstr

'显示子目录
sql="select * from t_column where c_parentid="&id
set rs=server.CreateObject("adodb.recordset")
rs.open sql,conn,1,1
do while not rs.eof
if rs("c_depth")>0 then
for i=1 to rs("c_depth")
child=child&"&nbsp;&nbsp;"
next
end if
if rs("c_childnum")>0 then
child=child&"<img id='p"&rs("c_Id")&"' src=""images/closed.gif"" width=""30"" height=""15"" οnclick=""DivDisplay('c"&rs("c_Id")&"','"&rs("c_Id")&"','p"&rs("c_Id")&"')"" style=""cursor : hand;"" align=""absmiddle"">"
else
child=child&"<img src=""images/nofollow2.gif"" width=""30"" height=""15"" align=""absmiddle"" >"
end if
child=child&rs("c_Name")
if rs("c_childnum")>0 then child=child&"("&rs("c_childnum")&")"
child=child&"<br>"
if rs("c_childnum")>0 then
child=child&"<div id='c"&rs("c_Id")&"' style='display:none;'></div>"
end if
rs.movenext
loop
rs.close
set rs=nothing
conn.close
Set conn = Nothing

Response.Write (child)
Response.End
%>

 

说明：以上是处理页的ASP代码，相信有前面showChild.asp的说明，大家很容易看明白这些代码，基本是一样的。

 

这就是全部了，是不是很简单的就实现了目录树。