48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Ajax</title>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="cache-control" content="must-revalidate, no-store, no-cache">
|
|
<style>*{font-family:Arial;}body{margin:24px auto;width:870px;}</style>
|
|
</head>
|
|
<body>
|
|
<h4>Test different document types</h4>
|
|
<button onclick="captureJSON()">Click here to capture JSON</button>
|
|
<button onclick="captureXML()">Click here to capture XML</button>
|
|
<button onclick="captureHTML()">Click here to capture HTML</button>
|
|
<div id="capturedJSON"></div><div id="capturedXML"></div><div id="HTML"></div>
|
|
<!-- <script src="js/jsonCap.js"></script> -->
|
|
<script>
|
|
function captureJSON() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onload = function() {
|
|
if (xhr.status >= 200 && xhr.status < 400) {
|
|
var div = document.getElementById('capturedJSON'),
|
|
content = '',
|
|
respObj = JSON.parse(xhr.responseText),
|
|
len = respObj.length,
|
|
i;
|
|
console.log(xhr.responseText);
|
|
content += '<table><tr><th>Company</th>';
|
|
content += '<th>First Name</th><th>Last Name</th><th>Title</th></tr>';
|
|
for (i = 0; i < len; i++) {
|
|
content += '<tr><td>' + respObj[i].Company + '</td>';
|
|
content += '<td>' + respObj[i]['First Name'] + '</td>';
|
|
content += '<td>' + respObj[i]['Last Name'] + '</td>';
|
|
content += '<td>' + respObj[i].Title + '</td></tr>';
|
|
if (i == len) content += '</table>';
|
|
}
|
|
if (div.innerHTML != '') content = '';
|
|
div.innerHTML = content;
|
|
} else {
|
|
console.log('Connection to Server succeeded. Content was not received due to error.');
|
|
}
|
|
};
|
|
xhr.open('GET', 'files/jsonData.json', true);
|
|
xhr.send();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|