Three ways to read xml files in HTML

When I first started learning here, I was a little confused, I had never learned it before. But I have been exposed to xml files when I learn Android animation (Animation), and it is not difficult in general.
Generally speaking, the xml file is used to store data, and then html reads it. There are mainly three reading methods.

Reading xml files with CSS

//CSS代码：设置xml数据的显示格式

students{
    display:table;
    border-top-width: 2mm;
    border-right-width: 1mm;
    border-bottom-width: 2mm;
    border-left-width: 1mm;
    border-collapse:collapse;
    border-collapse:collapse;
    margin:auto;
    margin-top:20px;
    }
student{
    display:table-row;
    line-height:24px;
    }
sn,name,sex,nation,add,pro{
    display:table-cell;
    border:1px solid;
    padding:6px;
}

//xml文件：放置测试数据，以下代码均是基于该xml文件
<?xml version="1.0" encoding="utf-8"?>
<!-- 与css文件对应  -->
<?xml-stylesheet type="text/css" href="cssformat.css"?>
<students>
 <student>
 <sn>20040112</sn>
 <name>张三</name> 
 <sex>男</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
 <student>
 <sn>20040201</sn>
 <name>李四</name> 
 <sex>女</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
 <student>
 <sn>20031514</sn>
 <name>王五</name> 
 <sex>女</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
 <student>
 <sn>20031514</sn>
 <name>赵六</name> 
 <sex>女</sex> 
 <nation>汉族</nation>  
 <add>山东</add>   
 <pro>计算机</pro>
 </student>
</students>

//html代码：让xml文件的内容显示到html上，src的值与xml文件对应
<iframe src="cssxml.xml" width="500px" height="200px" frameborder="0"></iframe>

Because this method is not used much, it will not be described in detail.

Using XSLT to read xml files

First of all, you need to create a new xslt file (the suffix is .xsl) . If you use Dreamweaver, you can easily create it.

The xslt file can use html tags, the code is as follows:

<!-- 注意DWXMLSource的值为解析目的xml文件 -->
<?xml version="1.0" encoding="utf-8"?><!-- DWXMLSource="cssxml.xml" -->

...

<!-- 在body里添加以下代码 -->
<table border="1" cellpadding="2" align="center">
      <caption>studentlist</caption>
      <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>性别</td>
      <td>民族</td>
      <td>籍贯</td>
      <td>专业</td>
      </tr>
      <!-- xsl里的遍历语句，可以与xml文件的内容一一对应 -->
      <xsl:for-each select="students/student">
      <tr>
      <!-- 与xml文件的标签一一对应 -->
      <td align="center"><xsl:value-of select="sn"/></td>
      <td align="center"><xsl:value-of select="name"/></td>
      <td align="center"><xsl:value-of select="sex"/></td>
      <td align="center"><xsl:value-of select="nation"/></td>
      <td align="center"><xsl:value-of select="add"/></td>
      <td align="center"><xsl:value-of select="pro"/></td>
      </tr>
      </xsl:for-each>
      </table>

...

This method may not be used much, and it will not be explained in detail (Tucao: it is more difficult to use less, and simpler to use more)

JS reads xml file

Go directly to the code, as follows:


...


<table border="1" cellpadding="2" align="center">
      <caption>
      使用DOM显示XML文档
      </caption>
      <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>民族</td>
        <td>籍贯</td>
        <td>专业</td>
      </tr>
      <script type="text/javascript">
      var isie = true;
      //所读取xml文件
      var xmlDoc = getxmlDoc("cssxml.xml");

        var stuList = xmlDoc.getElementsByTagName("student");
   for(var i=0;i<stuList.length;i++){
       document.write("<tr>");
       var subList = stuList[i].childNodes;
       for(var j=0;j<subList.length;j++){
           document.write("<td>"+subList[j].text+"</td>");
           }
           document.write("</tr>");
       }
        //获取xmlDoc对象，兼容浏览器，参考网上代码
        function getxmlDoc(xmlFile) {
            var xmlDoc;
            if (window.ActiveXObject) {
                xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE
                xmlDoc.async = false;
                xmlDoc.load(xmlFile);
            }
            else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐

                xmlDoc = document.implementation.createDocument('', '', null);
                xmlDoc.load(xmlFile);
            }
            else{ //谷歌
              var xmlhttp = new window.XMLHttpRequest();
                xmlhttp.open("GET",xmlFile,false);
                xmlhttp.send(null);
                if(xmlhttp.readyState == 4){
                xmlDoc = xmlhttp.responseXML.documentElement;
                } 
            }

            return xmlDoc;
        }

      </script>
    </table>

...

It should be emphasized that , like IE browser, when executing this code, a prompt will appear, as shown in the following figure:
write picture description here
You must click "Allow Blocked Content" to display the xml data

But the easiest and best way to use the most compatible method is naturally jQuery, but it is too simple. If you are interested, you can search it online. There are many resources, so I will not talk nonsense~~