JavaScript对象表示法（JSON）是用于将结构化数据表示为JavaScript对象的标准格式，通常用于在网站上表示和传输数据（例如从服务器向客户端发送一些数据，因此可以将其显示在网页上）。 JSON是一种按照JavaScript对象语法的数据格式,你可以把 JavaScript 对象原原本本的写入 JSON 数据——字符串，数字，数组，布尔还有其它的字面值对象。虽然它是基于 JavaScript 语法，但它独立于JavaScript。
下面是一个在Javascript中使用远端JSON的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>草丛三兄弟</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header> </header>
<section></section>
<script>
var header = document.querySelector('header');
var section = document.querySelector('section');
//通过 XMLHttpRequest API 获取Github上的JSON文件
var requestURL = 'https://raw.githubusercontent.com/git0null/-json/master/caocongsanxiongdi.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var obj = request.response;
populateHeader(obj);
showHeroes(obj);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj.squadName;
header.appendChild(myH1);
var myH2 = document.createElement('h2');
myH2.textContent = '成员:';
header.appendChild(myH2);
}
function showHeroes(jsonObj) {
var heroes = jsonObj.members;
for(i = 0; i < heroes.length; i++) {
var myArticle = document.createElement('article');
var myH3 = document.createElement('h3');
var p2 = document.createElement('p');
var p3 = document.createElement('p');
var myList = document.createElement('ul');
myH3.textContent = heroes[i].name;
p2.textContent = '外号：'+heroes[i].surname;
p3.textContent = '技能:';
var skill = heroes[i].skill;
for(j = 0; j < skill.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = skill[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH3);
myArticle.appendChild(p2);
myArticle.appendChild(p3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
</script>
</body>
</html>
本例中JSON文件内容如下:
{
"squadName" : "草丛三兄弟",
"members" : [
{
"name" : "盖伦",
"surname":"草丛仑、大宝剑",
"skill":[
"坚韧",
"致命打击",
"勇气",
"审判",
"德玛西亚正义"
]
},
{
"name" : "赵信",
"surname":"菊花信",
"skill":[
"果决",
"三重爪击",
"风斩电刺",
"无畏冲锋",
"新月护卫"
]
},
{
"name" : "嘉文四世",
"surname":"周杰伦",
"skill":[
"战争律动",
"巨龙撞击",
"黄金圣盾",
"德邦军旗",
"天崩地裂"
]
}
]
}
result:
