用AJAX 从XML 文件返回数据 -runoops.com

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用AJAX 从XML 文件返回数据 -runoops.com</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

th,
        td {
            padding: 5px;
        }
    </style>
</head>

<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>
    <br><br>
    <table id="demo"></table>

<script>
        function loadXMLDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    myFunction(this);
                }
            };
            xhttp.open("GET", "//demo.runoops.com/sources/xml/cd_catalog.xml", true);
            xhttp.send();
        }
        function myFunction(xml) {
            var i;
            var xmlDoc = xml.responseXML;
            var table = "<tr><th>Artist</th><th>Title</th></tr>";
            var x = xmlDoc.getElementsByTagName("CD");
            for (i = 0; i < x.length; i++) {
                table += "<tr><td>" +
                    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
                    "</td></tr>";
            }
            document.getElementById("demo").innerHTML = table;
        }
    </script>

</body>

</html>