如何使用纯 JavaScript 将 XML 文件中的数据解析为 HTML 表？答案

【问题标题】：How can I parse data from XML file into HTML table using pure JavaScript?如何使用纯 JavaScript 将 XML 文件中的数据解析为 HTML 表？
【发布时间】：2016-09-08 20:59:08
【问题描述】：

我发现的大多数示例都没有帮助，因为此 XML 文件中的数据与我看到的示例不同，帮助我循环数据的标签更少。如何使用纯 javascript 将这些电影的数据解析为我的 HTML 主页面上的表格。我真的没有任何当前的 JavaScript 可供查看，因为我什至不知道从哪里开始。但很简单，我需要让我的 XML 文件中的数据使用纯 JavaScript 显示在 HTML 表中。

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="Sortable, Filterable Table">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    </head>

    <body>
    <h3>Movies</h3>
    <table id="movielist">
        <thead>
            <tr>
                <th>Title</th>
                <th>Rating</th>
                <th>Provider</th>
                <th>Release Date</th>
            </tr>
        </thead>
        <tbody>
        <tr id="be2aed9e-e95c-410e-8e29-9d51ca0c5149">
            <td>title here</td>
            <td>rating here</td>
            <td>provider here</td>
            <td>release date here</td>
        </tr>
        </tbody>
    </table>

</body>
</html>

xml 文件：

<?xml version="1.0" encoding="utf-8" ?>
<videos>

  <title>Adaptation</title>
  <provider>Sony</provider>
  <released>2002-01-01</released>
  <rating>R</rating>
  <id>9c0b316c-bd1c-434a-892a-fd68ce35791c</id>

  <title>Affliction</title>
  <provider>Lionsgate</provider>
  <released>2000-04-14</released>
  <rating>UR</rating>
  <id>afe95eb3-0561-436e-86bd-98679bd2bee8</id>

  <title>All About My Mother</title>
  <provider>Sony</provider>
  <released>1999-01-01</released>
  <rating>R</rating>
  <id>439c943f-f6c7-4164-bf79-f45558e35a02</id>

  <title>American Psycho</title>
  <provider>Lionsgate</provider>
  <released>1998-12-30</released>
  <rating>R</rating>
  <id>3c81ed9d-8c21-4d0f-8664-d9232d729555</id>

  <title>Anatomy Of A Murder</title>
  <provider>Sony</provider>
  <released>1959-01-01</released>
  <rating>NR</rating>
  <id>ecd614d3-0327-414c-aba5-91b1372b48d2</id>

  <title>The Apartment</title>
  <provider>MGM</provider>
  <released>1960-01-01</released>
  <rating>NR</rating>
  <id>4fc8780a-f698-4c84-b23f-c731c6ed4ba8</id>

  <title>The Aviator</title>
  <provider>Miramax</provider>
  <released>2004-01-01</released>
  <rating>PG-13</rating>
  <id>f3603cf6-314f-4be3-a232-16d6a873bc03</id>

  <title>Awakenings</title>
  <provider>Sony</provider>
  <released>1990-01-01</released>
  <rating>PG-13</rating>
  <id>1cb742d0-b469-4fec-9beb-8f276c3d850e</id>

  <title>Bad Education</title>
  <provider>Sony</provider>
  <released>2004-01-01</released>
  <rating>NC-17</rating>
  <id>50881988-e992-4075-b608-4846370af38d</id>

  <title>A Band Called Death</title>
  <provider>Cinedigm</provider>
  <released>2013-06-23</released>
  <rating>NR</rating>
  <id>8de9223d-4ffc-405d-a177-6310d7820409</id>

</videos>

【问题讨论】：

首先，检查XML DOM Tutorial，然后让我们知道是否有问题。

标签： javascript html xml html-table

【解决方案1】：

您可以使用 Ajax：（它是纯 javascript）：

function submitForm()
{ 
    var req = null; 
    if (window.XMLHttpRequest)
    {
        req = new XMLHttpRequest();
        if (req.overrideMimeType) 
        {
            req.overrideMimeType('text/xml');
        }
    } 
    else if (window.ActiveXObject) 
    {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e)
        {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
            }


    req.onreadystatechange = function()
    { 
        if(req.readyState == 4)
        {
            if(req.status == 200)
            {
                // process a XML document here
                var doc = req.responseXML;
                var element = doc.getElementsByTagName('your element').item(0);
                var result = element.firstChild.data;

            }   
            else    
            {
                var result="Error: returned status code " + req.status + " " + req.statusText;
            }   
        } 
    }; 
    req.open("GET", "your-file.xml", true); 
    req.send(null); 
}

【讨论】：