梅花雪树MzTreeView1.0在AJAX中的应用

q1145 2010-11-17 02:50:16

最近在做一个项目，我使用了梅花雪树来显示树形结构数据。
我的编程思想是，使用一个servlet来查询数据库。得到的结果集后转化成一个xml格式的字符串，然后将这字符串输出，再使用一个JSP,使用AJAX调用这个servlet，将得到的xmlDoc，使用梅花雪树来显示。但是很奇怪的是，一旦我调用了梅花雪树中的tree.toString();方法后，页面就一直停止在那里，好像一直在连接状态，什么也没有显示。我把还没有调用AJAX返回结果的测试代码贴出，请大家帮忙看看，哪里出错了。梅花雪树版本是1.0的。

<%@ page contentType="text/html;charset=gbk"%>



<HTML>

	<HEAD>

		<META http-equiv=Content-Type content="text/html; charset=gb2312">

		<TITLE>menu</TITLE>



<script language="JavaScript" src="Mtree/MzTreeView10.js"></script>

<style>

A.MzTreeview

{

  font-size: 9pt;

  padding-left: 3px;

}

</style>

<script type="text/javascript">

        //初始化XMLHttpRequest对象

	 function initXMLHttpRequest()

     {

      var http_request=null;

      //前后顺序很重要，如果firfox在后，则在firefox中会出错。

      try

      {// Firefox, Opera 8.0+, Safari

        http_request=new XMLHttpRequest();

      }catch(e1)

       {// Internet Explorer

         try

         {

           http_request=new ActiveXObject("Msxml2.XMLHTTP");

         }catch(e2)

          {

           try

           {

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

           }catch(e3)

            {

              alert("您的浏览器太过时了，连ajax都不能支持");

            } 

          }       

       }     

       return  http_request;     

     }

          //生成调用参数

     function getlogindata(tbNameId)

     {

       var data="";

       //alert(document.getElementById(tbNameId)); 

       data+="tbName="+document.getElementById(tbNameId).value;

       data=encodeURI(encodeURI(data));

       //alert(data);

       return data;

       //alert(data);

     }

     //url为调用服务器程序地址,deviceSNId为所选记录主键，pageNumId,为当前页数标签ID，maxNum为最后一页，当maxNum为1时，可能表示第一次调用

     function submitbypost(url,tbNameId,treeId)

     {

       //开始AJAX操作 

       //初始化XMLHttpRequest对象

       http_request=initXMLHttpRequest();

       //若没有创建XMLHTTPRequest对象，则退出。

       if(http_request==null)

         return;

       //设置当收到服务器response后，客户端处理脚本。  

       http_request.onreadystatechange=processRequest;

       //发送调用请求  

       http_request.open("post",url,true);

       //alert(url);

       http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

       //发送调用参数 

       http_request.send(getlogindata(tbNameId));

      }

     function processRequest()

     {    

       if(http_request.readyState==4)	

       {

        // 4 = "loaded"

         var tree = new MzTreeView("tree");



  tree.icons["property"] = "property.gif";  //设置icon属性的键-值数据，相当于request.setAttribute(String name,Ojbect o);

  tree.icons["css"] = "collection.gif";

  tree.icons["book.gif"]  = "book.gif";     //设置节点收缩时对应的图片，默认为folder.gif,若节点没有子节点，则默认为file.gif.

  tree.iconsExpand["book.gif"] = "bookopen.gif"; //展开时对应的图片,默认为folderopen.gif



  tree.setIconPath("../../img/"); //可用相对路径



  tree.nodes["320_324"] = "text:事件; icon:css; data:id=324"; 

  tree.nodes["0_1"] = "text:WEB 编程";

  /*if(tree.nodes["500_408"]==undefined)

  {

    alert("tt");

  }

  */

  tree.nodes["1_100"] = "text:代码示例; data:id=100"; 

  tree.nodes["1_200"] = "text:梅花雪脚本控件集; data:id=200";

  tree.nodes["1_310"] = "text:CSS; icon:css; data:id=310"; 

  tree.nodes["1_320"] = "text:DHTML; data:id=320"; 

  tree.nodes["1_300"] = "text:HTML; data:id=300"; 

  tree.nodes["1_400"] = "text:JavaScript; icon:book.gif; data:id=400";

  

  tree.nodes["320_322"] = "text:属性; icon: css; data:id=322"; 

  tree.nodes["320_323"] = "text:方法; data:id=323";

  tree.nodes["1_500"]="text:新添加加的节点;icon:book.gif;data:id=500";

  tree.nodes["320_325"] = "text:集合; data:id=325"; 

  tree.nodes["400_407"] = "text:对象; data:id=407"; 

  tree.nodes["400_406"] = "text:方法; data:id=406"; 

  tree.nodes["400_408"] = "text:运算符; data:id=408"; 

  tree.nodes["400_409"] = "text:属性; data:id=409"; 

  tree.nodes["407_1140"] = "text:Date; url:Article.asp; data:id=140";

  tree.nodes["406_1127"] = "text:toString; url:Article.asp; data:id=127";

  tree.nodes["408_1239"] = "text:||; url:Article.asp; data:id=239";

  tree.nodes["409_1163"] = "text:E;  url:Article.asp; data:id=163";

  tree.nodes["600_408"]="text:E;  url:Article.asp; data:id=163";

  //tree.setURL("Catalog.asp");

  tree.setTarget("MzMain");

  //alert(tree.toString());

  //document.getElementById(treeId).innerHTML=tree.toString();

  

  //alert(tree.toString());

       }

     }       

</script>

	</HEAD>

	<BODY>

   <input type="hidden" name="sCF_tbName" id="sCF_tbName" value="1"/>

<div id="showMyTree">

  <script type="text/javascript">

    submitbypost('../../TestMzTreeView','sCF_tbName','showMyTree');

  </script>

</div>



	</BODY>

</HTML>