AJAX+XML實現動態下拉導航

2024-09-01 08:30:17

字體：大中小

來源：轉載

供稿：網友

AJAX+XML實現動態下拉導航，根據客戶的需要做一個產品的分類的導航菜單，以前使用ASP遞歸讀取的。速度慢，而且消耗大量服務器資源。干脆改成AJAX+XML。共享出來和大家交流。希望各位能幫忙改進。
產品分類的XML文件

復制代碼代碼如下:

//id為自身id，pid為父級分類ID?
?
?
???????1321系列?
???????43223系列? 
?

js代碼

復制代碼代碼如下:

var?root;
//FireFox不支持selectNodes方法，在網上找到這段代碼解決了這個問題。兼容了IE和FireFox.
//創建selectNodes方法
if(?document.implementation.hasFeature("XPath",?"3.0")?)
{
???//?prototying?the?XMLDocument
???XMLDocument.prototype.selectNodes?=?function(cXPathString,?xNode)
???{
??????if(?!xNode?)?{?xNode?=?this;?}?
??????var?oNSResolver?=?this.createNSResolver(this.documentElement)
??????var?aItems?=?this.evaluate(cXPathString,?xNode,?oNSResolver,?
???????????????????XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,?null)
??????var?aResult?=?[];
??????for(?var?i?=?0;?i?<?aItems.snapshotLength;?i++)
??????{
?????????aResult[i]?=??aItems.snapshotItem(i);
??????}
??????return?aResult;
???}

???//?prototying?the?Element
???Element.prototype.selectNodes?=?function(cXPathString)
???{
??????if(this.ownerDocument.selectNodes)
??????{
?????????return?this.ownerDocument.selectNodes(cXPathString,?this);
??????}
??????else{throw?"For?XML?Elements?Only";}
???}
}





function?createXMLHttpRequest()?{
????if?(window.ActiveXObject)?{
????????oXmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
????}?
????else?if?(window.XMLHttpRequest)?{
????????oXmlHttp?=?new?XMLHttpRequest();
????}

}


function?CreateXMLDOM()
{
createXMLHttpRequest();
oXmlHttp.open(?"GET",?"XML路徑",?false?)?;
oXmlHttp.send(null)?;
root?=?oXmlHttp.responseXML.documentElement;
}
CreateXMLDOM()

function?funCreatePullMenu(passPid,ChildId)
{

var?currentItems?=?root.selectNodes("http://Proot/Item[@pid?=?"?+?passPid?+?"]");
var?iItems?=?currentItems.length;
var?k=0;
if(iItems?>?0)
{

??
??var?pdiv?=?document.createElement("DIV");
??pdiv.id="piv"?+?passPid;
??pdiv.className?=?"piv"?+?ChildId;
??pdiv.name?=?"piv"?+?passPid;
??if(passPid>0)
??{
???????pdiv.style.display="none";
????document.getElementById("div"?+?passPid).appendChild(pdiv);
??}
??else
??{
????document.getElementById("odiv").appendChild(pdiv);
??}
??for(var?i?=?0;?i?<?iItems;?i++)
??{
???var?_id?=?currentItems[i].attributes[0].value;
???var?newChild?=?document.createElement("DIV");
???newChild.id="div"?+?_id;
???newChild.className?=?"div"?+?ChildId;
???newChild.name?=?"div"?+?_id;

???var?_v?;
???if(CheckPullMenu(_id))
???{
????_1=?_id
????_v?=?"?"?+currentItems[i].firstChild.data?+?"";
???}
???else
???{
????_v?=?""+?currentItems[i].firstChild.data?+"";
???}

???newChild.innerHTML=_v;

???
???document.getElementById("piv"?+?passPid).appendChild(newChild);
???if(CheckPullMenu(_id))
???{
???funCreatePullMenu(_id,ChildId+1)
???}
??}
}
}


//檢測是否有下級
function?CheckPullMenu(passPid)
{

var?currentItems?=?root.selectNodes("http://Proot/Item[@pid?=?"?+?passPid?+?"]");
var?iItems?=?currentItems.length;
if(iItems?>?0)
{
??return?true;
}
????else
{
??return?false;
}

}

//顯示隱藏層
function?showsubmenu(sid)
{
var?whichEl?=?document.getElementById(?"piv"?+sid);
if?(whichEl.style.display?==?"none")
??{
???????????whichEl.style.display="block";
??}
else
??{
?????whichEl.style.display="none";
??}
} ?>?>
?