`
lizaochengwen
  • 浏览: 662462 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS- 操作 XML(兼容IE/FF/Chrome,Safari)

阅读更多
今天同事有需要JS显示XML!
后来就做了一个效果!或许以后能用的着呢! ^_^
JS读取并输出xml文件节点及属性(兼容IE,FF) !
好东东发出来分享一下了!
代码如下:
Html代码 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <title>JS读取XML兼容IE/FF/Chrome,Safari</title>  
    <style>  
    li{list-style:none;}  
    </style>  
    <script type="text/javascript">  
    //==============================================================  
    var orderDoc;  
    //获取xml文件  
    function loadXmlFile(xmlFile){  
      var xmlDom = null;  
      if (window.ActiveXObject){  
        xmlDom = new ActiveXObject("Microsoft.XMLDOM");  
        xmlDom.async=false;  
       xmlDom.load(xmlFile)||xmlDom.loadXML(xmlFile);//如果用的是XML字符串//如果用的是xml文件  
      }else if (document.implementation && document.implementation.createDocument){  
        var xmlhttp = new window.XMLHttpRequest();  
        xmlhttp.open("GET", xmlFile, false);  
        xmlhttp.send(null);  
        xmlDom = xmlhttp.responseXML;  
      }else{  
        xmlDom = null;  
      }  
      return xmlDom;  
    }  
    //判断子节点为不为空  
    function isnull(obj)  
    {  
        var nodevalue = "";  
        if(obj.childNodes[0] != null)  
        {  
            nodevalue =obj.childNodes[0].nodeValue;  
        }  
        return nodevalue;  
    }  
    var stringsss="";  
    //根据编号获取数据  
    function getDataByid(number)  
    {  
        var time =isnull(orderDoc.getElementsByTagName("time")[number]);  
        var place =isnull(orderDoc.getElementsByTagName("place")[number]);  
        var reason =isnull(orderDoc.getElementsByTagName("reason")[number]);  
        var unit = isnull(orderDoc.getElementsByTagName("unit")[number]);  
        var money =isnull(orderDoc.getElementsByTagName("money")[number]);  
        var status =isnull(orderDoc.getElementsByTagName("status")[number]);  
        var docNum =isnull(orderDoc.getElementsByTagName("docNum")[number]);  
        var score =isnull(orderDoc.getElementsByTagName("score")[number]);  
        var std='<li><b>网址:'+(time)+'<br />站名称:'+(place)+'<br />描述:'+(reason)+'</b></li>';  
        return std;  
    }  
      
    //获得页面内容  
    function getContent(){  
        //exBrows();  
        orderDoc=loadXmlFile("http://www.ok22.org/download/ex2.xml");  
            var items=orderDoc.getElementsByTagName("results").length;  
            //alert(orderDoc.getElementsByTagName("Item").length);  
            var htmlstr="";  
            stringsss+='<ul>';  
            for(i=0;i<items;i++){  
                stringsss+=getDataByid(i);  
            }  
            stringsss+='</ul>'  
            document.write(stringsss);  
    }  
    </script>  
      
    </head>  
      
    <body>  
    </body>  
    <script type="text/javascript" language="javascript">  
    getContent();  
    </script>  
    </html>  


因为XML有可能为空所以添加了一个判断节点是否为空!
Js代码 

    //判断子节点为不为空  
    function isnull(obj)  
    {  
        var nodevalue = "";  
        if(obj.childNodes[0] != null)  
        {  
            nodevalue =obj.childNodes[0].nodeValue;  
        }  
        return nodevalue;  
    }  



转自:http://www.ok22.org/art_detail.aspx?id=137
分享到:
评论

相关推荐

    js操作XML文件(兼容FF,IE)

    本文将详细探讨如何在JavaScript中操作XML文件,并确保代码在Firefox和IE之间具有良好的兼容性。 1. **创建XML对象**: 在JavaScript中,可以使用`ActiveXObject`(仅适用于IE)或`DOMParser`(通用方法)来创建...

    JS画图(非VML)–兼容IE/FF

    对于支持SVG的浏览器(如现代版的IE、Firefox、Chrome、Safari和Opera),可以直接通过内嵌或引用外部SVG文件来实现图形绘制。为了确保在不支持SVG的旧版IE中正常显示,可以使用polyfill库,如`Modernizr`或`Raphaë...

    JAVASCRIPT加载XML文档及操作XML文档的方法[归类].pdf

    - 所有现代浏览器(如IE、Firefox、Chrome、Safari等)都内置了XML解析器,用于将XML文档转换为可被JavaScript访问的DOM(Document Object Model)对象。 - 微软的XML解析器(如ActiveXObject("Microsoft.XMLDOM")...

    XML提问时的的的的的的附件

    4. **JavaScript兼容性**:如果使用JavaScript操作XML,可能需要检查代码是否跨浏览器兼容。 5. **CSS样式问题**:如果XML数据是通过CSS样式控制显示,确保CSS代码在Firefox中有效。 解决这个问题的方法可能包括:...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    ExtAspNet_v2.3.2_dll

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    js上传预览支持FF图片上传预览的ajax上传组件

    在早期,由于浏览器之间的差异,尤其是Firefox与其他主流浏览器如Chrome、Safari和IE的差异,图片预览功能的实现并不简单。例如,Firefox不支持HTML5的FileReader API,这是现代浏览器中实现图片预览的主要方式。 ...

    无限级联动下拉菜单

    无限级联动下拉菜单 ... 兼容性强:IE6/7/8/9,ff12,chrome18,opera12,safari全部通过 代码简洁:代码不足80行 功能强大:可支持无限级下拉 效率优先:只请求一次XML文件,不经过数据库 配置简单:声明一个id就可以工作

    JAVA_jsp任意浏览器的图片上传预览

    不同的浏览器,如Internet Explorer(IE)、Firefox、Safari、Opera和Chrome,由于其渲染引擎和API支持的差异,对本地文件操作的支持各不相同。例如,IE6、IE7、IE8、IE9以及Firefox的不同版本之间就存在显著的区别...

    css圆角代码_blog.huhunet.com

    2. **圆角兼容性**:`border-radius`属性在大多数现代浏览器中都得到了很好的支持,包括Chrome、Firefox、Safari、Edge和IE9及以上版本。对于不支持此属性的老式浏览器,可能需要使用渐进增强或优雅降级策略,或者...

    css.rar_css

    请注意,这些CSS样式只适用于基于WebKit的浏览器,如Chrome和Safari。对于Firefox和其他不支持Webkit前缀的浏览器,可能需要使用其他CSS属性和方法来实现类似效果。尽管浏览器兼容性是定制滚动条样式的一个挑战,但...

    HTML5的新技术,可以使新手们多多了解HTML5的强大。

    - **2000**: XHTML1的出现强调了文档的XML兼容性。 - **2002**: DIV+CSS布局成为网页设计的标准实践。 - **2005**: AJAX技术的兴起使得网页可以实现异步加载数据,提升了用户体验。 - **2009**: HTML5草案的发布标志...

    CSS教程:CSS3圆角属性

    Safari和Chrome(基于WebKit内核)使用-webkit-前缀,对应的属性为-webkit-border-radius。例如: ```css element { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } ``` 这样...

    页面渲染原理剖析.pdf

    IE、MaxThon、TT、The World、360、搜狗浏览器等,Gecko 内核用于 Netscape6 及以上版本、FF、MozillaSuite/SeaMonkey 等,Presto 内核用于 Opera7 及以上版本,而 Webkit 内核用于 Safari、Chrome 等。 页面渲染...

    非常简单的个人博客CSS模板_蓝色 头部 简单 个人 博客 白色 web20.rar

    开发者需要确保模板在主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作,可能需要用到如autoprefixer工具来自动添加必要的浏览器前缀。 总的来说,这个压缩包提供的CSS模板是一个学习和应用CSS...

    介绍网页的一些基本常识

    浏览器是网页展示的平台,常见的有Chrome、Firefox、Safari和Edge等。它们解析HTML、CSS和JavaScript代码,将这些抽象的代码转化为可视化的网页。浏览器的开发者工具是前端开发者的得力助手,可以实时查看和调试网页...

Global site tag (gtag.js) - Google Analytics