Update test.html
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user