Question: Convert an Ajax application from XML to JSON. In this exercise, youwill modify anAjax application so that it uses a JSON file instead of an
Convert an Ajax application from XML to JSON. In this exercise, youwill modify anAjax application so that it uses a JSON file instead of an XML file. The web page for this application should remain the same as it was when the XML file was used:
Modify the $.ajax method so that it gets the data instead from the JSON file instead of the XML file.
You will also find a file named team.json that should be used for the Ajax request instead of the file named team.xml.
/****************CODES***************************/
INDEX.HTML
$(document).ready(function() {
$.ajax({
type: "get",
url: "team.xml",
beforeSend: function() {
$("#team").html("Loading...");
},
timeout: 10000,
error: function(xhr, status, error) {
alert("Error: " + xhr.status + " - " + error);
},
dataType: "xml",
success: function(data) {
$("#team").html("");
$(data).find("management").children().each(function() {
var xmlDoc = $(this);
$("#team").append("
" +
xmlDoc.find("name").text() + "" +
xmlDoc.find("title").text() + " " +
xmlDoc.find("bio").text() + " ");
});
}
});
});
- Home
- About Us
- Solutions
- Support
- Contact Us
The Vecta Corp. Management Team
MAIN.CSS
html {
background-color: #dfe3e6;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 25px;
background: #fff;
width: 697px;
margin: 15px auto 0 auto;
}
header {
height: 100px;
background: url('images/logo.gif') no-repeat 25px;
}
nav {
width: 235px;
float: left;
}
nav ul {
list-style-type: none;
}
nav ul li a:link, nav ul li a:visited, main h2 {
font-size: 14px;
font-weight: bold;
background: #dfe3e6 url('images/bullet.gif') no-repeat 7px center;
padding: 3px 0 3px 20px;
border: solid #929ca4 1px;
color: #cc1c0d;
}
nav ul li a:link, nav ul li a:visited {
width: 110px;
margin-bottom: 15px;
text-decoration:none;
display: block;
}
nav ul li a:hover {
color: #000;
background-color: #ccc;
}
main {
width: 447px;
float: left;
background-color: #fff;
padding-right: 15px;
}
h3 {
margin: 1em 0 0;
color: #000080;
}
footer {
height: 35px;
background: url('images/footer.gif');
clear: both;
}
TEAM.JSON
{"teammembers":[
{
"name":"Agnes",
"title":"Vice President of Accounting",
"bio":"With over 14 years of public accounting and business advisory service experience in the Tongas, Ecuador, Canada, Botswana and the US, Agnes is the most seasoned and diversed member of the Vecta Corp. team."
},
{
"name":"Damon",
"title":"Director of Development",
"bio":"Damon is the Director of Development for Vecta Corp. Damon creates learning materials for Vecta Corp. as well as consulting for customers to integrate vSolutions into their production pipeline and business processes."
},
{
"name":"Herbert",
"title":"Director of Human Resources",
"bio":"Herbert joined Vecta Corp. in October 1999 as Vecta Corp's first Human Resources Director. As such, he has overall human resources responsibility for Vecta Corp's operations worldwide."
},
{
"name":"Mike",
"title":"Vice President of Sales and Marketing",
"bio":"Mike serves as the Vice President of Sales and Marketing for Vecta Corp. In this role Mike oversees Vecta Corp's marketing and corporate communications efforts worldwide."
},
{
"name":"Wilbur",
"title":"Founder and CEO",
"bio":"While Wilbur is the founder and CEO of Vecta Corp, he is primarily known for being the pioneer and world leader of creating vSolutions."
}
]}
TEAM.XML
IMAGE FILES
bullet.gif 
footer.gif 
logo.gif 
mainbg.gif 
Home The Vecta Corp. Management Team Agnes Vice President of Accounting With over 14 years of public accounting and business advisory service experience in the Tongas, Ecuador, Canada, Botswana and the US, Agnes is the most seasoned and diversed member of the Vecta Corp. team. Damon Director of Development Damon is the Director of Development for Vecta Corp. Damon creates learning materials for Vecta Corp. as well as consulting for customers to ntegrate vSolutions into their production pipeline and business processes. About Us Solutions support Contact Us
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help