用AJAX实现从数据库读取数据实现TreeView（一）

用AJAX从数据库中提取数据,然后使用DOM+JavaScript来实现TreeView. 提取数据时并不是全部提取，而是只提取当前级别和当前级别的下一级数据。
共三个JS文件。
1、Ajax.js,此文件从自zxub的ajax.js文件修改而来,内容如下:




/**//*


AJAX数据请求


*/




/**//**


* 用于存放通道名称及通信对象的类，这样可以通过不同通道名称来区分不同的通信对象


*/


function HttpRequestObject()




...{


this.chunnel=null;


this.instance=null;


}






/**//**


* 通信处理类，可以静态引用其中的方法


*/


var Request=new function()




...{


this.showStatus=true;




//通信类的缓存


this.httpRequestCache=new Array();






/**//**


* 创建新的通信对象


* @return 一个新的通信对象


*/


this.createInstance=function()




...{


var instance=null;


if (window.XMLHttpRequest)




...{


//mozilla


instance=new XMLHttpRequest();


//有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息


if (instance.overrideMimeType)




...{


instance.overrideMimeType="text/xml";


}


}


else if (window.ActiveXObject)




...{


//IE


var MSXML = ['MSXML2.XMLHTTP.5.0', 'Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];


for(var i = 0; i < MSXML.length; i++)




...{


try




...{


instance = new ActiveXObject(MSXML[i]);


break;


}


catch(e)




...{


}


}


}


return instance;


}






/**//**


* 获取一个通信对象


* 若没指定通道名称，则默认通道名为"default"


* 若缓存中不存在需要的通信类，则创建一个，同时放入通信类缓存中


* _chunnel：通道名称，若不存在此参数，则默认为"default"


* return 一个通信对象，其存放于通信类缓存中


*/


this.getInstance=function(_chunnel)




...{


var instance=null;


var object=null;


if (_chunnel==undefined)//没指定通道名称




...{


_chunnel="default";


}


var getOne=false;


for(var i=0; i<this.httpRequestCache; i++)




...{


object=HttpRequestObject(this.httpRequestCache[i]);


if (object.chunnel==_chunnel)




...{


if (object.instance.readyState==0 || object.instance.readyState==4)




...{


instance=object.instance;


}


getOne=true;


break;


}


}


if (!getOne) //对象不在缓存中，则创建




...{


object=new HttpRequestObject();


object.chunnel=_chunnel;


object.instance=this.createInstance();


this.httpRequestCache.push(object);


instance=object.instance;


}


return instance;


}






/**//**


* 客户端向服务端发送请求


* _url:请求目的


* _data:要发送的数据


* _processRequest:用于处理返回结果的函数，其定义可以在别的地方，需要有一个参数，即要处理的通信对象


* _chunnel:通道名称，默认为"default"


* _asynchronous:是否异步处理，默认为true,即异步处理


* _processHandler:RequestHandler对象


*/


this.send=function(_url,_processRequest,_chunnel,_asynchronous,_processHandler)




...{


if (_url.length==0 || _url.indexOf("?")==0)




...{


alert("由于目的为空，请求失败，请检查！");


return;


}


if (_chunnel==undefined || _chunnel=="")




...{


_chunnel="default";


}


if (_asynchronous==undefined)




...{


_asynchronous=true;


}




try...{




var instance=this.getInstance(_chunnel);}catch(e)...{alert(e.message);}


if (instance==null)




...{


alert("浏览器不支持ajax，请检查！")


return;


}


if (typeof(_processRequest)=="function")




...{


instance.onreadystatechange=function()




...{


if (instance.readyState == 4) // 判断对象状态




...{


if (instance.status == 200) // 信息已经成功返回，开始处理信息




...{


_processRequest(instance,_processHandler);


Request.showStatus=true;


}


else




...{


alert("您所请求的页面有异常，请检查！");


}


}


}


}


//_url加一个时刻改变的参数，防止由于被浏览器缓存后同样的请求不向服务器发送请求


if (_url.indexOf("?")!=-1)




...{


_url+="&requestTime="+(new Date()).getTime();


}


else




...{


_url+="?requestTime="+(new Date()).getTime();


}


instance.open("GET",_url,_asynchronous);


instance.send(null);


}


}