根据客户的需要做一个产品的分类的导航菜单，以前使用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="<ahref='javascript:showsubmenu("+_1+")'>"+currentItems[i].firstChild.data+"</a>";
}
else
{
_v="<ahref='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)"
最终效果：
可以在代码中增加定义CSS。达到更好的效果。
原发于：http://www.23mo.com/blog/article.asp?id=16
使用方法：在网页中加入"<div id="odiv"></div>"。在body加入onload="funCreatePullMenu(0,0)"
最终效果：
可以在代码中增加定义CSS。达到更好的效果。
原发于：http://www.23mo.com/blog/article.asp?id=16
【Ajax读取XML实现动态下拉导航】相关文章：
★ 使用AjaxFileUpload.js实现异步文件上传示例