??褰㈢??褰??劇ず绋?搴?
??棰???杩幫?
?ㄦ??浠?椤圭??涓?甯稿父浼??虹?拌???寵?????版??琛??濡?????浠?浠??翠????夥??翠釜琛ㄥ氨???頒負涓?涓???褰㈡?版??缁???锛?瀵逛?澶????????碉?瀹????藉????涓?涓??撅???褰???浠?瀵矽?涓?琛ㄨ?琛??劇ず锛?缂?杈??訛?濡???涓????ㄥソ??琛ㄧ?闆艦寮?锛?浼??懼?寰?绗ㄦ??锛?涓烘?わ???浠?寮???杩??風????褰㈢?????绋?搴????ㄤ?涓?????涓?锛???浠?浣跨?ㄧ??????褰?绠?娉??ュ???幫??ㄦ??浠?瀵矽?涓?绠?娉?璇?娴??跺???幫?瀵逛??ユ??????涓?涓??¤?闆????版??搴?灏變????借??浠諱?锛???浠ュ?ㄦ?扮??绠?娉?????涓?锛???浠?浣跨?ㄤ?XML????锛??ㄦ???????版?版??锛?浠ヨВ?充?娆′????″?ㄤ??ㄥぇ???版????灏村艾锛????朵?????浜?濡???琛ㄦ?版??缁??????頒負?炬?跺氨浼?杩??ユ?誨驚??????璇???
瀹?????璺?锛?
1?? ??濮??劇ず?跺???劇ず?逛?浜?绾ц???癸??逛?浜?绾ц???瑰???ㄤ?灞?娆?
2?? ?瑰?諱????癸?濡???瀹???瀛????瑰?哄??瀵矽薄涓?瀛??????寤虹??瀵矽薄锛????朵?杞芥?版???存?版?版??锛??劇ず????瀛????廣??
3?? 姣?涓????瑰?ㄥ緩绔????藉氨???稿???????斤?濡?妫??ュ?????規??????????劇ず????瀛????圭??绛?
4?? DHTML+XML+ASP+CSS???朵嬌??
?????劇?癸?
1?? 浣跨??mlhttp?ュ?ｆ?朵貢????棰?锛?
??涓哄??sp杈??洪〉??腑锛?缂虹????缂????規?骞朵???涓?????锛??ｄ??ㄥ?㈡?風??椤甸?㈢??xmlhttp涓?瑙ｉ???訛?灏變?浠ョ己?????規?瑙ｆ??锛???浠ュ氨浼??虹?頒貢????涓烘?わ???浠???erver绔???asp椤甸??腑锛????ュ?涓?浠ｇ??瀹?涔?缂????規?锛?
Response.CharSet="GB2312"
Response.ContentType="text/html"
2?? 濡?浣??ㄧ?????淇???涓?涓???????椋??鹼?绫昏?婧?绠＄???ㄥ艦寮?锛?锛?
?ㄤ?涓?????涓?锛???????椤甸?㈠??瀹歸?芥??涓?姘??墊????锛??ㄦ?у?朵????ㄩ??褰?绛????籌??????剁?????㈢?稿?瑰??濂斤?褰??舵????涓????哄?跺????浜?????锛???瀹規????澶?娆″??????
?抽????棰?锛?img ,span 瀵矽薄??id 濡?浣?纭?瀹?
缁?杩?姹?璇?锛??ㄧ?????锛????????????㈤?句互涓?绗?涓????㈢?稿??锛???浠ュ???戒???涓??ㄥ??锛?浣????諱??ヨ?達??扮???㈠???蜂??芥弧瓒抽??瑕?
??涓哄?ㄨ???涓?濂戒嬌?ㄩ??浠訛???浠ュ???借創婧???浜?锛?
---xtree.html-------------------------------------------------------------------
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</SCRIPT>
<style type="text/css">
<!--
a:link { font-size: 14px; text-decoration: none; color: #0000FF}
a:visited { font-size: 14px; color: #0000FF; text-decoration: none}
a:hover { font-size: 14px; color: #FF0000; background-color: #CCCC99; text-decoration: none}
a:active { font-size: 14px; color: #FFFFFF; background-color: #191970; text-decoration: none}
.item{ font-size:14px}
-->
</style>
</HEAD>
<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold>??褰㈣????婕?绀虹?搴?</bold><br>
<table border=0>
<tr><td nowrap>
<span id='oSpanroot' root",0);</SCRIPT></td></tr>
</table>
</BODY>
</HTML>
-------xtree.asp---------------------------------------------------------------
<%@ Language=VBScript %>
<%
Response.CharSet="GB2312"
Response.ContentType="text/html"
'''''''''''''''''''''''''''''''Server code start'''''''''''''''''''''''''''''''
dim parId,nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
if(parid="") then
Response.Write("root id can't is null")
Response.End()
end if
if(nodeLayer<0) then
nodeLayer=0
end if
%>
<%
strconn="at"
strsql="select * from tree where par='"&parid&"'"
''SQL 璇??ヤ功??瑕?姹?锛??ㄨ?闆??????????涓?瀛?娈靛?椤諱?娆′負锛?row_id锛???涓???涓婚??锛???name锛??????℃?劇ず????瀹癸???par_id锛??惰????ow_id),?跺???規????瑕?杈??轟??劇ず
set conn=server.createobject("ADODB.connection")
conn.open strconn
set rs=server.createobject("ADODB.Recordset")
rs.open strsql,conn,3,3
i=0
dim row_id
row_id=""
while not rs.EOF
row_id=rs.Fields("row_id").Value
name=rs.Fields("name").Value
j=0
while j<nodeLayer
Response.Write("<img src='blank.bmp'>")
j=j+1
wend
Response.Write("<img id='objNode"&row_id&"' style='cursor:hand' src='open.bmp' 慰nclick=javascript:createChildNode('"&row_id&"',"&nodeLayer+1&") absmiddle'>")
Response.Write("<img src='blank.bmp' absmiddle'>")
Response.Write("<a class=item href='view.asp?id="&row_id&"' target='mainFrame'>"&Trim(name)&"</a></br>") '椤圭????瀹?
Response.Write("<span id='oSpan"&row_id&"' ></span>") '瀛????瑰??瀹瑰?哄??
i=i+1
rs.MoveNext
wend
'''''''''''''''''''''''''''''''''''''''''Server Code END ''''''''''''''''''''''''''''''''''
%>
---------xtree.js-----------------------------------------------------------------------------
function getChildTree(parId,nodeLayer)
//parId:=澶?????d,nodeLayer:=瀛????規??灞?灞?娆?
{
var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Author:taojianbo;Version:2.0");
return xmlhttp.responseText;
}
function showHide(objid)
//?劇ず锛??????哄??锛?杈懼?拌?????劇ず??????
//objid:=?哄??瀵矽薄ID??parid?ㄥ??
{
var temp;
eval("temp=oSpan"+objid+".style.display");
if(temp=="block")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
else
{
eval("oSpan"+objid+".style.display='block'");
eval("objNode"+objid+".src='close.bmp'");
}
}//end function
function createChildNode(childNodeId,nodeLayer)
//濡???瀛????瑰??瀹逛負绌猴?????濮???锛?骞舵?存?版?版??
//childNodeId:=瀛????瑰?矽薄Id??parid?ㄥ??
{
var temp;
eval("temp=oSpan"+childNodeId+".innerHTML");
if(temp=="")
{
eval("oSpan"+childNodeId+".innerHTML='<div align=right>LOADING...</div><br>'");
temp=new String(getChildTree(childNodeId,nodeLayer));
if(temp.length!=0)
{
eval("oSpan"+childNodeId+".innerHTML=temp");
eval("objNode"+childNodeId+".src='close.bmp'");//??涓哄????
}
else
{//濡???temp??瀹逛負绌猴?璇存?????懼?闆????锛???璇ヨ???逛負?惰???癸??存?圭?稿?沖???
eval("objNode"+childNodeId+".src='leaf.bmp'");//?存?瑰?炬??
eval("objNode"+childNodeId+".慰nclick=''"); //??娑?click浜?浠?
eval("oSpan"+childNodeId+".innerHTML=temp");//??瀹逛負绌?
}
}
else
{ showHide(childNodeId);
}
}
![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)