Can someone help with my assignment that focuses on AJAX and JASON. Write an HTM
ID: 3600996 • Letter: C
Question
Can someone help with my assignment that focuses on AJAX and JASON.
Write an HTML with JavaScript (and probably image files or CSS) that display the content of the attached XML file (computers.xml). The javascript should not try to access any files other than the supplied XML file.The webpage should be well formatted for easy reading.
Note that you can only use AJAX and JSON methods as shown below and no other methods.I will provide examples below the (computers.xml).
Computers.xml
<computer_list>
<computer>
<model_name>ATIV Book 4</model_name><type>Laptop</type><manufacturer>Samsung</manufacturer><operating_system>Windows 8</operating_system>
</computer>
<computer>
<model_name>C7 Chromebook</model_name><type>Laptop</type><manufacturer>Samsung</manufacturer><operating_system>Chrome OS</operating_system>
</computer>
<computer><model_name>Pavillion Slimline</model_name>
<type>Desktop</type><manufacturer>HP</manufacturer><operating_system>Windows 8</operating_system>
</computer>
<computer>
<model_name>Jackal 1U</model_name><type>Server</type><manufacturer>System76</manufacturer><operating_system>Ubuntu</operating_system></computer>
<computer>
<model_name>Power 710
Express</model_name>
<type>Server</type><manufacturer>IBM</manufacturer><operating_system>AIX</operating_system></computer>
</computer_list>
XML example
HTML
data.xml
data-xml.js
AJAX Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery - Chapter 8: Ajax & JSON - .ajax() 1 of 3</title>
<link rel="stylesheet" href="css/c08.css" />
</head>
<body>
<header>
<h1>THE MAKER BUS</h1>
<nav>
<a href="jq-ajax.html" class="current">HOME</a>
<a href="jq-ajax2.html">ROUTE</a>
<a href="jq-ajax3.html">TOYS</a>
</nav>
</header>
<section id="content">
<div id="container">
<h2>Fifteen tons of fun!</h2>
<div class="third">
<img src="img/home1.jpg" alt="Quadcopter" />
<p>Roll up! Roll up! All aboard, for the magical maker bus ride. Next August, we're heading from the west coast to east coast, sharing the maker fun as we travel in our vintage Leyland bus.</p>
</div>
<div class="third">
<img src="img/home2.jpg" alt="Circuit boards" />
<p>Fly our JavaScript controlled quadcopters, filming the location from above as you soar with the birds. Or, if you prefer to stay on the ground, enter the maker jam.</p>
</div>
<div class="third">
<img src="img/home3.jpg" alt="Wheely thing" />
<p>The theme of this year's maker-jams is the future of travel. We'll be piling our bus high with arduinos, breadboards, controllers, diodes, engravers, files... Enter today.</p>
</div>
</div>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jq-ajax.js"></script>
</body>
</html>
jq-ajax.js
$('nav a').on('click', function(e) {
e.preventDefault();
var url = this.href; // URL to load
var $content = $('#content'); // Cache selection
$('nav a.current').removeClass('current'); // Update links
$(this).addClass('current');
$('#container').remove(); // Remove content
$.ajax({
type: "GET", // GET or POST
url: url, // Path to file
timeout: 2000, // Waiting time
beforeSend: function() { // Before Ajax
$content.append('<div id="load">Loading</div>'); // Load message
},
complete: function() { // Once finished
$('#load').remove(); // Clear message
},
success: function(data) { // Show content
$content.html( $(data).find('#container') ).hide().fadeIn(400);
},
error: function() { // Show error msg
$content.html('<div class="container">Please try again soon.</div>');
}
});
});
JSON Example
HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery - Chapter 8: Ajax & JSON - .getJSON()</title>
<link rel="stylesheet" href="css/c08.css" />
</head>
<body>
<header>
<h1>THE MAKER BUS</h1>
</header>
<section id="content">
<div class="half">
<img src="img/register-circuitboard.jpg" alt="circuit board" />
</div>
<div class="half" id="exchangerates">
</div>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jq-getJSON.js"></script>
</body>
</html>
jq-getJSON.js
$('#exchangerates').append('<div id="rates"></div><div id="reload"></div>');
function loadRates() {
$.getJSON('data/rates.json')
.done( function(data){ // SERVER RETURNS DATA
var d = new Date(); // Create date object
var hrs = d.getHours(); // Get hours
var mins = d.getMinutes(); // Get mins
var msg = '<h2>Exchange Rates</h2>'; // Start message
$.each(data, function(key, val) { // Add each rate
msg += '<div class="' + key + '">' + key + ': ' + val + '</div>';
});
msg += '<br>Last update: ' + hrs + ':' + mins + '<br>'; // Show update time
$('#rates').html(msg); // Add rates to page
}).fail( function() { // THERE IS AN ERROR
$('#rates').text('Sorry, we cannot load rates.'); // Show error message
}).always( function() { // ALWAYS RUNS
var reload = '<a id="refresh" href="#">'; // Add refresh link
reload += '<img src="img/refresh.png" alt="refresh" /></a>';
$('#reload').html(reload); // Add refresh link
$('#refresh').on('click', function(e) { // Add click handler
e.preventDefault(); // Stop link
loadRates(); // Call loadRates()
});
});
}
loadRates(); // Call loadRates()
rates.json
{
"UK": "20.00",
"US": "35.99",
"AU": "39.99"
}
Explanation / Answer
Ans:
<!DOCTYPE html>
<html>
<head>
<title>Computer models</title>
<link rel="stylesheet" href="css/computer.css" />
</head>
<body>
<header>
<h1>Computer Lists</h1>
<nav>
<a href="jq-ajax.html" class="current">Electronics</a>
<a href="jq-ajax2.html">Computers</a>
</nav>
</header>
<section id="content">
<div id="container">
<h2>Models</h2>
<div class="third">
<p>ATIV Book 4</p><p>Laptop</p><p>Samsung</p><p>Windows 8</p>
<img src="img/computer1.jpg" alt="Quadcopter" />
</div>
<div class="third">
<p>C7 Chromebook</p><p>Laptop</p><p>Samsung</p><p>Chrome OS</p>
<img src="img/computer2.jpg" alt="Laptop" />
</div>
<div class="third">
<p>Pavillion Slimline</p><p>Desktop</p><p>HP</p><p>Windows 8</p>
<img src="img/computer3.jpg" alt="laptop2" />
</div>
<div class="third">
<p>Jackal 1U</p><p>Server</p><p>System76</p><p>Ubuntu</p>
<img src="img/computer4.jpg" alt="laptop2" />
</div>
<div class="third">
<p>Power 710 Express</p><p>Server</p><p>IBM</p><p>AIX</p>
<img src="img/computer5.jpg" alt="laptop2" />
</div>
</div>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jq-ajax.js"></script>
</body>
</html>
JS script:
========
$('nav a').on('click', function(e) {
e.preventDefault();
var url = this.href;
var $content = $('#content');
$('nav a.current').removeClass('current');
$(this).addClass('current');
$('#container').remove();
$.ajax({
type: "GET",
url: url,
timeout: 2000,
beforeSend: function() {
$content.append('<div id="load">Loading</div>');
},
complete: function() {
$('#load').remove();
},
success: function(data) {
$content.html( $(data).find('#container') ).hide().fadeIn(400);
},
error: function() {
$content.html('<div class="container">Please try again soon.</div>');
}
});
});
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.