JSON 必知必会

1. 第 1 章 什么是 JSON

全称：

• JavaScript Object Notation
• JS 对象表示法

数据交换格式，用于在不同平台或系统间交换数据的文本

2. 第 2 章 JSON 语法

2.1. JSON 基于 JavaScript 对象字面量

字面量：

• literal
• 对数据值的具体表示
• x = 5: x 是变量，5 是数值字面量

JS 对象字面量：

• key-value pair（名称-值 对）: 将属性用直观可见的方式表达出来

• 示例：

  person = {
    "name": "张三",
    "age": 18,
    "sayHello": function() {
      console.log("hello, " + this.name);
    }
  }
  

JSON 基于：

• JS 对象字面量及其属性的语法
• 不包含函数

2.2. 名称-值对

别称：

• 键-值对
• 属性-值对
• 字段-值对

2.3. 正确的 JSON 语法

示例：

{
  "name": "张三",
  "age": 18,
  "hobby": ["读书", "学习", "打游戏"],
  "married": false
}

注意：

• 别的系统接受 JSON 后一般会解析为对应语言的对象
• 名称-值对中的名称最好使用 英文字母 表示

2.4. 语法验证

JSON Formatter & Validator:

• https://jsonformatter.curiousconcept.com/ (opens new window)

JSON Editor Online:

• https://jsoneditoronline.org/ (opens new window)

JSONLint:

• https://jsonlint.com/ (opens new window)

2.5. JSON 文件

后缀为 .json 的文件

2.6. JSON 的媒体类型

媒体类型：

• media type

• 传数据时，告知接受方数据的类型

• 别名：

  • 内容类型
  • MIME类型

JSON 的 MIME 类型为：

• application/json

全部媒体类型的列表：

• https://www.iana.org/assignments/media-types/media-types.xhtml (opens new window)

3. JSON 的数据类型

3.1. 数据类型简介

数据类型：

• 原始数据类型
• 复合数据类型

原始数据类型：

• 数字
• 字符、字符串
• 布尔类型

复合数据类型：

• 由原始数据类型组合而成

3.2. JSON 中的数据类型

包括：

• 对象
• 字符串
• 数字
• 布尔值
• null
• 数组

字符串类型中的转义字符：

• \"：双引号
• \\: 反斜线
• \b: 退格符
• \f: 换页符
• \t: 制表符
• \n: 换行符
• \r: 回车符
• \u: 特殊字符，如 \u263A 笑脸符号

示例：

JSON.stringify({key: '1\"2'}) // '{"key":"1\\"2"}'

JSON.stringify({key: '1\n2'}) // '{"key":"1\\n2"}'

4. 第 4 章 JSON Schema

说明：

• 校验 json 的一致性：有哪些属性，属性的类型、范围、可选

示例：

{
  // schema 的标准
  "$schema": "https://json-schema.org/draft/2020-12/schema",

  // schema 文件的位置
  "$id": "https://example.com/product.schema.json",

  // schema 文件的描述
  "title": "Product",
  "description": "A product in the catalog",

  // 根对象的类型
  "type": "object",

  // 对象的属性
  "properties": {
    // productId 属性
    "productId": {
      // 类型
      "type": "integer", // "null" | "boolean" | "object" | "array" | "number" | "string" | "integer"
      // 描述
      "description": "The unique identifier for a product"
    },

    "price": {
      "type": "number",

      // 最小值（不包含）
      "exclusiveMinimum": 0
      // minimum: 最小值（包含）
    },

    // 对象类型的属性
    "dimensions": {
      "type": "object",
      "properties": {
        "length": {
          "type": "number"
        },
        "width": {
          "type": "number"
        },
        "height": {
          "type": "number"
        }
      },
      "required": [ "length", "width", "height" ]
    }
  },

  // 必选字段
  "required": [ 
    "productId" 
  ]
}

参考：

• 官方网站：http://json-schema.org/ (opens new window)
• https://json-schema.org/draft/2020-12/json-schema-validation.html (opens new window)

5. 第 5 章 JSON 中的安全问题

5.1. 跨站请求伪造

说明：

• CSRF，Cross-Site Request Forgery
• 利用信任机制来攻击

原理：

• 在银行网页完成身份验证后，银行服务器就信任你的浏览器了
• 恶意网页通过 <script> 绕过同源策略向银行服务器发送 GET 请求，利用银行服务器对你浏览器的信任窃取数据

示例：

• 在你已经登录了银行的网站的情况下
• 你点击了黑客发给你的伪造的银行邮件中的链接
• 然后你的信息就被窃取了

防御：

• 敏感数据（JSON 数据交换）使用 POST 请求
• 返回的 JSON 数据不要使用顶层数组

5.2. 注入攻击

说明：

• 通过向网站注入恶意代码来实现

跨站脚本攻击：

• Cross-Site，XSS，注入攻击的一种
• 从用户或第三方获取文本，直接转为 JS 对象时发生

解决方案：

• 使用 JSON.parse() 反序列化对象
• 对 HTML 文本进行转码

6. 第 6 章 JavaScript 中的 XMLHttpRequest 与 Web API

说明：

• JS 中的 XMLHttpRequest 负责在客户端发起请求
• Web API 负责在服务端返回响应

JSON-P：

1. JS 里定义一个全局的函数 callback()

   function callback(userInfo) {
     // set data to dom
   }
   

2. 动态创建 script 标签插入文档，发送 GET 请求

   const scriptElt = document.createElement('script');
   
   scriptElt.src = 'http://localhost:8080/getUser';
   
   document.head.appendChild(scriptElt);
   

3. 服务器端返回一段执行回调函数的 JS 代码，实参就是要返回的数据

   callback({
     name: '张三',
     age: 18
   });
   

7. 第 7 章 JSON 与客户端框架

jQuery:

• DOM 操作
• 兼容多个浏览器

AngularJS：

• MVC 框架
• 单页应用

8. 第 8 章 JSON 与 NoSQL

NoSQL：

• 适合存储简单数据，非复杂关系的数据

CouchDB 数据库：

• 可以通过 URL 访问数据库的数据

9. 第 9 章 服务端的 JSON

说明：

• 服务端序列化与反序列化 JSON

node.js:

• const str = JSON.stringify({ "name": "张三" })
• const obj = JSON.parse(str)

10. 第 10 章 总结

说明：

• json 还可以作为配置文件

ini 格式的配置文件（settings.ini）：

[general]
playIntro=false
mouseSensitivity=0.54

[sound]
volume=1
effects=0.68

xml 格式的配置文件（settings.xml）：

<?xml version="1.0" encoding="UTF-8" ?>
<setting>
  <general>
    <playIntro>false</playIntro>
    <mouseSensitivity>0.54</mouseSensitivity>
  </general>
  <sound>
    <volume>1</volume>
    <effects>0.68</effects>
  </sound>
</setting>

json 格式的配置文件（settings.json）：

{
  "general": {
    "playIntro": false,
    "mouseSensitivity": 0.54
  },
  "sound": {
    "volume": 1,
    "effects": 0.68
  }
}