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:
