XML巩固

  一、XML基础

       1、XML区分大小写，

       2、XML属性值必须有引号（单引双引均可）

       3、XML必须有根元素

       4、一些特殊字符的需要用实体引用来替换

&lt; < 小于
&gt; > 大于
&amp; & 和号
&apos; ' 单引号
&quot; " 引号

       5、关于属性和元素的选择上，W3C极力向我们传递的理念是：元数据（有关数据的数据）应当存储为属性，而数据本身应当存储为元素。

       6、XML与CSS

         在XML中添加css样式表的方法：<?xml-stylesheet type="text/css" href="cd_catalog.css"?>

         使用 CSS 格式化 XML 不是常用的方法，更不能代表 XML 文档样式化的未来。W3C 推荐使用 XSLT。

二、XML JavaScript

      XML的解析

      1、XML文件

           方法一：

 1 <script type="text/javascript">
 2     var xmlHR = null;
 3     if (window.XMLHttpRequest) {
 4         //现代浏览器
 5        xmlHR = new XMLHttpRequest();
 6     }else{
 7         //IE5 IE6
 8        xmlHR = new ActiveXObject(Microsoft.XMLHTTP);
 9     }
10 
11      xmlHR.open("Get","note.xml",false);
12      xmlHR.send();
13      xmlDoc = xmlHR.responseXML;
14  </script>
View Code

           方法二：

1  <script type="text/javascript">
2     var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
3     xmlDoc.async="false";
4     xmlDoc.load("note.xml");
5  </script>
View Code

          方法三：（非IE浏览器）

1 <script type="text/javascript">
2    var xmlDoc=document.implementation.createDocument("","",null);
3    xmlDoc.async="false";
4    xmlDoc.load("note.xml");
5  </script>
View Code

     2、XML字符串

 1 <script type="text/javascript">
 2  txt="<bookstore><book>";
 3  txt=txt+"<title>Everyday Italian</title>";
 4  txt=txt+"<author>Giada De Laurentiis</author>";
 5  txt=txt+"<year>2005</year>";
 6  txt=txt+"</book></bookstore>";
 7 
 8  if (window.DOMParser)
 9  {
10      parser=new DOMParser();
11      xmlDoc=parser.parseFromString(txt,"text/xml");
12  }
13  else // Internet Explorer
14  {
15     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
16     xmlDoc.async="false";
17     xmlDoc.loadXML(txt);
18   }
19 </script>
View Code

  注：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象；

        loadXML() 方法用于加载字符串（文本），load() 用于加载文件。

 三、XML实例

     这里例子是解析本地的一个XML，将里面内容显示在页面Table中，当鼠标放在某一行时，在鼠标位置显示这一行的具体内容。

     本地XML文件：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited with XML Spy v2007 (http://www.altova.com) -->
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>Still got the blues</TITLE>
        <ARTIST>Gary Moore</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Virgin records</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Eros</TITLE>
        <ARTIST>Eros Ramazzotti</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>BMG</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>One night only</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1998</YEAR>
    </CD>
    <CD>
        <TITLE>Sylvias Mother</TITLE>
        <ARTIST>Dr.Hook</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS</COMPANY>
        <PRICE>8.10</PRICE>
        <YEAR>1973</YEAR>
    </CD>
    <CD>
        <TITLE>Maggie May</TITLE>
        <ARTIST>Rod Stewart</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Pickwick</COMPANY>
        <PRICE>8.50</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Romanza</TITLE>
        <ARTIST>Andrea Bocelli</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.80</PRICE>
        <YEAR>1996</YEAR>
    </CD>
    <CD>
        <TITLE>When a man loves a woman</TITLE>
        <ARTIST>Percy Sledge</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Black angel</TITLE>
        <ARTIST>Savage Rose</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Mega</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>1999 Grammy Nominees</TITLE>
        <ARTIST>Many</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Grammy</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1999</YEAR>
    </CD>
    <CD>
        <TITLE>For the good times</TITLE>
        <ARTIST>Kenny Rogers</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Mucik Master</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>Big Willie style</TITLE>
        <ARTIST>Will Smith</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>Tupelo Honey</TITLE>
        <ARTIST>Van Morrison</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>8.20</PRICE>
        <YEAR>1971</YEAR>
    </CD>
    <CD>
        <TITLE>The very best of</TITLE>
        <ARTIST>Cat Stevens</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Island</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Stop</TITLE>
        <ARTIST>Sam Brown</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>A and M</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Bridge of Spies</TITLE>
        <ARTIST>T'Pau</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Siren</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Private Dancer</TITLE>
        <ARTIST>Tina Turner</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Capitol</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1983</YEAR>
    </CD>
    <CD>
        <TITLE>Midt om natten</TITLE>
        <ARTIST>Kim Larsen</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Medley</COMPANY>
        <PRICE>7.80</PRICE>
        <YEAR>1983</YEAR>
    </CD>
    <CD>
        <TITLE>Pavarotti Gala Concert</TITLE>
        <ARTIST>Luciano Pavarotti</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>DECCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1991</YEAR>
    </CD>
    <CD>
        <TITLE>The dock of the bay</TITLE>
        <ARTIST>Otis Redding</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Picture book</TITLE>
        <ARTIST>Simply Red</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Elektra</COMPANY>
        <PRICE>7.20</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Red</TITLE>
        <ARTIST>The Communards</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>London</COMPANY>
        <PRICE>7.80</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Unchain my heart</TITLE>
        <ARTIST>Joe Cocker</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>EMI</COMPANY>
        <PRICE>8.20</PRICE>
        <YEAR>1987</YEAR>
    </CD>
</CATALOG>
View Code

     解析它的HTMl和JavaScript代码

<!DOCTYPE html>
<html>
  <head>
      <title>xmlapplication</title>
      <meta charset="utf-8">

    <style type="text/css">
       #detailInfo_Div{width: 300px; overflow: visible; border:solid 1px #000; display:none; position: absolute;z-index: 100; background: yellow;} 
    </style>


      <script type="text/javascript">
     if (window.XMLHttpRequest) {
         xmlHR = new XMLHttpRequest();
     }else{
         xmlHR = new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlHR.open("GET","CD.xml",false);
     xmlHR.send();
     xmlDoc = xmlHR.responseXML;
     x = xmlDoc.getElementsByTagName("CD");
    </script>


  </head>
  <body>
      <div id='showCD'>点击某个 CD 就可显示专辑信息：</div><br />
    <div id="detailInfo_Div"></div>
      <script type="text/javascript">
       document.write("<table border='1'>");
       for (var i = 0; i < x.length; i++) {
         document.write("<tr>");
         document.write("<td>");
         document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
         document.write("</td><td>");
         document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
         document.write("</td></tr>");
       };
       document.write("</table");
    </script>   
  </body>

  <script type="text/javascript">
       //var a= x;
      //这个方法封装了事件绑定的方法 兼容IE和其他浏览器
      function addEvent(element,evnt,funct){
         if (element.attachEvet)
           return element.attachEvet("on"+evnt,funct);  //IE
         else
           return element.addEventListener(evnt,funct,false);
      }

      //这里定义在界面加载完成后将每一个tr都绑定一个mouse事件
      window.onload = function(){     
        var trTags = document.getElementsByTagName("tr");
        for (var i = 0; i<trTags.length; i++) {
          addEvent(trTags[i],"mouseover",trClickFunc); 
          addEvent(trTags[i],"mouseleave",function(){document.getElementById("detailInfo_Div").style.display = "none"; })
        };
      }
       //这个方法定义了鼠标放上到tr后执行的方法
      function trClickFunc(event){
         //设置详情框的内容
         var a = window.x;
         var trIndex = this.sectionRowIndex;
         var bookTitle = a[trIndex].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
         var bookAnthor = a[trIndex].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
         var bookCountry = a[trIndex].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;
         var bookCompany = a[trIndex].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue;
         var bookPrice = a[trIndex].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue;
         var bookYear = a[trIndex].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
         var dispDiv = document.getElementById("detailInfo_Div");
         dispDiv.innerHTML = "bookTitle:"+bookTitle+"<br>"+"bookAnthor:"+bookAnthor+"<br>"+"bookCountry:"+bookCountry+"<br>"+"bookCompany:"+bookCompany+"<br>"+"bookPrice:"+bookPrice+"<br>"+"bookYear:"+bookYear;
         //获取鼠标位置
         var x = event.clientX;
         var y = event.clientY;
         //设定详情框的位置
         dispDiv.style.left = x+"px";
         dispDiv.style.top = y+"px";
         dispDiv.style.display="block";
      } 
  </script>
</html>
View Code

 最后的运行结果：

                         ；

注：由于XML文件在本地，并未发布到服务器，在使用IE和chrome浏览器时会报如下错误：XMLHttpRequest cannot load file:///E:/improving/XML/CD.xml. Cross origin requests are only supported for HTTP.

这是因为这些浏览器做了安全限制，禁止浏览器访问本地磁盘上的文件，但使用Firefox可以避免这个问题。详见http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht

 

posted @ 2014-07-30 17:56  woowyl  阅读(169)  评论(0)  编辑  收藏  举报