JSON基础

什么是JSON
JSON结构
JSON对象的访问
注意事项
JSON示例

什么是JSON

JSON 是一种按照JavaScript对象语法的数据格式，由 Douglas Crockford 推广。虽然它是基于 JavaScript 语法，但它独立于JavaScript，这也是为什么许多程序环境能够读取（解读）和生成 JSON。

JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。 JavaScript 提供一个全局的可访问的 JSON 对象来对这两种数据进行转换。

一个 JSON 对象可以被储存在它自己的文件中，这基本上就是一个文本文件，扩展名为 .json，还有 MIME type 用于 application/json.

JSON结构

JSON从JS获取灵感，自然可以想象到它和JS对象结构上的相似，示例如下：

{
  "squadName" : "Super hero squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

可以看出它由属性名:属性值组成，每个数据用,隔开。

JSON对象也可以是一个数组：

[
  {
    "name" : "Molecule Man",
    "age" : 29,
    "secretIdentity" : "Dan Jukes",
    "powers" : [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name" : "Madame Uppercut",
    "age" : 39,
    "secretIdentity" : "Jane Wilson",
    "powers" : [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

//访问方式示例
[0]["powers"][0]

JSON对象的访问

JSON对象的访问与JS对象访问方式一致，由.和[]访问。对于复杂的数据可以采用链式访问，示例如下：

superHeroes["members"][1]["powers"][2]

注意事项

JSON 是一种纯数据格式，它只包含属性，没有方法。
JSON要求在字符串和属性名称周围使用双引号。 单引号无效。甚至一个错位的逗号或分号就可以导致 JSON 文件出错。
JSON 可以将任何标准合法的 JSON 数据格式化保存，不只是数组和对象。比如，一个单一的字符串或者数字可以是合法的 JSON 对象。
与 JavaScript 代码中对象属性可以不加引号不同，JSON 中只有带引号的字符串可以用作属性。

JSON示例

访问某网页请求JSON数据，得到后进行处理并显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Test</title>
    <style>

    </style>
</head>

<body>
    <header>
    </header>

    <section>
    </section>
</body>
<script>
    var header = document.querySelector('header');
    var section = document.querySelector('section');
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

    //创建一个HTTP请求对象
    var request = new XMLHttpRequest();
    //打开一个新的请求 参数：HTTP方法，URL
    request.open('GET', requestURL);
    //设置返回的数据格式，发送请求
    request.responseType = 'json';
    request.send();
    //处理返回的数据，请求对象load事件只在请求成功时触发
    request.onload = function() {
        var superHeroes = request.response;
        populateHeader(superHeroes); //填充header
        showHeroes(superHeroes); //填充section
    }

    //定位header
    function populateHeader(jsonObj) {
        var myH1 = document.createElement('h1');
        myH1.textContent = jsonObj['squadName'];
        header.appendChild(myH1);

        var myPara = document.createElement('p');
        myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
        header.appendChild(myPara);
    }

    //创建英雄信息卡片
    function showHeroes(jsonObj) {
        var heroes = jsonObj['members'];

        for (i = 0; i < heroes.length; i++) {
            var myArticle = document.createElement('article');
            var myH2 = document.createElement('h2');
            var myPara1 = document.createElement('p');
            var myPara2 = document.createElement('p');
            var myPara3 = document.createElement('p');
            var myList = document.createElement('ul');

            myH2.textContent = heroes[i].name;
            myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
            myPara2.textContent = 'Age: ' + heroes[i].age;
            myPara3.textContent = 'Superpowers:';

            var superPowers = heroes[i].powers;
            for (j = 0; j < superPowers.length; j++) {
                var listItem = document.createElement('li');
                listItem.textContent = superPowers[j];
                myList.appendChild(listItem);
            }

            myArticle.appendChild(myH2);
            myArticle.appendChild(myPara1);
            myArticle.appendChild(myPara2);
            myArticle.appendChild(myPara3);
            myArticle.appendChild(myList);

            section.appendChild(myArticle);
        }
    }
</script>

</html>

如果返回的数据并非JSON对象，而是字符串，则处理如下：

parse(): 以文本字符串形式接受JSON对象作为参数，并返回相应的对象。
stringify(): 接收一个对象作为参数，返回一个对应的JSON字符串。

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();

request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

反过来如果我们想把json对象转为字符串，则处理如下：

var myJSON = { "name" : "Chris", "age" : "38" };
var myString = JSON.stringify(myJSON);