JSON

源码下载

软件或网页应用都有数据需要处理，你可以简单地把.JSON文件类比.txt文件或.doc文件，虽然他们不同，你可以使用WebStorm或其它编辑器创建一个.JSON文档，然后按照 ECMAScript规范去编写文件。JSON独立于Javascript 编程语言，可以方便地进行数据交流，.JSON文件和.js、.html文件一样可以通过网络传输加载到本地解析。

下面是一个非常简单，但是五脏俱全的JSON文档，整个文档非常语义化。首先创建一个花括号表示一个对象，第1行的左花括号表示对象数据的开始，最后一行的右花括号表示对象数据的结束，花括号里面的结构整体上来看是“名称:值”的结构，称为名称-值对，就是说一对名称和置。类似Javascript编程中创建的对象，不同的地方是JSON名称要添加引号(JSON要求双引号)，Javascript语言中属性名不需要添加引号，在语言中属性名是变量自然不用引号标识，对于数据文件从数据类型的角度看相当于用一个字符串表示名称，这是规定的语法不用深究。名称和值之间用冒号:连接，名称-值对的值支持数字类型、字符串类型、数组类型、对象类型、布尔值等。

1    {
2      "name": "中国",
3      "civilization": 5000,
4      "dynasty": ["秦","汉","宋","明"],
5      "河南":{
6        "position":"中原",
7        "center":"郑州",
8        "ancientCapital":["洛阳","开封","安阳","商丘"]
9      }
10   }

第2行代码的表达的名称-值对，名称是"name"，属性是一个字符串"中国"，第3行代码定义的值是一个数字类型，第2行第3行的两个名称-值对之间用英文逗号(,)隔开，这一点和Javascript语言的习惯一样，平级的对象或属性之间使用逗号分隔列举。第4行定义的值一个数组，使用数组去列举几个相关的朝代，JSON支持对象结构数组，河南相对中国是它的属性，河南本身又是一个具有一系列属性的对象，所以河南的属性使用一个花括号的数据结构去描述，可以看到第6~8行列举了河南子对象的三个属性。在JSON文档中，一般名称-值对中的名称，或者说属性的属性名往往都是英文名名，为了更语义化可以使用汉语，当然也可以使用任何的你的母语。对象里面可以嵌套对象，数组里面可以嵌套数组，数组里面可以嵌套对象，这和Javascript的对象和数组使用语法基本类似。

解析JSON数据

解析JSON文档之前，首先要获取，正常的情况下一般浏览器要通过异步http(AJAX方法)请求加载服务端json文件，本次测试把.json文件放在了本地，浏览器也要使用http通信程序查看一下该文件是否存在，你可以自己通过浏览器支持的构造函数XMLHttpRequest()创建、封装一个异步通信.js文件，或者其它的JQuery.js等框架来加载。本案例提供一个原生代码封装的用于AJAX通信的ajax.js文件,里面包含了一个 ajax(url,fun1,fun2)函数，可以用来加载json文件返回其内容，如果你不清楚直接调用。

浏览器获取JSON数据后，通过自身程序，会把原.json文件处理成为一个字符串数据供Javascript调用，至于如何下载处理当成黑箱即可，本节课不用关心，简单说，就是直接在原来数据基础上添加引号，标记为字符串数据，比如JSON中的数据是{...},通过ajax.js程序返回的是字符串类型数据'{...}'，.json文件中的数据完好无损。

.json文件处理后得到字符串数据，下面第11行代码方法.parse()的参数json就是这个数据

'{"name": "中国","civilization": 5000,......"安阳","商丘"]}}'

parse()

parse()是内置对象JSON的方法，调用方法parse()就像调用Math对象的方法一样，不需要使用构造函数创建JSON对象，可以直接使用JSON对象调用，即JSON.parse()。该方法的参数就是浏览器加载处理.json文件后返回的字符串格式数据，至于浏览器如何把文件转为了字符串不用关心。

parse()使用


    JSON.parse('{......}');         // 返回结果{......}
    JSON.parse('{"name": "中国"}'); // 返回结果{name: "中国"}
    JSON.parse('["秦", 12, "宋"]'); //返回结果["秦", 12, "宋"]
    JSON.parse('"道"');             // 返回结果"道"

json数据处理代码

9        //JSON解析函数fun1
10       let fun1 = function (json) {
11           let obj = JSON.parse(json);//调用parse方法
12           document.write(obj.name);//访问对象的name属性
13           document.write("<br>");//
14           document.write(obj.dynasty[0]);//访问dynasty属性的值，也就是数组的第一个元素
15       };
16       //定义加载json文件失败的函数fun1
17       let fun2 = function (x) {
18           document.write(x);
19       };
20       //加载json文件，并把返回的数据作为fun1的参数
21       ajax("china.json",fun1,fun2)

关于http通信不是本节课的内容不再多说，如果你不懂也没有关系，直接学习第10到15行的解析代码就可以，所有的解析语句整理成一个函数，然后把这个函数作为第21行ajax函数的参数即可。第10行代码定义的函数参数json就是代表通过第21行代码返回的JSON数据，第11行调用方法parse()会把JSON文件转化为一个对象，通过该对象的属性名就可以访问json里面的数据。第12行访问JSON文件里面的name属性，返回的结果是“中国”，第14行访问的是dynasty属性，该属性的属性值是一个数组，所以在属性名dynasty后面使用了下标，来访问具体的某个数组元素值。