主頁 > 知識(shí)庫 > Ajax讀取XML實(shí)現(xiàn)動(dòng)態(tài)下拉導(dǎo)航

Ajax讀取XML實(shí)現(xiàn)動(dòng)態(tài)下拉導(dǎo)航

熱門標(biāo)簽:許昌智能電銷機(jī)器人公司 遼寧銀行智能外呼系統(tǒng) 海南銀行智能外呼系統(tǒng)商家 姜堰電銷機(jī)器人 電銷機(jī)器人違法了嗎 辰溪地圖標(biāo)注 上海浦東騰訊地圖標(biāo)注位置 遼寧正規(guī)電銷機(jī)器人 澳大利亞城市地圖標(biāo)注
根據(jù)客戶的需要做一個(gè)產(chǎn)品的分類的導(dǎo)航菜單,以前使用ASP遞歸讀取的。速度慢,而且消耗大量服務(wù)器資源。干脆改成AJAX+XML。共享出來和大家交流。希望各位能幫忙改進(jìn)。
產(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è)問題。兼容了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)頁中加入"div id="odiv">/div>"。在body加入onload="funCreatePullMenu(0,0)"

最終效果:


可以在代碼中增加定義CSS。達(dá)到更好的效果。

原發(fā)于:http://www.23mo.com/blog/article.asp?id=16
使用方法:在網(wǎng)頁中加入"div id="odiv">/div>"。在body加入onload="funCreatePullMenu(0,0)"

最終效果:


可以在代碼中增加定義CSS。達(dá)到更好的效果。

原發(fā)于:http://www.23mo.com/blog/article.asp?id=16
您可能感興趣的文章:
  • java AJAX實(shí)現(xiàn)級(jí)聯(lián)下拉框
  • Ajax實(shí)現(xiàn)無刷新三聯(lián)動(dòng)下拉框
  • ajax 自動(dòng)完成下拉框 自動(dòng)提示位置問題
  • ajax讀取數(shù)據(jù)庫內(nèi)容實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇菜單示例

標(biāo)簽:威海 銅川 撫州 晉城 深圳 西藏 伊春 崇左

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Ajax讀取XML實(shí)現(xiàn)動(dòng)態(tài)下拉導(dǎo)航》,本文關(guān)鍵詞  Ajax,讀取,XML,實(shí)現(xiàn),動(dòng)態(tài),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Ajax讀取XML實(shí)現(xiàn)動(dòng)態(tài)下拉導(dǎo)航》相關(guān)的同類信息!
  • 本頁收集關(guān)于Ajax讀取XML實(shí)現(xiàn)動(dòng)態(tài)下拉導(dǎo)航的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章