AJAX and JSON

Modify the HTML and JavaScript adding AJAX and JSON that will 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.

computers.xml

ATIV Book 4 Laptop Samsung Windows 8 C7 Chromebook Laptop Samsung Chrome OS Pavillion Slimline Desktop HP Windows 8 Jackal 1U Server System76 Ubuntu Power 710 Express Server IBM AIX

chapter8.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

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

chapter8.html

The Computer List

Below are the list of computers