JavaScript对象表示法（JSON）是用于将结构化数据表示为JavaScript对象的标准格式，通常用于在网站上表示和传输数据（例如从服务器向客户端发送一些数据，因此可以将其显示在网页上）。 JSON是一种按照JavaScript对象语法的数据格式,你可以把 JavaScript 对象原原本本的写入 JSON 数据——字符串，数字，数组，布尔还有其它的字面值对象。虽然它是基于 JavaScript 语法，但它独立于JavaScript。
下面是一个在Javascript中使用远端JSON的示例：
1 <!DOCTYPE html> 2 ?3 <html> 4 ?5 ??<head> 6 ?7 ????<meta charset="utf-8"> 8 ?9 ????<title>草丛三兄弟</title>10 11 ????<link rel="stylesheet" href="style.css">12 13 ??</head>14 ??<body>15 ??????<header> ?</header>16 ??????<section></section>17 18 ????<script>19 20 ????var header = document.querySelector(‘header‘);21 22 ????var section = document.querySelector(‘section‘);23 24 ????//通过 XMLHttpRequest API 获取Github上的JSON文件25 ????var requestURL = ‘https://raw.githubusercontent.com/git0null/-json/master/caocongsanxiongdi.json‘;26 ????var request = new XMLHttpRequest();27 ????request.open(‘GET‘, requestURL);28 ????request.responseType = ‘json‘;29 ????request.send();30 31 ????request.onload = function() {32 ??????var obj = request.response;33 ??????populateHeader(obj);34 ??????showHeroes(obj);35 ????}36 37 ????function populateHeader(jsonObj) {38 ??var myH1 = document.createElement(‘h1‘);39 ??myH1.textContent = jsonObj.squadName;40 ??header.appendChild(myH1);41 42 ??var myH2 = document.createElement(‘h2‘);43 ??myH2.textContent = ‘成员:‘;44 ??header.appendChild(myH2);45 }46 function showHeroes(jsonObj) {47 ??var heroes = jsonObj.members;48 49 ??for(i = 0; i < heroes.length; i++) {50 ????var myArticle = document.createElement(‘article‘);51 ????var myH3 = document.createElement(‘h3‘);52 ????var p2 = document.createElement(‘p‘);53 ????var p3 = document.createElement(‘p‘);54 ????var myList = document.createElement(‘ul‘);55 56 ????myH3.textContent = heroes[i].name;57 ????p2.textContent = ‘外号：‘+heroes[i].surname;58 ????p3.textContent = ‘技能:‘;59 ????var skill = heroes[i].skill;60 ????for(j = 0; j < skill.length; j++) {61 ??????var listItem = document.createElement(‘li‘);62 ??????listItem.textContent = skill[j];63 ??????myList.appendChild(listItem);64 ????}65 ????myArticle.appendChild(myH3);66 ????myArticle.appendChild(p2);67 ????myArticle.appendChild(p3);68 ????myArticle.appendChild(myList);69 ????section.appendChild(myArticle);70 ??}71 }72 73 ????</script>74 75 ??</body>76 77 </html>本例中JSON文件内容如下:
1 { 2 ??"squadName" : "草丛三兄弟", 3 ??"members" : [ 4 ????{ 5 ??????"name" : "盖伦", 6 ??????"surname":"草丛仑、大宝剑", 7 ??????"skill":[ 8 ????????"坚韧", 9 ????????"致命打击",10 ????????"勇气",11 ????????"审判",12 ????????"德玛西亚正义"13 ??????]14 ????},15 ????{16 ??????"name" : "赵信",17 ??????"surname":"菊花信",18 ??????"skill":[19 ????????"果决",20 ????????"三重爪击",21 ????????"风斩电刺",22 ????????"无畏冲锋",23 ????????"新月护卫"24 ??????]25 ????},26 ????{27 ??????"name" : "嘉文四世",28 ??????"surname":"周杰伦",29 ??????"skill":[30 ????????"战争律动",31 ????????"巨龙撞击",32 ????????"黄金圣盾",33 ????????"德邦军旗",34 ????????"天崩地裂"35 ??????]36 ????}37 ??]38 }result:
Working With JSON
原文地址：https://www.cnblogs.com/hzhqiang/p/9975092.html