JSON必知必会阅读史

2018年3月20日14点26分

前言

• 前后分离逐渐在整个WEB应用开发中成为主流，而作为前后端交互的主要数据格式，对JSON的认识一直停留在花括号包裹的冒号分割的键值对的理解中
• 在实际的项目开发中，不论是在从web页面端发起的请求使用JSON作为参数的场景，还是服务端响应回JSON碰到过些问题，困扰了挺久，才发现自己对JSON的了解不够所导致的
• 归根到底，很多时候我以为是BUG的问题其实不是BUG，是我自己知识储备不够(也就是无知)导致的
• 就像是某不知名码农所言，对于日常使用百度的大部分码农而言，所谓技术问题，归根到底其实是英语不好的问题。人家开源软件文档摆在哪里，轮子造好了放在哪里，你却被英语拦住了
• 幸运的是，现在人工智能发展火热，翻译作为一个很大块的应用场景，未来有很大的想象空间，其实现在谷歌翻译也很牛B了，码农门翻身当包工头的日子指日可待，学好英语，用好谷歌翻译
• 接下来，我给大家表演的是，我将《SQL必知必会》的阅读进度条变消失的过程中留下来的笔记

重要概念##

1. JSON中，名称始终被双引号包裹
2. JSON中，值可以是字符串，数字，布尔值，NULL，对象或数组
3. JSON中，名称-值对列表被花括号包裹
4. JSON中，多个名称-值对使用逗号分隔
5. JSON的媒体类型是application/json

原始数据类型

• 原始数据类型确切的说值得是数据中第一位，最基本的一种类型。如数字（整型，浮点数，定点数），字符和字符串，布尔类型等
• 在不同的编程语言中，这类“一成不变”的数据类型通常被叫做原始数据类型或内置类型。这意味着他们的定义和操作都是不能修改的
• 例如，编程语言不会允许你重新定义两数相加的含义
• JSON中的数据类型包括：对象，字符串，数字，布尔值，NULL，数组
• 代码中使用反斜线需要另一个反斜线对原反斜线专业，所以就是双反斜线（常见于文件路径问题）

JSON数字和布尔和NULL

• 数字是一种常见的用于传递数据的信息片段
• 在JSON中，布尔类型仅使用小写形式：true或false，任何其他形式的写法都会报错
• 对于一无所有的东西，你可能觉得用0来描述比较合适，比如我有0个手表。但事实是，0是一个数字，这意味着本质上是在计数
• 在编程中，null就是用来表示0，一无所有，不存在等意思
• 在JavaScript中，undefin是在尝试获取一些不存在的对象或变量时返回的结果。undefined与那些声明的名称和值都不存在的对象或变量有关，而null仅与对象或变量的值有关。null是一个表示“没有值”的值
• 在JSON中，null必须使用小写形式

JSON数组

• 数组始终应被方括号[]包裹
• 一个数组为每一个“位置”都赋予了一个索引

JSON中的对象类型

• 对象类型是使用逗号分隔的名称-值对构成的集合，并使用花括号（{}）包裹
• 对象和数字很关键的一个区别是：对象是名称-值对构成的列表或集合，数组是值构成的集合
• 在JSON中，数组中所有的值应具有相同的数据类型

JSON_Schema

• 在大多数情况下，数据交换格式中的数据通过互联网或其他网络传输到接收方。而接收方会对数据文件的格式，包括其结构和数据类型有一个预期。
• 所以接收方通常会提供一个文档来解释预期的格式并提供示例
• JSON Schema是数据交换中的一种虚拟的“合同”

JSON中的安全问题

• JSON本身不会构成什么威胁，毕竟它只是一种数据交换格式。它不过是一种数据文件，或者说数据流
• 跨站脚本攻击（cross-site scripting，XSS）是注入攻击的一种。在使用JSON时常见的安全漏洞通常发生在JavaScript从服务器获取到一段JSON字符串并将其转化为JavaScript对象时
• JSON本身仅仅是文本。在编程中，如果想要对代表对象的文本进行操作，首先要将它转化成对象并转入内存中。这样，它才能被操作，观察，并在程序逻辑中使用
• 在JavaScript中，可以使用eval()函数来进行这一操作。该函数获取一段字符串，并对其进行编译与执行

获取对象的属性

var jsonString = '{"animal":"cat"}';
var myObject = eval("("+jsonString+")");
alert(myObject.animal);

被eval()执行的alert

var jsonString = "alert('this is bad')";
var myObject - eval("("+jsonString+")");

• 这种情况下，JSON来源无法控制，所以可能别用来执行恶意代码。这种情况下JSON.parse()就是用来处理这一问题的。该函数仅会解析JSON，并不会执行脚本

JavaScript中的XMLHttpRequest

JavaScript中的XmlHttpRequest对象

• 在浏览器中输入http://www.google.com.hk就是在使用HTTP协议去请求资源。请求JSON资源的代码也同样使用HTTP协议
• 在JavaScript中，使用这种协议来发送这类请求的代码就是XMLHttpRequest
• JavaScript是一种面向对象的语言，而XmlHttpRequest就是一类对象。当使用new XMLHttpRequest()语法，并将其返回值赋值给一个变量时，它就具有了从某一地址请求资源的功能
• JavaScript对象具有属性。这些属性就是名称-值对。XMLHttpRequest对象所拥有的属性有onreadystatechange,readyState,response,responseText,responseType,responseXML,status,sutatusTest,timeout,ontimeout,upload等

XMLHttpRequest的函数

• 我们主要关注XmlHttpRequest中的以下这些可用的函数：
• open（method,url,async(可选),user(可选),password(可选)）
• send()

XMLHttpRequest的属性

• onreadystatechange:可以在代码中为它赋值为一个函数
• readyState：返回一个0~4的值，用来表示状态码
• status：返回HTTP状态吗
• responseText：当请求成功时，该属性会包含作为文本的响应体（如我们请求的JSON）

XMLHttpRequest示范代码

var myXmlHttpRequest = new XmlHttpRequest();
var url = "https://www.google.hk.com?search=Kyou";
myXmlHttpRequest.onreadystatechange = function(){
    if(myXmlHttpRequest.readyState == 4 && 
            myXmlHttpRequest.status= 200){
        var myObejct = JSON.parse(myXmlHttpRequest.responseText);
        var myJSON = JSON.stringify(myObject);
        }
    }
    myXmlHttpRequest.open("GET",url,true);
    myXmlHttpRequest.sent();

序列化问题

• 在将一个对象转化成JSON文本，或是将JSON文本转换成对象时，很可能会接触这两个专业术语：序列化和反序列化
• 序列化是将对象转换成文本的过程，反序列化是将文本转换成对象的过程
• 上文代码中使用JavaScript中的JSON.parse()进行反序列化操作。响应返回的JSON以文本的形式存储在responseText中。当它被JSON.parse()解析后，就不是JSON了，而是JavaScript对象
• 由于JSON一开始不是对象，所以使用JSON.parse()进行反序列化是有必要的。请记住，JSON意思是JavaScript对象表示法。当它以JSON形式存在时，字面上代表的是以文本形式表示一个对象。
• 为了让JSON变成真正的对象，需要进行反序列化操作
• 在JS中，可以通过stringify()对JSON进行序列化

跨域资源共享

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET,POST
Access-Control-Allow-Origin:*

• ...因为这些公共API的开发者在他们的服务器上实现了跨域资源共享(cross-origin resource sharing,CORS)。这些服务器会在响应头额外加上一些带有Access-Control-Allow前缀的属性
• 这些头部定义了证书是否可用，那些HTTP方法是可用的，以及最重要的一点，即允许那些域名，
• Access-Control-Allow-Origin，包含号的那个属性，它表示任意域名都是允许的*

JSON与客户端框架

• 在我们的生活中，“框架”常被用来形容必要的支持结构，或是底层结构
• 在计算机中，框架并不是一种底层结构，而是一层位于软件或编程语言之上的为开发者提供支持的结构
• 本质上来讲，JavaScript框架可以节约时间，让我们更专注于功能的构建。这种节约时间，专注重点的框架在计算机中也被成为抽象化工具

jQuery

• jQuery框架是为DOM操作服务的抽象化工具
• 同时jQuery帮你解决了大部分兼容问题，已JSON.parse()为例子，jQuery有自己的解析JSON方法：jQuery.parseJSON函数

AngularJS

• AngularJS框架是专注于创建单页应用的抽象化工具，与传统的多页方式不同，单页Web应用致力于为用户提供无缝交互的应用体验
• 传统多页WEB应用的方式与用户在客户端和服务端产生的交互是紧密联系在一起的。用户输入或点击URL，以通过HTTP向服务端请求资源，这种用户，客户端，服务端共同参与的Web应用，没动一步都需要请求一个新的页面
• 单页应用的目标就是在你的浏览器中实现同样的无缝浏览体验，这绝大部分是通过JavaScript以及我们的好朋友XMLHttpRequest实现的。当用户仍在当前页面时，幕后的代码就已经完成对资源的请求。用户从一个资源跳跃到另一个资源的操作将不再需要通过URL或是指向URL的链接来进行
• 在AngularJS中，由于HTML位于视图层，所以应让它随时准备应对数据模型的变化

关于AngularJS的MVC

• 模型：JavaScript对象即数据模型
• 视图：HTML（提供了与模型进行数据绑定的语法）
• 控制器：使用AngularJS语法来定义和操作与模型和视图间的交互的JavaScript文件

服务端的JSON

• 一种数据交换格式要想在Web领域适用，就必须同时被客户端和服务端支持。好消息是，大部分服务端Web框架以及脚本语言都较好地支持JSON，有对应的库实现了序列号和反序列化JSON的功能
• JSON既是数据的容器，也是运输工具