基於AJAX的一個無限樹形選單
阿新 • • 發佈：2019-02-14
首先是ajax的處理，寫個js吧，用oo寫，ajax.js內容如下：
* @author zxub
* 狀態資訊顯示類，用var Status=new function()定義，可以靜態引用其中的方法
* 一般情況下為function Status()，這樣不能靜態引用其中的方法，需要通過物件來引用
*/var Status=newfunction()
{
this.statusDiv=null;
/**
* 初始化狀態顯示層
*/this.init=function()
{
if (this.statusDiv!=null)
{
}
var body = document.getElementsByTagName("body")[0];
var div = document.createElement("div");
div.style.position ="absolute";
div.style.top ="50%";
div.style.left ="50%";
div.style.width ="280px";
div.style.margin ="-80px 0 0 -100px";
div.style.padding
div.style.backgroundColor ="#353555";
div.style.border ="1px solid #CFCFFF";
div.style.color ="#CFCFFF";
div.style.fontSize ="14px";
div.style.textAlign ="center";
div.id ="status";
body.appendChild(div);
div.style.display="none
this.statusDiv=document.getElementById("status");
}
/**
* 設定狀態資訊
* @param _message:要顯示的資訊
*/this.showInfo=function(_message)
{
if (this.statusDiv==null)
{
this.init();
}
this.setStatusShow(true);
this.statusDiv.innerHTML = _message;
}
/**
* 設定狀態層是否顯示
* @param _show:boolean值，true為顯示，false為不顯示
*/this.setStatusShow=function(_show)
{
if (_show)
{
this.statusDiv.style.display="";
}
else
{
this.statusDiv.innerHTML="";
this.statusDiv.style.display="none";
}
}
}
/**
* @author zxub
* 用於存放通道名稱及通訊物件的類，這樣可以通過不同通道名稱來區分不同的通訊物件
*/function HttpRequestObject()
{
this.chunnel=null;
this.instance=null;
}
/**
* @author zxub
* 通訊處理類，可以靜態引用其中的方法
*/var Request=newfunction()
{
//通訊類的快取this.httpRequestCache=new Array();
/**
* 建立新的通訊物件
* @return 一個新的通訊物件
*/this.createInstance=function()
{
var instance=null;
if (window.XMLHttpRequest)
{
//mozilla instanse=new XMLHttpRequest();
//有些版本的Mozilla瀏覽器處理伺服器返回的未包含XML mime-type頭部資訊的內容時會出錯。因此，要確保返回的內容包含text/xml資訊if (instance.overrideMimeType)
{
instance.overrideMimeType="text/xml";
}
}
elseif (window.ActiveXObject)
{
//IEvar 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"
* 若快取中不存在需要的通訊類，則建立一個，同時放入通訊類快取中
* @param _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;
}
/**
* 客戶端向服務端傳送請求
* @param _url:請求目的
* @param _data:要傳送的資料
* @param _processRequest:用於處理返回結果的函式，其定義可以在別的地方，需要有一個引數，即要處理的通訊物件
* @param _chunnel:通道名稱，預設為"default"
* @param _asynchronous:是否非同步處理，預設為true,即非同步處理
*/this.send=function(_url,_data,_processRequest,_chunnel,_asynchronous)
{
Status.showInfo("請求處理中，請稍候
");if (_chunnel==undefined)
{
_chunnel="default";
}
if (_asynchronous==undefined)
{
_asynchronous=true;
}
var instance=this.getInstance(_chunnel);
if (instance==null)
{
Status.showInfo("瀏覽器不支援ajax，請檢查！")
window.setTimeout("Status.setStatusShow(false)",3000);
return;
}
if (typeof(_processRequest)=="function")
{
instance.onreadystatechange=function()
{
if (instance.readyState ==4) // 判斷物件狀態 {
if (instance.status ==200) // 資訊已經成功返回，開始處理資訊 {
_processRequest(instance);
Status.setStatusShow(false);
}
else
{
Status.showInfo("您所請求的頁面有異常，請檢查！");
window.setTimeout("Status.setStatusShow(false)",3000);
}
}
}
}
//_url加一個時刻改變的引數，防止由於被瀏覽器快取後同樣的請求不向伺服器傳送請求if (_url.indexOf("?")!=-1)
{
_url+="&requestTime="+(new Date()).getTime();
}
else
{
_url+="?requestTime="+(new Date()).getTime();
}
if (_data.length==0)
{
instance.open("GET",_url,_asynchronous);
instance.send(null);
}
else
{
instance.open("POST",_url,_asynchronous);
instance.setRequestHeader("Content-Length",_data.length);
instance.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
instance.send(_data);
}
}
/**
* 間隔一段時間持續傳送請求，只用於非同步處理，只用於GET方式
* @param _interval:請求間隔，以毫秒計
* @param _url:請求地址
* @param _processRequest:用於處理返回結果的函式，其定義可以在別的地方，需要有一個引數，即要處理的通訊物件
* @param _chunnel:通道名稱，預設為"defaultInterval"，非必添
*/this.intervalSend=function(_interval,_url,_processRequest,_chunnel)
{
var action=function()
{
if (_chunnel==undefined)
{
_chunnel="defaultInterval";
}
var instance=Request.getInstance(_chunnel);
if (instance==null)
{
Status.showInfo("瀏覽器不支援ajax，請檢查！")
window.setTimeout("Status.setStatusShow(false)",3000);
return;
}
if (typeof(_processRequest)=="function")
{
instance.onreadystatechange=function()
{
if (instance.readyState ==4) // 判斷物件狀態 {
if (instance.status ==200) // 資訊已經成功返回，開始處理資訊 {
_processRequest(instance);
}
else
{
Status.showInfo("您所請求的頁面有異常，請檢查！");
window.setTimeout("Status.setStatusShow(false)",3000);
}
}
}
}
//_url加一個時刻改變的引數，防止由於被瀏覽器快取後同樣的請求不向伺服器傳送請求if (_url.indexOf("?")!=-