标签：creat ber home ali 通过 推广 http请求 on() text
JSON 是一种按照JavaScript对象语法的数据格式，由 Douglas Crockford 推广。虽然它是基于 JavaScript 语法，但它独立于JavaScript，这也是为什么许多程序环境能够读取（解读）和生成 JSON。
JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。 JavaScript 提供一个全局的可访问的 JSON 对象来对这两种数据进行转换。
一个 JSON 对象可以被储存在它自己的文件中，这基本上就是一个文本文件，扩展名为 .json， 还有 MIME type 用于 application/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对象的访问与JS对象访问方式一致，由.和[]访问。对于复杂的数据可以采用链式访问，示例如下：
superHeroes["members"][1]["powers"][2]
访问某网页请求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);
标签：creat ber home ali 通过 推广 http请求 on() text
原文地址：https://www.cnblogs.com/IvyzZ/p/14527140.html
