用Ajax做的一棵无限级目录树

xinlingwuyu

浏览: 138305 次
性别:
来自: 北京

最近访客更多访客>>

enock

hackWang

a4635110

安然格思

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript学习

Ajax ASP JavaScript 数据结构 CSS

转载：快乐笛子的博客(http://www.happyshow.org/view.php?id=107)

演示地址：http://www.happyshow.org/sample/20060918/ajax.html

使用了ajax，使原来非常繁琐的无限级目录树变得简单多了。并且由于是异步获取节点数据，所以服务器的压力比原来遍历数据库的方法小多了。
在这里不得不提到css，通过定义

<%@language=vbscript codepage=65001%>
<%
session.codepage = 65001
Response.CharSet = "utf-8"
response.contenttype="text/xml"

Response.expires=0
Response.AddHeader"pragma","no-cache"
Response.AddHeader"cache-control","no-store"

dim db
Set Conn=Server.CreateObject("ADODB.Connection")
db="data.mdb"
connstr ="Provider = Microsoft.Jet.OLEDB.4.0; Data Source ="& Server.MapPath(db)
Conn.Open connstr

'response.write("<?xml version=""1.0"" encoding=""utf-8""?>"&Chr(13))
Dim listid
listid = Trim(request("id"))
If listid = "" Then
  response.End()
else

Set rs = server.CreateObject("adodb.recordset")
sql = "select * from [add] where parentID="&listid
rs.open sql,conn,1,1
if rs.eof or rs.bof then
  response.write("none!!!")
Else
  response.write("<area>")
  Do While Not rs.eof
   response.write("<address>"&rs("id")&"|"&rs("addname")&"|"&rs("url")&"</address>")
  rs.movenext
  Loop
  response.write("</area>")
End If
rs.close
Set rs = nothing

End if
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax 无限树 by 快乐笛子(misshjn@163.com)</title>
<style type="text/css">
*{ padding:0; margin:0}
body { font:12px "宋体"}
.tree { border:1px solid #ccc; margin:30px; width:200px; height:450px; float:left; padding:12px 12px 12px 0px}
.tree ul { margin-left:12px}
.tree li { list-style-type:none; margin:10px 0px; }
.tree li span { color:#FF0000; margin-left:4px}
.tree li a.close{ background:url(close.gif) no-repeat 1px 1px; width:11px; height:11px; font-size:1px; margin-right:4px; clear:left}
.tree li a.open{ background:url(open.gif) no-repeat 1px 1px; width:11px; height:11px; font-size:1px; margin-right:4px;clear:left}
.tree li a.nonedata{ background:url(nonedata.gif) no-repeat 1px 1px; width:11px; height:11px; font-size:1px; margin-right:4px;clear:left}
.tree li a { text-decoration:none; color:#000000; float:left}
textarea{ font-size:11px; font-family:Tahoma; width:300px; height:400px; line-height:18px; margin:30px; padding:2px}
</style>
<script type="text/javascript">

var xmlhttp;
//创建xmlhttp实例
function createxmlhttprequest(){
   try {
     xmlhttp = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         xmlhttp = false;
       }
     }
   }
      if (!xmlhttp)
     alert("创建 Ajax 实例出错！");

}
function delloadingtext(){
    if(innerPlace.tagName!="DIV"){
        innerPlace.getElementsByTagName("a")[1].innerHTML = innerPlace.getElementsByTagName("a")[1].innerHTML.substr(0,(innerPlace.getElementsByTagName("a")[1].innerHTML.length-loadingtext.length));
    }

}
var onsuccess = "";
var onloading = "";
var onerror = "";
var loadingtext = "<span>Loading...</span>"
var AjaxRequestObj = "";
//封装 ajax 类
function Ajax(method,url,asynchronous,onsuccessFun,onloadingFun,onerrorFun){
    onsuccess = onsuccessFun;
    onloading = onloadingFun;
    onerror = onerrorFun
    this.asynchronous = true;
    this.onloading=function(){onloadFun};
    this.onerror=function(){onerrorFun};
    createxmlhttprequest();
    xmlhttp.onreadystatechange = handleStateChange;
    xmlhttp.open(method,url,asynchronous);
    this.request = function(){xmlhttp.send(null);}
}
function handleStateChange(){
    if (xmlhttp.readyState==4){
        if(xmlhttp.status==200){
            AjaxRequestObj = xmlhttp.responseXML;
            eval(onsuccess);
        }else{
            if(xmlhttp.status==404)
            eval(onerror); //页面不存在
        }
    }else{
        if (xmlhttp.readyState==3)
            eval(onloading);
    }
}

var innerPlace="";
function innerloadingtext(obj){
    if(obj.parentNode.getElementsByTagName("a")[0].className=="open"){
        try{
            ulobj = obj.parentNode.getElementsByTagName("ul")[0];
        }catch(e){ulobj = "";}
        if(typeof(ulobj)!="object")
        obj.innerHTML += loadingtext;
    }
}
function switchclass(id,obj){  //改变li的样式，从样式判断是否需要读取数据
    if(obj.className=="close"){
        obj.className="open";
        try{
            ulobj = obj.parentNode.getElementsByTagName("ul")[0];
        }catch(e){ulobj = "";}
        if(typeof(ulobj)=="object"){
            if(ulobj.style.display="none"){
                ulobj.style.display="block";
            }else{
                getValue(id,obj.parentNode);
            }
        }else{
            getValue(id,obj.parentNode);
        }
    }else{
        if(obj.className=="open"){obj.className="close";obj.parentNode.getElementsByTagName("ul")[0].style.display="none";}
    }
}
function getValue(id,obj){ //取值
    var ajaxObj = new Ajax("GET","list.asp?id="+id,true,"getsuccess()","getting()","getfailed()");
    ajaxObj.request();
    innerPlace = obj;
}
function getsuccess(){  //取值成功后
    var addr = AjaxRequestObj.getElementsByTagName("address");
    var addrLen = addr.length;
    if(addrLen==0){
        setTimeout("delloadingtext()",200)
        innerPlace.firstChild.className="nonedata";
    }else{
        var subnode="";
        var selfid;
        var name;
        var url;
        for (i=0; i<addrLen; i++){
          selfid = addr[i].firstChild.data.split("|")[0];
          name = addr[i].firstChild.data.split("|")[1];
          url = addr[i].firstChild.data.split("|")[2];
          if(url!="")
              subnode = subnode + "<li><a href='javascript:void(0)' onclick="switchclass("+ selfid +",this);innerloadingtext(this.parentNode.getElementsByTagName('a')[1])" class='close'> </a><a href='"+ url +"' target='mainFrame'  onclick="switchclass("+ selfid +",this.parentNode.getElementsByTagName('a')[0]);innerloadingtext(this)">" + name + "</a></li>";
          else
              subnode = subnode + "<li><a href='javascript:void(0)' onclick="switchclass("+ selfid +",this);innerloadingtext(this.parentNode.getElementsByTagName('a')[1])" class='close'> </a><a href='javascript:void(0)' onclick="switchclass("+ selfid +",this.parentNode.getElementsByTagName('a')[0]);innerloadingtext(this)">" + name + "</a></li>";

        }
        subnode = "<ul>" + subnode + "</ul>";
        setTimeout("delloadingtext()",200)
        innerPlace.innerHTML = innerPlace.innerHTML + subnode;
    document.getElementById("stru").value = document.getElementById("tree").innerHTML
    }
}
function getting(){ //正在取值时
//    innerPlace.innerHTML = "Loading...";
}
function getfailed(){ //取值失败
    alert("err")
}
</script>
</head>

<body onload="getValue(0,document.getElementById('tree'))">

<h1 style=" margin:20px">Ajax无限级目录树：</h1>

<div class="tree" id="tree"></div>

<iframe src="" name="mainFrame" id="mainFrame" frameborder="1" style=" border:none; margin:30px; width:250px; height:400px; padding:0"></iframe>
<textarea id="stru"></textarea>
<div style="clear:both; text-align:center">Writen by misshjn (@ <a href="http://www.happyshow.org" target="_blank">http://www.happyshow.org</a>)</div>
</body>
</html>

http://www.happyshow.org/sample/20060918/ajax.html

分享到：

bat定时导出oracle数据库 | 自我职业生涯规划的三步走

2009-03-17 15:52
浏览 1898
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论