夏夜，天上缀满了闪闪发光的星星，像细碎的流沙铺成的银河斜躺在青色的天宇上。大地已经沉睡了。我任了性，纵容思念开成一片海，定格成回忆里抹不去的风景。太阳把大海映红了，好像得大海披上了一层红纱。
根据客户的需要做一个产品的分类的导航菜单，以前使用ASP递归读取的。速度慢，而且消耗大量服务器资源。干脆改成AJAX+XML。共享出来和大家交流。希望各位能帮忙改进。产品分类的XML文件
//id为自身id，pid为父级分类ID
<?xmlversion="1.0"encoding="UTF-8"?>
<Proot>
<Itemid="1"pid="0">1321系列</Item>
<Itemid="2"pid="1">43223系列</Item>
</Proot>
js代码
varroot;
//FireFox不支持selectNodes方法，在网上找到这段代码解决了这个问题。兼容了IE和FireFox.
//创建selectNodes方法
if(document.implementation.hasFeature("XPath","3.0"))
{
//prototyingtheXMLDocument
XMLDocument.prototype.selectNodes=function(cXPathString,xNode)
{
if(!xNode){xNode=this;}
varoNSResolver=this.createNSResolver(this.documentElement)
varaItems=this.evaluate(cXPathString,xNode,oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null)
varaResult=[];
for(vari=0;i<aItems.snapshotLength;i++)
{
aResult[i]=aItems.snapshotItem(i);
}
returnaResult;
} //prototyingtheElement
Element.prototype.selectNodes=function(cXPathString)
{
if(this.ownerDocument.selectNodes)
{
returnthis.ownerDocument.selectNodes(cXPathString,this);
}
else{throw"ForXMLElementsOnly";}
}
} functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
oXmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest){
oXmlHttp=newXMLHttpRequest();
} }
functionCreateXMLDOM()
{
createXMLHttpRequest();
oXmlHttp.open("GET","XML路径",false);
oXmlHttp.send(null);
root=oXmlHttp.responseXML.documentElement;
}
CreateXMLDOM() functionfunCreatePullMenu(passPid,ChildId)
{ varcurrentItems=root.selectNodes("//Proot/Item[@pid="+passPid+"]");
variItems=currentItems.length;
vark=0;
if(iItems>0)
{
varpdiv=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(vari=0;i<iItems;i++)
{
var_id=currentItems[i].attributes[0].value;
varnewChild=document.createElement("DIV");
newChild.id="div"+_id;
newChild.className="div"+ChildId;
newChild.name="div"+_id; var_v;
if(CheckPullMenu(_id))
{
_1=_id
_v="<arel="nofollow noopener noreferrer" href='javascript：showsubmenu("+_1+")'>"+currentItems[i].firstChild.data+"</a>";
}
else
{
_v="<arel="nofollow noopener noreferrer" href='ProductList.aspx?type="+_id+"'>"+currentItems[i].firstChild.data+"</a>";
} newChild.innerHTML=_v;
document.getElementById("piv"+passPid).appendChild(newChild);
if(CheckPullMenu(_id))
{
funCreatePullMenu(_id,ChildId+1)
}
}
}
}
//检测是否有下级
functionCheckPullMenu(passPid)
{ varcurrentItems=root.selectNodes("//Proot/Item[@pid="+passPid+"]");
variItems=currentItems.length;
if(iItems>0)
{
returntrue;
}
else
{
returnfalse;
} } //显示隐藏层
functionshowsubmenu(sid)
{
varwhichEl=document.getElementById("piv"+sid);
if(whichEl.style.display=="none")
{
whichEl.style.display="block";
}
else
{
whichEl.style.display="none";
}
}
使用方法：在网页中加入"<div id="odiv"></div>"。在body加入onload="funCreatePullMenu(0,0)"最终效果：
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt="Click here to open new window\nCTRL+Mouse wheel to zoom in/out";}" onclick="if(!this.resized) {return true;} else {window.open('/upload/200722821450856.gif');}" alt="" src="http://files.haodaima.com/upload/200722821450856.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="Click here to open new window\nCTRL+Mouse wheel to zoom in/out";}" border=0>可以在代码中增加定义CSS。达到更好的效果。原发于：http://www.23mo.com/blog/article.asp?id=16
使用方法：在网页中加入"<div id="odiv"></div>"。在body加入onload="funCreatePullMenu(0,0)"最终效果：
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt="Click here to open new window\nCTRL+Mouse wheel to zoom in/out";}" onclick="if(!this.resized) {return true;} else {window.open('/upload/200722821450856.gif');}" alt="" src="http://files.haodaima.com/upload/200722821450856.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="Click here to open new window\nCTRL+Mouse wheel to zoom in/out";}" border=0>可以在代码中增加定义CSS。达到更好的效果。原发于：http://www.23mo.com/blog/article.asp?id=16
本文Ajax读取XML实现动态下拉导航到此结束。欲望得不到满足痛苦；欲望一旦满足就无聊，生命就是在痛苦和无聊之间摇摆。小编再次感谢大家对我们的支持！
