Client-side Scripting Assignment Need help with an AJAX and JSON assignment. I g
ID: 3607033 • Letter: C
Question
Client-side Scripting Assignment
Need help with an AJAX and JSON assignment. I got my javascript to access the XML file (computers.xml), but I need help adding AJAX and JSON to also access the file. The requirements for the Assignment are below:
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 as shown in the example below. CAN NOT USE ANY OTHER METHOD.
I will provide my computer.xml, HTML file and the javascript that I came up with. I will also provide an example of the AJAX and JSON that should be added to the assigment.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computers</title>
<link rel="stylesheet" href="css/computer.css" />
</head>
<body>
<body>
<header><h1>The Computer List</h1></header>
<section id="content">
<div id="container">
<h2>Below are the list of computers</h2>
<section id="content"></section>
<script src="js/computer.js"></script>
</body>
</html>
Computers.xml
<?xml version="1.0" encoding="utf-8" ?>
<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>
computer.js
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var response = xhr.responseXML;
var computer_list = response.getElementsByTagName('computer');
for (var i = 0; i < computer_list.length; i++) {
var container, model_name, model, newline;
container = document.createElement('div'); // Create <div> container
container.className = 'computer'; // Add class attribute
model_name = document.createElement('p'); // Add location data
model = document.createElement('b');
newline = document.createElement('br');
model.appendChild(document.createTextNode(getNodeValue(computer_list[i], 'model_name')));
model_name.appendChild(newline);
model_name.insertBefore(model, newline);
model_name.appendChild(document.createTextNode(getNodeValue(computer_list[i], 'type')));
container.appendChild(model_name);
document.getElementById('content').appendChild(container);
}
// }
function getNodeValue(obj, tag) { // Gets content from XML
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}
// THE FINAL PART IS THE SAME AS THE HTML EXAMPLE BUT IT REQUESTS AN XML FILE
};
xhr.open('GET', 'computers.xml', true); // Prepare the request
xhr.send(null); // Send the request
EXAMPLE FOR AJAX AND JSON
<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery - Chapter 8: Ajax & JSON - Example</title>
<link rel="stylesheet" href="css/c08.css" />
</head>
<body>
<header>
<h1>THE MAKER BUS</h1>
<nav>
<a href="jq-load.html">HOME</a>
<a href="jq-load2.html">ROUTE</a>
<a href="jq-load3.html">TOYS</a>
<a href="example.html" class="current">TIMETABLE</a>
</nav>
</header>
<section id="content">
<div id="container">
<h2>Roll up! Roll up! It's the maker bus...</h2>
<div class="third">
<div id="event">
<a id="ca" href="ca.html"><img src="img/map-ca.png" alt="San Francisco" />San Francisco, CA</a>
<a id="tx" href="tx.html"><img src="img/map-tx.png" alt="Austin, TX" />Austin, TX</a>
<a id="ny" href="ny.html"><img src="img/map-ny.png" alt="New York, NY" />New York, NY</a>
</div>
</div>
<div class="third">
<div id="sessions">
<p>Select an event from the left</p>
</div>
</div>
<div class="third">
<div id="details"></div>
</div>
</div><!-- #container -->
</section><!-- #content -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/example.js"></script>
</body>
</html>
example.js
$(function() { // When the DOM is ready
var times; // Declare global variable
$.ajax({
beforeSend: function(xhr) { // Before requesting data
if (xhr.overrideMimeType) { // If supported
xhr.overrideMimeType("application/json"); // set MIME to prevent errors
}
}
});
// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
function loadTimetable() { // Declare function
$.getJSON('data/example.json') // Try to collect JSON data
.done( function(data){ // If successful
times = data; // Store it in a variable
}).fail( function() { // If a problem: show message
$('#event').html('Sorry! We could not load the timetable at the moment');
});
}
loadTimetable(); // Call the function
// CLICK ON THE EVENT TO LOAD A TIMETABLE
$('#content').on('click', '#event a', function(e) { // User clicks on event
e.preventDefault(); // Prevent loading page
var loc = this.id.toUpperCase(); // Get value of id attr
var newContent = ''; // Build up timetable by
for (var i = 0; i < times[loc].length; i++) { // looping through events
newContent += '<li><span class="time">' + times[loc][i].time + '</span>';
newContent += '<a href="descriptions.html#';<br/> newContent += times[loc][i].title.replace(/ /g, '-') + '">';
newContent += times[loc][i].title + '</a></li>';
}
$('#sessions').html('<ul>' + newContent + '</ul>'); // Display times on page
$('#event a.current').removeClass('current'); // Update selected item
$(this).addClass('current');
$('#details').text(''); // Clear third column
});
// CLICK ON A SESSION TO LOAD THE DESCRIPTION
$('#content').on('click', '#sessions li a', function(e) { // Click on session
e.preventDefault(); // Prevent loading
var fragment = this.href; // Title is in href
fragment = fragment.replace('#', ' #'); // Add space after#
$('#details').load(fragment); // To load info
$('#sessions a.current').removeClass('current'); // Update selected
$(this).addClass('current');
});
// CLICK ON PRIMARY NAVIGATION
$('nav a').on('click', function(e) { // Click on nav
e.preventDefault(); // Prevent loading
var url = this.href; // Get URL to load
$('nav a.current').removeClass('current'); // Update nav
$(this).addClass('current');
$('#container').remove(); // Remove old part
$('#content').load(url + ' #container').hide().fadeIn('slow'); // Add new
});
});
example.json
{
"CA": [
{
"time": "9:00",
"title": "Intro to 3D Modeling"
},
{
"time": "10:00",
"title": "Circuit Hacking"
},
{
"time": "11:30",
"title": "Arduino Antics"
},
{
"time": "1:00",
"title": "The Printed Lunch"
},
{
"time": "2:00",
"title": "Droning On"
},
{
"time": "3:00",
"title": "Brain Hacking"
},
{
"time": "4:30",
"title": "Make The Future"
}
],
"TX": [
{
"time": "9:00",
"title": "Make The Future"
},
{
"time": "10:00",
"title": "Circuit Hacking"
},
{
"time": "11:30",
"title": "Brain Hacking"
},
{
"time": "1:00",
"title": "The Printed Lunch"
},
{
"time": "2:00",
"title": "Droning On"
},
{
"time": "3:00",
"title": "Intro to 3D Modeling"
},
{
"time": "4:30",
"title": "Arduino Antics"
}
],
"NY": [
{
"time": "9:00",
"title": "Arduino Antics"
},
{
"time": "10:00",
"title": "Brain Hacking"
},
{
"time": "11:30",
"title": "Intro to 3D Modeling"
},
{
"time": "1:00",
"title": "The Printed Lunch"
},
{
"time": "2:00",
"title": "Droning On"
},
{
"time": "3:00",
"title": "Circuit Hacking"
},
{
"time": "4:30",
"title": "Make The Future"
}
]
}
Explanation / Answer
AJAX and JSON file :
<!DOCTYPE html>
<html>
<head>
<title>Computers</title>
<link rel="stylesheet" href="css/computer.css" />
</head>
<body>
<header>
<h1>The computer List</h1>
<section id="content">
<div id="container">
<h2> Below are the list of computers </h2>
<section id="content">
<script src="js/computer.js"></script>
</body>
</html>
computer.js
$(function() { // When the DOM is ready
var mydata // Declare global variable
$.ajax({
beforeSend: function(xhr) { // Before requesting data
if (xhr.overrideMimeType) { // If supported
xhr.overrideMimeType("application/json"); // set MIME to prevent errors
}
}
});
// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
function load() { // Declare function
$.getJSON('computer/computer.json') // Try to collect JSON data
.done( function(computer){ // If successful
// Store it in a variable
}).fail( function() { // If a problem: show message
$('#event').html('Sorry! We could not load the data at the moment');
});
}
computer.json
{
"computer": [
{
"model_name”: “ATIV Book 4",
"type”: “Laptop”
“manufacturer”: “Samsung”
“ operating_system”: “Windows 8"
},
{
"model_name”: “C7 Chromebook",
"type”: “Laptop”
“manufacturer”: “Samsung”
“ operating_system”: “Chrome Os"
},
{
"model_name”: “Pavillion Slimline",
"type”: “Desktop”
“manufacturer”: “HP”
“ operating_system”: “Windows 8"
},
{
"model_name”: “Jackal 1U",
"type”: “Server”
“manufacturer”: “System76”
“ operating_system”: “Ubuntu"
},
{
"model_name”: “Power 710 Express",
"type”: “Server”
“manufacturer”: “IBM”
“ operating_system”: “AIX"
}
]
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.