Ajax读取XML实现动态下拉导航的方法

本篇内容介绍了“Ajax读取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("//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("//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";
  }
}


使用方法:在网页中加入"

"。在body加入onload="funCreatePullMenu(0,0)"

最终效果:
Ajax读取XML实现动态下拉导航的方法

可以在代码中增加定义CSS。达到更好的效果。

原发于:/upload/otherpic73/128771.gif');}" alt="" src="/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。达到更好的效果。

“Ajax读取XML实现动态下拉导航的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网页名称:Ajax读取XML实现动态下拉导航的方法
分享网址:http://pwwzsj.com/article/pieeed.html