admin/vkservicesllc.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/vkservicesllc/vkservicesllc.github.io

Browse Source
This commit is contained in:
vkservicesllc
2018-11-14 08:12:29 -05:00
parent 355345d7b2 da7840c6ea
commit de0e4e47ea
7 changed files with 178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ajax-requests/css/style.css Normal file
View File

@@ -0,0 +1,18 @@
* {
font-family: Arial;
}
body {
margin: 24px auto;
width: 920px;
}
button {
width: 280px;
}
table {
margin-top: 12px;
border-collapse: collapse;
}
th, td {
padding: 4px 9px;
border: 1px solid black;
}

32
ajax-requests/files/jsonData.json Normal file
View File

@@ -0,0 +1,32 @@
[
{
"Company": "CAROLINA LOGISTIC, INC",
"First Name": "Valentin",
"Last Name": "Khoroshkov",
"Title": "Driver Payroll"
},
{
"Company": "CAROLINA LOGISTIC, INC",
"First Name": "Daniel",
"Last Name": "Pilyev",
"Title": "IT Manager"
},
{
"Company": "CAROLINA LOGISTIC, INC",
"First Name": "Bob",
"Last Name": "Tumash",
"Title": "Dispatcher"
},
{
"Company": "CAROLINA LOGISTIC, INC",
"First Name": "Kevin",
"Last Name": "Bondarenko",
"Title": "Insurance"
},
{
"Company": "DELTA EXPRESS, INC",
"First Name": "Paul",
"Last Name": "Radchishin",
"Title": "Accounting"
}
]

32
ajax-requests/files/xmlData.xml Normal file
View File

@@ -0,0 +1,32 @@
<content>
<expense>
<category>Truck Diesel</category>
<group>FUEL</group>
<company>true</company>
</expense>
<expense>
<category>Reefer Diesel</category>
<group>FUEL</group>
<company>true</company>
</expense>
<expense>
<category>Scale</category>
<group>MISC</group>
<company>true</company>
</expense>
<expense>
<category>Lumper</category>
<group>MISC</group>
<company>false</company>
</expense>
<expense>
<category>Parts</category>
<group>MAINTENANCE</group>
<company>true</company>
</expense>
<expense>
<category>Cash Fee</category>
<group>FEES</group>
<company>true</company>
</expense>
</content>

39
ajax-requests/js/jsonCap.js Normal file
View File

@@ -0,0 +1,39 @@
console.log('jsonCap.js has loaded...');
function captureJSON() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var btn = document.getElementsByTagName('button')[0],
btnTxt = btn.textContent,
div = document.getElementById('capturedJSON'),
content = '',
check = div.innerHTML == content;
if (check) {
if (xhr.status >= 200 && xhr.status < 400) {
var respObj = JSON.parse(xhr.responseText),
len = respObj.length,
i;
content += '<table><tr><th>Company</th>';
content += '<th>First Name</th><th>Last Name</th><th>Title</th><th></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><td><input type="checkbox" checked></td></tr>';
if (i == len) content += '</table>';
}
btnTxt = btnTxt.replace('capture', 'hide');
var rh = xhr.getAllResponseHeaders();
console.log(rh);
} else {
console.log('Connection to Server succeeded. Content was not received due to error.');
}
} else {
btnTxt = btnTxt.replace('hide', 'capture');
}
div.innerHTML = content;
btn.textContent = btnTxt;
};
xhr.open('GET', 'files/jsonData.json', true);
xhr.send();
}

38
ajax-requests/js/xmlCap.js Normal file
View File

@@ -0,0 +1,38 @@
console.log('xmlCap.js has loaded...');
function captureXML() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var btn = document.getElementsByTagName('button')[1],
btnTxt = btn.textContent,
div = document.getElementById('capturedXML'),
content = '',
check = div.innerHTML == content;
if (check) {
if (xhr.status >= 200 && xhr.status < 400) {
var data = xhr.responseXML.getElementsByTagName('expense');
content += '<table><tr><th colspan="3">COMPANY EXPENSE</th></tr>';
content += '<tr><th>Category</th><th>Group</th><th>File<br>for<br>Tax</th></tr>';
for (var d = 0; d < data.length; d++) {
var checked = (data[d].getElementsByTagName('company')[0].textContent == 'true') ? ' checked' : '';
content += '<tr><td>' + data[d].getElementsByTagName('category')[0].textContent + '</td>';
content += '<td>' + data[d].getElementsByTagName('group')[0].textContent + '</td>';
content += '<td><input type="checkbox"' + checked + '></td></tr>';
}
content += '</table>';
btnTxt = btnTxt.replace('capture', 'hide');
var rh = xhr.getAllResponseHeaders();
console.log(rh);
} else {
console.log('Connection to Server succeeded. Content was not received due to error.');
}
} else {
btnTxt = btnTxt.replace('hide', 'capture');
}
div.innerHTML = content;
btn.textContent = btnTxt;
};
xhr.open('GET', 'files/xmlData.xml', true);
xhr.send();
}

18
ajax-requests/page.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="must-revalidate, no-store, no-cache">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h4>Test different document types</h4>
<button onclick="captureJSON()">Click here to capture JSON Data</button>
<button onclick="captureXML()">Click here to capture XML Data</button>
<button>Click here to capture HTML Data</button> <!-- onclick="captureHTML()" -->
<div id="capturedJSON"></div><div id="capturedXML"></div><div id="HTML"></div>
<script src="js/jsonCap.js"></script>
<script src="js/xmlCap.js"></script>
</body>
</html>

1
test/test.html Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>Test</title></head><body><h4>Test</h4></body></html>