JS读取XML文件

最新推荐文章于 2022-06-26 13:44:43 发布

nick848

最新推荐文章于 2022-06-26 13:44:43 发布

阅读量629

点赞数

分类专栏： Html

Html 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

通俗的来说互联网的作用就是跟数据打交道：存储、传输、显示、处理。XML作为跨平台的数据存储方式，其地位自然不用多说。

今天硬着头皮在W3上看了一点儿，记录如下。

先粘一段代码，免得以后忘了。

[html]view plaincopy 
   
 <%@page pageEncoding="UTF-8"%>  
 <html>  
 <!--   
   - Author(s): wangcc  
   - Date: 2012-05-25 16:07:14  
   - Description:  
 -->  
 <head>  
 <title>测试页</title>  
 <script type="text/javascript">  
     var xmlDoc = null;  
     /*将xml文档加入到解析器中*/  
     if (window.ActiveXObject)  
     {  
           // code for IE  
           xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  
     }  
     else if (document.implementation.createDocument)  
     {  
           // code for Firefox, Mozilla, Opera, etc.  
           xmlDoc=document.implementation.createDocument("","",null);  
     }  
     else  
     {  
           alert('Your browser cannot handle this script');  
     }  
     xmlDoc.async=false;  
     xmlDoc.load("cd_catalog.xml");  
     //得到所有CD节点  
     var x = xmlDoc.getElementsByTagName("CD");  
 </script>  
   
 </head>  
 <body ondblclick="display();">  
 <div id="show">点击表格显示详情:</div>  
 <script type="text/javascript">  
         //输出表格  
         document.write("<table border='1'>");  
         for (var i = 0; i < x.length; ++i)  
         {  
             document.write("<tr id='tr" + i + "' onclick='disDetail(" + i + ")'>");  
             //输出演唱者  
             document.write("<td>"   
                 + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue   
                 +  "</td>");  
             //输出专辑名称  
             document.write("<td>"   
                 + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue   
                 +  "</td>");  
             document.write("</tr>");  
         }  
         document.write("</table>");  
 </script>  
   
 </body>  
   
 <script type="text/javascript">  
   
     /*显示对应行的CD详情*/  
     function disDetail(i)  
     {  
         /*读取CD节点各个属性值*/  
         var artist = "artist: " +  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;  
         var bulm = "bulm: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;  
         var country = "country: " + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;  
         var company = "company: " + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue;  
         var price = "price: " + x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue;  
         var year = "year: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;  
         /*将读取的内容显示到DIV中*/  
         document.getElementById("show").innerHTML = artist + "<br>" + bulm + "<br>" + country + "<br>" + company + "<br>" +  
         price + "<br>" + year + "<br>";  
         /*点击一行变化颜色*/  
         var trChange = document.getElementById("tr" + i);  
         if(trChange.style.backgroundColor == 'blue')  
         {  
             trChange.style.backgroundColor = document.bgColor;  
         }  
         else  
         {  
             trChange.style.backgroundColor = "blue";  
         }  
     }  
 </script>  
   
 </html>  

下面是XML文件的节点示例

[html]view plaincopy 
   
  <?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>  
  </CATALOG>  

关键的知识点其实今天没有学到，就是XML DOM。通过它对XML文件的操作（读取、修改、新增节点）才是要点所在。这个任务留待明天吧。

将XML文件加载到解析器中去的代码可以重复使用，并且做到了浏览器的兼容性验证，十分类似xmlhttprequest那段。

转自：http://blog.csdn.net/wkupaochuan/article/details/7656904

nick848

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS读取XML文件

通俗的来说互联网的作用就是跟数据打交道：存储、传输、显示、处理。XML作为跨平台的数据存储方式，其地位自然不用多说。今天硬着头皮在W3上看了一点儿，记录如下。先粘一段代码，免得以后忘了。[html] view plaincopy%@page pageEncoding="UTF-8"%> html>
复制链接

扫一扫