Ajax讀取XML實(shí)現(xiàn)動(dòng)態(tài)下拉導(dǎo)航
更新時(shí)間:2007年02月28日 00:00:00 作者:
根據(jù)客戶的需要做一個(gè)產(chǎn)品的分類的導(dǎo)航菜單,以前使用ASP遞歸讀取的。速度慢,而且消耗大量服務(wù)器資源。干脆改成AJAX+XML。共享出來(lái)和大家交流。希望各位能幫忙改進(jìn)。
產(chǎn)品分類的XML文件
//id為自身id,pid為父級(jí)分類ID
<?xml version="1.0" encoding="UTF-8" ?>
<Proot>
<Item id="1" pid="0">1321系列</Item>
<Item id="2" pid="1">43223系列</Item>
</Proot>
js代碼
var root;
//FireFox不支持selectNodes方法,在網(wǎng)上找到這段代碼解決了這個(gè)問(wèn)題。兼容了IE和FireFox.
//創(chuàng)建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 = "<a href='javascript:showsubmenu(" + _1 + ")'> " +currentItems[i].firstChild.data + "</a>";
}
else
{
_v = "<a 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)
}
}
}
}
//檢測(cè)是否有下級(jí)
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";
}
}
使用方法:在網(wǎng)頁(yè)中加入"<div id="odiv"></div>"。在body加入onload="funCreatePullMenu(0,0)"
最終效果:

可以在代碼中增加定義CSS。達(dá)到更好的效果。
原發(fā)于:http://www.23mo.com/blog/article.asp?id=16
使用方法:在網(wǎng)頁(yè)中加入"<div id="odiv"></div>"。在body加入onload="funCreatePullMenu(0,0)"
最終效果:

可以在代碼中增加定義CSS。達(dá)到更好的效果。
原發(fā)于:http://www.23mo.com/blog/article.asp?id=16
產(chǎn)品分類的XML文件
復(fù)制代碼 代碼如下:
//id為自身id,pid為父級(jí)分類ID
<?xml version="1.0" encoding="UTF-8" ?>
<Proot>
<Item id="1" pid="0">1321系列</Item>
<Item id="2" pid="1">43223系列</Item>
</Proot>
js代碼
復(fù)制代碼 代碼如下:
var root;
//FireFox不支持selectNodes方法,在網(wǎng)上找到這段代碼解決了這個(gè)問(wèn)題。兼容了IE和FireFox.
//創(chuàng)建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 = "<a href='javascript:showsubmenu(" + _1 + ")'> " +currentItems[i].firstChild.data + "</a>";
}
else
{
_v = "<a 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)
}
}
}
}
//檢測(cè)是否有下級(jí)
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";
}
}
使用方法:在網(wǎng)頁(yè)中加入"<div id="odiv"></div>"。在body加入onload="funCreatePullMenu(0,0)"
最終效果:

可以在代碼中增加定義CSS。達(dá)到更好的效果。
原發(fā)于:http://www.23mo.com/blog/article.asp?id=16
使用方法:在網(wǎng)頁(yè)中加入"<div id="odiv"></div>"。在body加入onload="funCreatePullMenu(0,0)"
最終效果:

可以在代碼中增加定義CSS。達(dá)到更好的效果。
原發(fā)于:http://www.23mo.com/blog/article.asp?id=16
相關(guān)文章
Ajax與用戶交互的JSON數(shù)據(jù)存儲(chǔ)格式
數(shù)據(jù)存儲(chǔ)是JavaScript的核心功能,適當(dāng)?shù)拇娣藕脭?shù)據(jù),就有利于我們組織起結(jié)構(gòu),又能使應(yīng)用程序稍后訪問(wèn)這些內(nèi)容更加容易。這篇文章給大家介紹了Ajax與用戶交互的JSON數(shù)據(jù)存儲(chǔ)格式,感興趣的朋友一起看看吧2016-11-11
一個(gè)AJAX自動(dòng)完成功能的js封裝源碼[支持中文]
一個(gè)AJAX自動(dòng)完成功能的js封裝源碼[支持中文]...2007-02-02
關(guān)于JavaScript跨域問(wèn)題及實(shí)時(shí)刷新解決方案
在頁(yè)面顯示其他網(wǎng)站上面的數(shù)據(jù),需要用Ajax,就涉及到跨域問(wèn)題,下面有個(gè)示例,大家可以看看2014-06-06
php+ajax實(shí)現(xiàn)帶進(jìn)度條的大數(shù)據(jù)排隊(duì)導(dǎo)出思路以及源碼
最近在做一個(gè)項(xiàng)目,我們現(xiàn)在有很多數(shù)據(jù),分表存放,項(xiàng)目要求在導(dǎo)出的時(shí)候需要有進(jìn)度條。經(jīng)過(guò)一番思索,完成了一下內(nèi)容,分享給大家。最后面有完整代碼。2014-05-05
Ajax刪除數(shù)據(jù)與查看數(shù)據(jù)操作
這篇文章主要介紹了Ajax刪除數(shù)據(jù)與查看數(shù)據(jù)操作,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例
下面小編就為大家分享一篇ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01

