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

Agnes

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

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. Vecta Corp. is creating the next revolution of digital media applications that incorporates 2D, 3D, sound, and video into a single multimedia presentations that can be distributed on the Web, CD/DVD-ROM, Kiosks, or intranet environments.

Herbert

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 and is based at the company's global headquarters in San Diego. Although responsible for Vecta Corp's human resources strategies globally, Herbert's work is directly focused on assuring complete employee satisfaction and loyalty.

Mike

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. Mike joined Vecta Corp. in early 1998 and worked in business development roles prior to being assigned to lead Vecta Corp's global vSolutions sales and marketing team in the summer of 2000. He initiated Vecta Corp's global branding and marketing campaigns as vSolutions global director and then Vice President of Marketing. In 2001, his role expanded to include overall responsibility for corporate marketing, sales, and communications.

Wilbur

While Wilbur is the founder and CEO of Vecta Corp, he is primarily known for being the pioneer and world leader of creating vSolutions. Wilbur has led the commercialization of vSolution technology and its success as the worlds fastest-growing, most advanced technologies in its respective industry. Now used by tens of millions of consumers worldwide, vSolutions have been the technology of choice for governments and private organizations for nearly a decade.

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