使用Js解析xml字符串和xml文件

我们比较熟悉java中的xml解析，有多种方式可以解析，下面看看js中怎么解析xml的，折腾一下午，总结一下：

• 本地解析xml字符串：

  xml样式：

<note>
    <title>你是人间的四月天</title>
    <author>林徽因</author>
    <content>
    我说 你是人间的四月天；
    笑响点亮了四面风；
    轻灵在春的光艳中交舞着变。
    你是四月早天里的云烟，
    黄昏吹着风的软，
    星子在无意中闪，
    细雨点洒在花前。
    那轻，那娉婷，你是，
    鲜妍百花的冠冕你戴着，
    你是天真，庄严，
    你是夜夜的月圆。
    雪化后那片鹅黄，你像；
    新鲜初放芽的绿，你是；
    柔嫩喜悦，
    水光浮动着你梦期待中白莲。
    你是一树一树的花开，
    是燕在梁间呢喃，
    ——你是爱，是暖，是希望，
    你是人间的四月天
    <content>
</note>

在html中拼接的字段：

    txt='<note>';
    txt=txt+'<title>你是人间的四月天</title>';
    txt=txt+'<author>林徽因</author>';
    txt=txt+'<content>'
    +'我说 你是人间的四月天 '
    +'笑响点亮了四面风； '
    +'轻灵在春的光艳中交舞着变。 '
    +'你是四月早天里的云烟， '
    +'黄昏吹着风的软， '
    +' 星子在无意中闪， '
    +'细雨点洒在花前。'
    +' 那轻，那娉婷，你是'
    +' 鲜妍百花的冠冕你戴着 '
    +' 你是天真，庄严，' 
    +' 你是夜夜的月圆。 '
    +' 雪化后那片鹅黄，你像； '
    +'新鲜初放芽的绿，你是； '
    +' 柔嫩喜悦'
    +' 水光浮动着你梦期待中白莲.'
    +' 你是一树一树的花开，'
    +' 是燕在梁间呢喃,'
    +' ——你是爱，是暖，是希望'
    +'你是人间的四月天'
    +'</content>';
    txt=txt+"</note>";

使用js解析xml代码：

if (window.DOMParser)
    {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
        parser.parse;
    }
    else // Internet Explorer
    {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.loadXML(txt);
    }
    document.getElementById("title").innerHTML=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
    document.getElementById("author").innerHTML=xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
    document.getElementById("content").innerHTML=xmlDoc.getElementsByTagName("content")[0].childNodes[0].nodeValue;

字体样式设置：

 <style type="text/css">
        #title{
            color:red;
            display: inline;
            margin: 20px;
        }

        #author{
            color:green;
            display: inline;
            margin: 20px;
        }

        #content{
            color:blue;
            display: block;
            margin-top: 5px;
        }

    </style>

运行后效果图：

• xml文件解析

其它代码是一样的，访问读取这块不一样，代码如下：

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://localhost:8080/xml/note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

正常显示才对，但会报这样一个错误：

缺少头部信息，用tomcat配置也未成功，w3c上给的例子是可以成功的，但复制的本地，还是不成功：可以看这里，大概tomcat上跑的不能算跨域吧，这里貌似需要跨域。我再想想，有解决的可以给我说一下，感谢你哈,有问题还请多多指教….