I am not able to understand how to apply all element for the below question and
ID: 3708113 • Letter: I
Question
I am not able to understand how to apply all element for the below question and l need a good solution to display the elements inside the html with illustration
please l need good illustration and please test this code on visual studio code l need a good explanation not a unclear explanation or at least workable code to understand l am trying to learn not to copy a code
Part 1 - Ajax with JSON and XML Create a folder called Lab10. Note: if you do not have Visual Studio or another web mimic it for this lab [5 points] Person 1 1. ninse l te tsfbok and 2. Add a JSON file called members,json to the Lab10 folder with the following information: name Cara Van . address 2 Highway . city-Cleveland . zip 12345 * phone-999-999-9999 .level-Contributing ocost 65.00Explanation / Answer
I have uploaded all the required file on a shared folder in Google Drive(link below). Its working and quite simple and self explainatory(Just go through them, believe me they are easy and you will understand them). The questions.xml also contains the answers for the questions asked. Please check that and review it as it might contain my personal opinion for the last question asked.
https://drive.google.com/drive/folders/1rU3-m7j-RmzK2XDYr7MBkIcdnVMq6WPu?usp=sharing
In case, the link does work or is blocked, I am pasting all the code below:
[members.json]
{
"Person": [
{
"name": "Cara Van",
"address": "2 Highway",
"city": "Cleveland",
"zip": 12345,
"phone": "999-999-9999",
"level": "Contributing",
"cost": 65.00
},
{
"name": "Bill Bord",
"address": "1 Side of Street",
"city": "Parma",
"zip": 11111,
"phone": "123-123-1234",
"level": "Individual",
"cost": 50.00
}
]
}
---------------------------------------------------------------------------------------------------------------------
[memberships.xml]
<?xml version="1.0"?>
<memberships>
<membership>
<level>1</level>
<type>Seasonal</type>
<cost>35.00</cost>
</membership>
<membership>
<level>2</level>
<type>Individual</type>
<cost>50.00</cost>
</membership>
<membership>
<level>3</level>
<type>Family</type>
<cost>65.00</cost>
</membership>
<membership>
<level>4</level>
<type>Contributing</type>
<cost>70.00</cost>
</membership>
</memberships>
----------------------------------------------------------------------------------------------------------------------------------------------
[Lab10.html]
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>First Form</title>
</head>
<body>
<h1>Membership Levels</h1>
<span id="membershipLevels">
<button type="button">Click Me to Load Memberships using AJAX and XML</button>
</span>
<h1>Current Members</h1>
<span id="members">
<button type="button">Click Me to Load Members using AJAX and JSON</button>
</span>
<script>
function loadXML() {
console.log("Hi there");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
loadXMLFile(this);
}
};
xhttp.open("GET", "./memberships.xml", true);
xhttp.send();
}
function loadXMLFile(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<table border='1'><tr><th>Level</th><th>Type</th><th>Cost</th></tr>";
var x = xmlDoc.getElementsByTagName("membership");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("level")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("cost")[0].childNodes[0].nodeValue +
"</td></tr>";
}
table += "</table>";
document.getElementById("membershipLevels").innerHTML = table;
}
function loadJSON() {
console.log("Hi there");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
loadJSONFile(this);
}
};
xhttp.open("GET", "./members.json", true);
xhttp.send();
}
function loadJSONFile(json) {
var i;
var jsonDoc = JSON.parse(json.response);
console.log(jsonDoc);
var table = "<table border='1'><thead><tr><th>Name</th><th>Address</th><th>City</th><th>ZIp</th><th>Phone</th><th>Level</th><th>Cost</th></tr></thead>";
var x = jsonDoc["Person"];
for (i = 0; i < x.length; i++) {
console.log(x);
table += "<tbody><tr><td>" +
x[i]["name"] + "</td><td>" +
x[i]["address"] + "</td><td>" +
x[i]["city"] + "</td><td>" +
x[i]["zip"] + "</td><td>" +
x[i]["phone"] + "</td><td>" +
x[i]["level"] + "</td><td>" +
x[i]["cost"] + "</td></tr>";
}
table += "</tbody></table>";
document.getElementById("members").innerHTML = table;
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------
[questions.xml]
<?xml version="1.0" encoding="utf-8"?>
<questions>
<question id="question1">
<questiontext>Describe the purpose of AJAX. What advantage does AJAX provide over a traditional HTML form submit?</questiontext>
<answer id="answer1">Purpose of AJAX is to fetch data from server asynchronously. The advantage that AJAX provides over a traditional HTML form submit is that it does not block the flow of other server calls and renders data when it is fetched.</answer>
</question>
<question id="question2">
<questiontext>Describe the role of JSON and XML with AJAX.</questiontext>
<answer id="answer2">JSON and XML are very popular data formats and are emitted and consumed by a huge number of data services/sorces. With AJAX, JSON and XML act as a data transfer file formats and are used to load data on the page asynchronously. </answer>
</question>
<question id="question3">
<questiontext>If you had to choose just one, which would you choose : XML or JSON? Why?</questiontext>
<answer id="answer3">Both XML and JSON have there pros and cons but personally I would prefer JSON becouse of its smaller size and it also feels practical and natural while working with Javascript to use JSON.</answer>
</question>
</questions>
********************************************************************************************************************
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.