Assignment 6--Load JSON or XML data

Due: April 8, 2019

Create a JSON file or XML document for your game

Make a sample XML document or JSON file with data for your game. For puzzles (word search, crossword, etc.), you should make an XML document or JSON file that includes the entire puzzle. For a game like Battleship, you could store game configuration data or a saved game.

Even though you might not be ready to incorporate all of the data from the XML or JSON in your project, your sample data should include enough information to be useful and show that you understand how to define nontrivial XML documents or JSON files with multiple elements or properties. Note that to receive full credit for this assignment, parsed data from the XML document or JSON file must be displayed in the game grid.

XML and JSON files would normally be generated by JavaScript code or a program running on a server, but for this assignment, just make your sample XML or JSON file with a text editor. Also, you won't be able to modify your XML or JSON file, so your file should be considered sample data that's used for test purposes only.

Use JavaScript to load and parse an XML document or JSON file

Use XMLHttpRequest to load your XML document or JSON file and then display data from the document in your game grid. Display the data in such a way that it's clear that your code has parsed the data. Include a readme.txt file that explains what information is from the XML document or JSON file and where that information is displayed. When I grade your assignment I will change the XML or JSON data and make sure that the changed data is loaded and displayed, so the readme.txt file should tell me where to find the XML or JSON file and where I can expect to see changes when I modify the file.

I suggest that you use the synchronous version of XMLHttpRequest for this assignment unless you have a particular reason for using the asynchronous version. The synchronous version is easier to use, and often there's nothing else to do while waiting for the server's response.

After loading an XML document you can use getElementsByTagName to get a list of XML elements of a particular type. You can also use DOM functions with XML in a way that's similar to using them with HTML.

Pages 508-512 of the fifth edition of JavaScript:The Definitive Guide (which used to be the textbook for this class) have an explanation and example of using XML data in an HTML document. I made a much simpler version of this example that is available at: You are welcome to use this code in your assignment, but make sure you give credit to the source. Also, if you use this code, you should not use XML with the same structure. Think about what kind of XML document will be good for your project, and adapt the code to work with that XML document.

You can see an example of loading and parsing JSON data on this page: Look at the bottom of the page for the heading Synchronous POST.

Here is a link to a demo that shows how to load a local file with Ajax: Local file demo

Explain how you used XML or JSON in a readme.txt file

Include a plain-text file in your zip file that explains how you used XML or JSON and how and where the data from the XML or JSON document is displayed on your game description page (index.html) or your game grid page. Make sure you include file names (and the location in a subdirectory, if appropriate) so that I can see and change the data in the file.


Chrome will not load local files for XMLHttpRequests because of the way it implements the same-origin policy. I recommend that you use Firefox to test this assignment on Windows.

You can try running Chrome with the command-line option --allow-file-access-from-files When I first tried this it didn't work, but after reading this Stack Overflow page, it worked and I could load a local file:

To test this assignment with Safari on a Mac, you can follow the instructions on this web page for disabling local file restrictions: You can also disable cross-origin restrictions in the Develop menu in Safari. Don't forget to re-enable the restrictions when you go back to regular web browsing.

Be aware that when your code loads a local file, it will not get a status of 200, even when the data is successfully loaded. That's because the status code is set by the web server, and local files are not loaded from a web server. You will usually want to make sure that you get a status code of 200, but that will not work for this assignment. Because your program won't work if you check for a status code of 200, you will not receive full credit for this assignment if your code includes a check for a status code.

• I recommend that you use a synchronous XMLHttpRequest rather than asynchronous because it's simpler. In Firefox you will get a message saying that synchronous XMLHttpRequest on the main thread is deprecated. That's because the browser's user interface will be unusable until the request is finished, and a user might think the application isn't working right. For this class that isn't an issue.

• There is no easy way to update or modify an XML or JSON file without using server-side scripts.

• Loading local files with XMLHttpRequest is not a good practice for production web applications, but it works well for this class. It's very close to loading files from a web server, but is much easier to set up because it doesn't require a web server.

Turn in

Put all of your HTML, image, CSS, JavaScript, and XML files into a zip file. Turn in the zip file as instructed on the main Assignment page.


25 XML document or JSON file with sample game data
30 Uses XMLHttpRequest to get data from XML document or JSON file and parses the XML or JSON
25 Displays parsed data from XML document or JSON file on game page or game description page
10 Displays parsed data from XML document or JSON file in the game grid.
10 Includes readme.txt file that explains how XML or JSON is used and where the information is displayed

-10 points if the code does a check for a status code of 200 or any other value.