Update test.html

This commit is contained in:
vkservicesllc
2018-11-06 20:22:46 -05:00
committed by GitHub
parent 7952927841
commit a7b8aaa478

View File

@@ -1,44 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <html>
<title>Test Document</title> <style>
<style> table,th,td {
body { border : 1px solid black;
width: 640px; border-collapse: collapse;
margin: 64px auto; }
font-family: Arial; th,td {
} padding: 5px;
table { border-collapse: collapse; } }
th, tr { border: 1px solid black; } </style>
</style>
</head>
<body> <body>
<h5>This is test page</h5>
<button type="button" onclick="displayInfo()">Test Button</button> <h2>The XMLHttpRequest Object</h2>
<div id="output"></div>
<script> <button type="button" onclick="loadDoc()">Get my CD collection</button>
function displayInfo() { <br><br>
alert('function is running...'); <table id="demo"></table>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = funtion() { <script>
if (this.readyState == 4 && this.status == 200) { function loadDoc() {
console.log('response received'); var xhttp = new XMLHttpRequest();
var data = JSON.parse(this.responseText), xhttp.onreadystatechange = function() {
keys = Object.keys(data), len = keys.length, if (this.readyState == 4 && this.status == 200) {
content = '<table><tr>'; myFunction(this);
for (var i = 0; i < len; i++) {
content += '<th>' + keys[i] + '</th>';
if (i == len) content += '</tr><tr>';
}
for (var j = 0; j < len; j++) {
content += '<td>' + data[keys[j]] + '</td>';
if (j == len) content += '</tr></table>';
}
document.getElementById('output').innerHTML = content;
}
};
xhttp.open('GET', 'test.json', true);
xhttp.send();
} }
</script> };
xhttp.open("GET", "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> </body>
</html> </html>