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

 更新时间:2007年02月28日 00:00:00   作者:  
根据客户的需要做一个产品的分类的导航菜单,以前使用ASP递归读取的。速度慢,而且消耗大量服务器资源。干脆改成AJAX+XML。共享出来和大家交流。希望各位能帮忙改进。
产品分类的XML文件
复制代码 代码如下:

//id为自身id,pid为父级分类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方法,在网上找到这段代码解决了这个问题。兼容了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 = "<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)
   }
  }
}
}


//检测是否有下级
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";
  }
}


使用方法:在网页中加入"<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使用get与post模式的区别分析

    AJAX使用get与post模式的区别分析

    这篇文章主要介绍了AJAX使用get与post模式的区别,实例分析了Ajax中get与post的具体用法与使用区别,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • Ajax与用户交互的JSON数据存储格式

    Ajax与用户交互的JSON数据存储格式

    数据存储是JavaScript的核心功能,适当的存放好数据,就有利于我们组织起结构,又能使应用程序稍后访问这些内容更加容易。这篇文章给大家介绍了Ajax与用户交互的JSON数据存储格式,感兴趣的朋友一起看看吧
    2016-11-11
  • ajax接口文档url路径的简写实例

    ajax接口文档url路径的简写实例

    前端工程师将来打交道最多的是Http API接口,此种接口会提供一个URL地址暴露在互联网上,可以通过编写Ajax代码去与之交互来完成功能,下面这篇文章主要给大家介绍了关于ajax接口文档url路径简写的相关资料,需要的朋友可以参考下
    2021-10-10
  • 一个AJAX自动完成功能的js封装源码[支持中文]

    一个AJAX自动完成功能的js封装源码[支持中文]

    一个AJAX自动完成功能的js封装源码[支持中文]...
    2007-02-02
  • 关于JavaScript跨域问题及实时刷新解决方案

    关于JavaScript跨域问题及实时刷新解决方案

    在页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题,下面有个示例,大家可以看看
    2014-06-06
  • Ajax发送和接收请求

    Ajax发送和接收请求

    这篇文章主要为大家详细介绍了Ajax发送和接收请求的相关资料,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • php+ajax实现带进度条的大数据排队导出思路以及源码

    php+ajax实现带进度条的大数据排队导出思路以及源码

    最近在做一个项目,我们现在有很多数据,分表存放,项目要求在导出的时候需要有进度条。经过一番思索,完成了一下内容,分享给大家。最后面有完整代码。
    2014-05-05
  • Ajax删除数据与查看数据操作

    Ajax删除数据与查看数据操作

    这篇文章主要介绍了Ajax删除数据与查看数据操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • ajax实现上传图片保存到后台并读取的实例

    ajax实现上传图片保存到后台并读取的实例

    下面小编就为大家分享一篇ajax实现上传图片保存到后台并读取的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • jquery中的ajax异步上传

    jquery中的ajax异步上传

    本篇文章给大家介绍jquery中的ajax异步上传,在此需要引入ajaxfileupload.js这个js文件。接下来,有需要的朋友跟着小编一起学习吧
    2015-09-09

最新评论