`

firefox兼容ie读取xml节点方法的解决方案实例

    博客分类:
  • js
阅读更多
<html>
<head>
<title>Firefox中Javascript读取XML数据selectSingleNode实例</title>
<style>
body,p{font:normal 12px/180% "宋体";}
</style>

<script type="text/javascript">
var GetNodeValue = function(obj)
{
var str = "";
if(window.ActiveXObject)    //IE
{
str = obj.text;
}
else //Mozilla
{
try
{
   str = obj.childNodes[0].nodeValue;
}
catch(ex)
{
   str = "";
}
}
return str;
}

if(document.implementation && document.implementation.createDocument)
{
XMLDocument.prototype.loadXML = function(xmlString)
{
var childNodes = this.childNodes;
for (var i = childNodes.length - 1; i >= 0; i--)
   this.removeChild(childNodes[i]);

var dp = new DOMParser();
var newDOM = dp.parseFromString(xmlString, "text/xml");
var newElt = this.importNode(newDOM.documentElement, true);
this.appendChild(newElt);
};

// check for XPath implementation
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";}
    }
}

// check for XPath implementation
if( document.implementation.hasFeature("XPath", "3.0") )
{
    // prototying the XMLDocument
    XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode)
    {
    if( !xNode ) { xNode = this; }
    var xItems = this.selectNodes(cXPathString, xNode);
    if( xItems.length > 0 )
    {
    return xItems[0];
    }
    else
    {
    return null;
    }
    }  
    // prototying the Element
    Element.prototype.selectSingleNode = function(cXPathString)
    {  
    if(this.ownerDocument.selectSingleNode)
    {
    return this.ownerDocument.selectSingleNode(cXPathString, this);
    }
    else{throw "For XML Elements Only";}
    }
}
}

function loadXML()
{
    var xmlHttp;
    var name;

    if(window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
    try
    {
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4)
            {
                if (xmlHttp.status == 200)
                {
                    // 取得XML的DOM对象
                    var xmlDOM = xmlHttp.responseXML;
                    // 取得XML文档的根
                    var root = xmlDOM.documentElement;
                    try
                    {
                       var items = root.selectNodes("//urlset/url");
					   var msg = document.getElementById("msg1");
					   msg.innerHTML="";
                       for(var i=0;i<items.length;i++)
					   {
                        //取得XML文件中内容
                        var strloc = GetNodeValue(items[i].selectSingleNode("loc"));
                        var strsite=GetNodeValue(items[i].selectSingleNode("site"));
                        var straddtime=GetNodeValue(items[i].selectSingleNode("addtime"));
                        msg.innerHTML+="<a href="+strloc+" target=_blank>"+strsite+"</a>&nbsp;加入日期:"+straddtime+"<br/>";
                       }
                    }
                    catch(exception)
                    {
                        alert("error!");
                    }
                }
            }
        }
        xmlHttp.open("GET", "urllink.xml", true);
        xmlHttp.send(null);
    }
    catch(exception)
    {
      alert("您要访问的资源不存在!");
    }
}
var xmlDoc;
function getdata()
{ 
  if (window.ActiveXObject) 
  { //IE
	  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	  xmlDoc.async=false;
	  xmlDoc.load("urllink.xml");	
	  domsg();
  }
  else if (document.implementation &&document.implementation.createDocument) 
  {//FF
	  xmlDoc= document.implementation.createDocument("","",null);	 
	  xmlDoc.async=false;
	  xmlDoc.load("urllink.xml");	
	  xmlDoc.onload=domsg();
  }
  else
  {
	alert('浏览器不支持脚本,无法加载XML文件');
  }  
}

function domsg()
{
	var root = xmlDoc.documentElement;	
    try{
        var msg2 = document.getElementById("msg2");
	    var items = root.selectNodes("//urlset/url");
		msg2.innerHTML="";
		for(i=0;i<items.length;i++)
		{
		   var strloc = GetNodeValue(items[i].selectSingleNode("loc"));
		   var strsite=GetNodeValue(items[i].selectSingleNode("site"));
		   var straddtime=GetNodeValue(items[i].selectSingleNode("addtime"));
		   msg2.innerHTML+="<a href="+strloc+" target=_blank>"+strsite+"</a>&nbsp;加入日期:"+straddtime+"<br/>";
		}
	 }
	 catch (exception){
	   msg2.innerHTML="加载XML数据错误!";
	 }	
	 
	 

}
</script>
</head>

<body onload="getdata()">
<h1>这是一个firefox兼容ie读取xml节点方法的解决方案实例</h1>

<div style="margin:10px auto">
<h2>这里是实时读取xml文件节点</h2>
可以用于Html文件读取 XML中的最新数据、广告数据等。
<div id="msg2" style="width:500px;border:1px solid #e0e0e0; height:auto;margin:8px;padding:4px"><span>如果您看到这些内容,说明加载失败</span></div>
</div>

<div style="margin:10px auto">
<h2>这里是ajax异步读取xml文件节点</h2>
firefox模拟selectsinglenode方法获取xml数据,兼容ie,
解决了一些一些网站的ajax在firefox下面无法显示的问题<br>
<a href="javascript:loadXML();" ><B>点击加载XMl</B></a>:<br>
<div id="msg1" style="width:500px;;border:1px solid #e0e0e0; height:auto;margin:8px;padding:4px">请点击上面按钮加载XMl...</div>
</div>


查看本页源代码,有相应的js, XML数据文件urllink.xml<br>
<textarea name="urllink" rows="6" cols="60">
<?xml version="1.0" encoding="gb2312"?>
<urlset>
<url>
<site>思高数码</site>
<loc>http://www.cycoo.com</loc>
<addtime>2006-02-11</addtime>
</url>
<url>
<site>深南大道</site>
<loc>http://bbs.szroad.com</loc>
<addtime>2006-05-22</addtime>
</url>
<url>
<site>芒果网</site>
<loc>http://www.man-go.cn</loc>
<addtime>2007-01-21</addtime>
</url>
</urlset>
</textarea>
</body>
</html>

 

<?xml version="1.0" encoding="gb2312"?>
<urlset>
<url>
<site>思高数码</site>
<loc>http://www.cycoo.com</loc>
<addtime>2006-02-11</addtime>
</url>
<url>
<site>深南大道</site>
<loc>http://bbs.szroad.com</loc>
<addtime>2006-05-22</addtime>
</url>
<url>
<site>芒果网</site>
<loc>http://www.man-go.cn</loc>
<addtime>2007-01-21</addtime>
</url>
</urlset>

 

分享到:
评论

相关推荐

    JS读取,添加,修改XML

    - 描述中提到只支持IE,这是因为旧版本的IE(尤其是IE8及以下)使用了ActiveXObject来处理XML,而现代浏览器如Chrome、Firefox和QQ浏览器更倾向于使用DOMParser和XMLHttpRequest。因此,确保代码兼容性是必要的,...

    firefox中JS读取XML文件

    在Firefox中,JavaScript读取XML文件的方法与Internet Explorer(IE)有所不同,因为Firefox不支持IE特有的ActiveXObject。本文将详细讲解两种在Firefox中通过JavaScript获取并处理XML文档的方法。 1. 使用`...

    JavaScript操作XML(js XML).doc

    4. **创建和操作XML节点**: - **创建节点**:使用`createNode()`方法可以创建新的XML节点,如`var newnode = doc.createNode(1,"name","");`创建了一个元素节点。 - **创建属性**:使用`createAttribute()`方法...

    Js解析xml实现省市县简三级联动单成功实例

    - **document.implementation.createDocument**:非IE浏览器(如Firefox、Chrome等)通常使用这个方法创建一个新的XML文档对象。 3. **异步加载与同步加载**: - `xmlDoc.async = false;`:设置为`false`意味着在...

    使用JS读取XML文件的方法

    IE浏览器使用的是ActiveX技术,可以通过new ActiveXObject("Microsoft.XMLDOM")来创建一个XMLDOM对象,这是IE特有的解决方案。使用这种方式,可以加载XML文件并将其作为对象进行操作。 第二类包括Firefox和Opera...

    XML应用开发(软件品牌)-1期 第6单元 单元设计-使用DOM解析XML.doc

    DOM文档的加载是通过特定的属性和方法实现的,这些属性和方法可以在不同的浏览器环境中使用,如IE和Firefox。 接着,课程将深入探讨DOM节点树的结构,包括不同类型的节点(如元素节点、文本节点、属性节点等)以及...

    XMLDOM对象方法手册.rar

    XMLDOM(XML Document Object Model)是...不过,需要注意的是,XMLDOM主要是在Internet Explorer中使用,对于其他浏览器,如Firefox、Chrome等,可能需要使用不同的API,如DOMParser或XMLHttpRequest来解析和操作XML。

    javascript操作XML与HTML

    2. **Firefox 下将字符串转换为 DOM 对象** ```javascript // 创建 DOM 对象 var xmlDoc = document.implementation.createDocument("", "doc", null); var xmlString = "&lt;book&gt;&lt;title&gt;ajax&lt;/title&gt;&lt;author&gt;...

    js解析xml案例用层布局

    解析完成后,`xmlDoc`是一个完整的XML文档对象模型,可以通过DOM方法访问和操作XML节点。 2. **HTML层布局(CSS定位)**:在HTML中,我们可以使用CSS的定位属性(如`position`、`top`、`left`等)实现层叠布局。...

    JavaScript XML操作 封装类

    这个封装类的主要目标是提供一种在不同浏览器(包括IE、Firefox、Safari和Chrome)间兼容的XML读取和操作机制。下面我们将深入探讨这个封装类的关键功能和实现原理。 首先,`XMLObject`类会检查当前环境是否为...

    javascript解析xml文件

    解析后的`xmlDoc`是一个Document对象,可以使用DOM方法(如`getElementsByTagName`, `getElementById`等)遍历和操作XML结构。 2. **ActiveXObject**:这是Internet Explorer浏览器的特有API,不推荐在现代开发中...

    ExtJS下书写动态生成的xml(兼容火狐)

    综上所述,本文档介绍了一个在ExtJS框架下动态生成XML的实例,并深入讨论了与IE和Firefox浏览器兼容性处理的相关知识点。通过这篇文章,我们了解了处理不同浏览器兼容性的方法,以及在进行DOM操作时需要注意的各个...

    JavaScript加载xml

    在处理加载的XML文档时,可以使用DOM API来遍历和操作XML节点。例如,查找特定元素、获取元素属性、创建新的元素和属性等。以下是一些基本操作: - **查找元素**:`getElementsByTagName`, `getElementById`, `...

    JS解析XML实例分析

    根据描述中的内容,文章详细分析了JavaScript针对不同浏览器,主要是IE浏览器和非IE浏览器(如Firefox、Chrome等),解析XML文件的方法。具体实现时,利用了JavaScript提供的内置对象DOMParser(在非IE浏览器中使用...

    Ajax完全自学手册(PPT)

    Test Firefox XMl DOm.htm Firefox中的XML DOM支持 Firefox LoadXML.htm Firefox中的XML DOM支持 XPath Example1.xml XPath Writer.xml 开发中实际使用的XML文档 Test4IE XPath.htm IE中的XPath支持 Test ...

    JS实现的跨浏览器解析XML文件实例

    在Firefox、Opera 8.0+、Safari等非IE浏览器中,我们可以直接通过构造函数`new XMLHttpRequest()`创建XMLHttpRequest对象。而在Internet Explorer中,我们需要使用ActiveXObject,分别尝试`Msxml2.XMLHTTP`和`...

    JavaScript操作XML 使用百度RSS作为新闻源示例

    3. XML DOM操作:通过ActiveXObject创建的Microsoft.XMLDOM实例(针对IE浏览器),或者使用`document.implementation.createDocument`(针对非IE浏览器,比如Firefox)来操作XML文档,加载XML文件内容,获取节点,并...

    javascrip和xml Dom小练习

    例如,在Chrome或Firefox中,可以使用`console.log()`来打印变量值,利用断点(breakpoint)暂停执行,通过步进(step in, step over, step out)控制程序流程,检查堆栈和变量状态。 3) **DOM操作**: DOM是XML和...

    Ajax完全自学手册PPT和源代码(ptt格式)

    Test Firefox XMl DOm.htm Firefox中的XML DOM支持 Firefox LoadXML.htm Firefox中的XML DOM支持 XPath Example1.xml XPath Writer.xml 开发中实际使用的XML文档 Test4IE XPath.htm IE中的XPath支持 Test Firefox ...

    Ajax完全自学手册(源代码).rar

    Test Firefox XMl DOm.htm Firefox中的XML DOM支持 Firefox LoadXML.htm Firefox中的XML DOM支持 XPath Example1.xml XPath Writer.xml 开发中实际使用的XML文档 Test4IE XPath.htm IE中的XPath支持 Test ...

Global site tag (gtag.js) - Google Analytics