什么是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);