Question:

What is JSON?

Answer:

JSON stands for JavaScript Object Notation. It is a format that allows sending data over the Internet inside a small package.

Question:

What is the format for JSON?

Answer:

A JSON string sent over the Internet might look like:

{"students":[{"firstName":"Mary","lastName":"Marvelous","campus":"Pierce","labs":[100,100,100]},{"firstName":"Milton","lastName":"Magic","campus":"Moorpark","labs":[110,100,105]},{"firstName":"Marlin","lastName":"Maeastro","campus":"Pierce","labs":[100,100,95]}]}

all on one line.
The object in JavaScript would appear as:

    var exampleObj = {
        'students': [
            {
                'firstName': 'Mary',
                'lastName': 'Marvelous',
                'campus': 'Pierce',
                'labs': [100, 100, 100]
            },
            {
                'firstName': 'Milton',
                'lastName': 'Magic',
                'campus': 'Moorpark',
                'labs': [110, 100, 105]
            },
            {
                'firstName': 'Marlin',
                'lastName': 'Maeastro',
                'campus': 'Pierce',
                'labs': [100, 100, 95]
            }
        ]
    };
    

Question:

How do I use JSON?

Answer:

Modern browsers have native JSON parsers. To convert an object to a JSON string to send over the Internet, use:

     var JsonString = JSON.stringify(exampleObj);
     

To convert a JSON string received over the Internet to a JavaScript Object, use:

     var studentsObj = JSON.parse(JsonString);
     

Question:

What if the browser does not have native JSON parsers?

Answer:

Download the minified version of a JSON parser JavaScript file from:
http://code.google.com/p/json-sans-eval/

Question:

What is XML?

Answer:

XML stands for eXtensible Markup Language. HTML is a specific flavor of XML.

Question:

What does XML look like?

Answer:

Below is an example of an XML file:

    <?xml version="1.0" encoding="utf-8" ?>
    <colors>
      <warm>
        <color>Red</color>
        <color>Orange</color>
        <color>Yellow</color>
      </warm>
      <cool>
        <color>Green</color>
        <color>Blue</color>
        <color>Purple</color>
      </cool>
    </colors>
    

Question:

How do I use XML?

Answer:

When receiving AJAX data as XML, you may use (xml) DOM methods to parse and format data for display.

Checkpoint

You should know 13.1

1. What is JSON
2. What is XML

Questions 13.1

1. What are the 2 "native" JSON parsing methods?
2. Where can I download a JavaScript file to parse JSON for browsers without the native methods?

Exercise 13.1 - graded as Lab 2

1. Declare a variable named response
2. Assign to your variable the following code: JSON.parse('')
3. Copy the JSON string from this lecture and paste inside the above single quotes
4. Copy the relevant code below "// get students info" from the AJAX example to parse your response variable from GetOrPost.js, which is part of the AJAX example

web developer toolbox 13.1

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• (Create a new dt tag to) add a category: JSON
• (Create a new a tag inside a new dd tag to) add a link: Using JSON
• href should be: javascript/json_using.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: json_using.html
• Below the comment "edit category name", change text from template to JSON
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Creating and using objects
  • ...template to: How to create and use objects
• Update the comments section:
  • <dt>JSON</dt>
  • <dd>Use JSON.parse to convert a JSON string to a JavaScript object</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="xResponseDiv"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 13.1

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code