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

Question

Most examples I've found haven't been helpful, as the data in this XML file is different than the examples I've seen, with fewer tags to help me loop through the data. 我发现的大多数示例都无济于事，因为此XML文件中的数据与我所看到的示例不同，仅用较少的标签即可帮助我遍历数据。 How can I, using pure javascript, parse the data of these movies into a table on my main HTML page. 如何使用纯JavaScript将这些电影的数据解析到我的HTML主页面上的表中。 I don't really have any current JavaScript to look at as I'm not even sure where to begin. 我真的没有当前的JavaScript，因为我什至不知道从哪里开始。 But simply, I need to have the data in my XML file show up in an HTML table with pure JavaScript. 但简单来说，我需要使用纯JavaScript将XML文件中的数据显示在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 file: 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>

Answer 1

You can use Ajax: (it's pur javascript): 您可以使用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); 
}

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

问题描述

1 个解决方案

解决方案1
1 2016-05-12 20:38:19

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

问题描述

1 个解决方案

解决方案1 1 2016-05-12 20:38:19

解决方案1
1 2016-05-12 20:38:19