Ajax实现无刷新树

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head id ="Head1" runat ="server" >
< title > 小山 </ title >
< link type ="text/css" href ="../../Styles/tree_css/tree.css" rel ="stylesheet" >
</ head >
< body >
< form id ="Form1" runat ="server" >
< table width =100% cellpadding =0 cellspacing =0 border =0 >
< colgroup >
< col width =180 />
< col />
</ colgroup >
< tr >
< td >
< div class ="TreeMenu" id ="CategoryTree" style ="width:100%;height:489px" >
</ div >
</ td >
< td >
< iframe id =furl height =20 style ="height:497px;width:100%;" ></ iframe >
</ td >
</ tr >
</ table >

< script language ="jscript" >
function el(id)
{
return document.getElementById(id);
}
function ExpandSubCategory(iCategoryID)
{
var li_father = el( " li_ " + iCategoryID);
if (li_father.getElementsByTagName( " li " ).length > 0 ) // 分类已下载
{
ChangeStatus(iCategoryID);
return ;
}

li_father.className = " Opened " ;

switchNote(iCategoryID, true );
AjaxMethod.GetSubCategory(iCategoryID,GetSubCategory_callback);
}

function GetSubCategory_callback(response)
{
var dt = response.value.Tables[ 0 ];
if (dt.Rows.length > 0 )
{
var iCategoryID = dt.Rows[ 0 ].FatherID;
}
var li_father = el( " li_ " + iCategoryID);
var ul = document.createElement( " ul " );
for ( var i = 0 ;i < dt.Rows.length;i ++ )
{
if (dt.Rows[i].IsChild == 1 ) // 叶子节点
{
var li = document.createElement( " li " );
li.className = " Child " ;
li.id = " li_ " + dt.Rows[i].CategoryID;

var img = document.createElement( " img " );
img.id = dt.Rows[i].CategoryID;
img.className = " s " ;
img.src = " ../../Styles/tree_css/s.gif " ;

var a = document.createElement( " a " );
var id = dt.Rows[i].CategoryID;
a.onmouseover = function ()
{
PreviewImage(id);
} ;
a.href = " javascript:OpenDocument(' " + dt.Rows[i].CategoryID + " '); " ;
a.innerHTML = dt.Rows[i].CategoryName;
}
else
{
var li = document.createElement( " li " );
li.className = " Closed " ;
li.id = " li_ " + dt.Rows[i].CategoryID;

var img = document.createElement( " img " );
img.id = dt.Rows[i].CategoryID;
img.className = " s " ;
img.src = " ../../Styles/tree_css/s.gif " ;
img.onclick = function () {
ExpandSubCategory( this .id);
} ;
img.alt = " 展开/折叠 " ;

var a = document.createElement( " a " );
a.href = " javascript:ExpandSubCategory( " +
dt.Rows[i].CategoryID + " ); " ;
a.innerHTML = dt.Rows[i].CategoryName;
}
li.appendChild(img);
li.appendChild(a);
ul.appendChild(li);
}
li_father.appendChild(ul);

switchNote(iCategoryID, false );
}

// 叶子节点的单击响应函数
function OpenDocument(iCategoryID)
{
// 预加载信息
PreloadFormUrl(iCategoryID);
}

function PreviewImage(iCategoryID)
{

}

function ChangeStatus(iCategoryID)
{
var li_father = el( " li_ " + iCategoryID);
if (li_father.className == " Closed " )
{
li_father.className = " Opened " ;
}
else
{
li_father.className = " Closed " ;
}
}

function switchNote(iCategoryID,show)
{
var li_father = el( " li_ " + iCategoryID);
if (show)
{
var ul = document.createElement( " ul " );
ul.id = " ul_note_ " + iCategoryID;

var note = document.createElement( " li " );
note.className = " Child " ;

var img = document.createElement( " img " );
img.className = " s " ;
img.src = " ../../Styles/tree_css/s.gif " ;

var a = document.createElement( " a " );
a.href = " javascript:void(0); " ;
a.innerHTML = " 请稍候 " ;

note.appendChild(img);
note.appendChild(a);
ul.appendChild(note);
li_father.appendChild(ul);
}
else
{
var ul = el( " ul_note_ " + iCategoryID);
if (ul)
{
li_father.removeChild(ul);
}
}
}

// 加载根节点
var tree = el( " CategoryTree " );
var root color: #000000; backgroun