JSON学习笔记

JSON学习笔记

一、什么是json

1.1、JSON是一种数据交换模式

数据交换格式是一种在不同平台间传递数据的文本格式。

1.2、JSON独立于编程语言

JSON全称（JavaScript Object Notation)javaScript对象表示法

JSON基于JavaScript对象字面量

1.3 专业术语与概念

JSON：javaScript对象表示法

表示法：一个用于表示诸如数字或单词的字符系统

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

可移植性：以一种对双方系统都兼容的方式在平台间传递信息。

二、JSON语法

2.1 JSON基于JS对象字面量

所谓字面量：是对数据值的具体表示

2.2 名称——值对

名称——值对中的值可以是数字、布尔值、null、数组和对象。

例：“animal”:“cat” "animal"就是名称，"cat"就是值。

JSON中使用冒号（：）来分割名称和值。

Json中的名称和值对的名称如果被系统作为对象装入内存·的话，将会成为”属性“。

当你在一个字符串类型的值外面使用下面字符时，实际告诉机器如何读取数据的指令：

{ (左花括号)指：开始读取对象

} (右花括号)指：结束读取对象

[(左方括号)指：开始读取数组

] (右方括号)指：结束读取数组

：（冒号）指：在名称——值对中分割名称和值

，（逗号）指：分割对象中的名称—值对 或者分割数组中的值，也可以认为是”一个新部分的开始“

2.4 语法验证

集成开发环境(IDE)

JSON Formatter&Validator

JSON Editor Online

JSONLint

2.5 JSON文件

2.6 JSON的媒体类型

JSON的MIME类型是：application/json

2.7 专业术语

字面量：指字面的意思与其想要表达的意思是完全一致的值。

变量：通过形如x的标识符来表示的、可以修改的一类值。

最大可移植性（数据交换中）

通过保证数据本身对于平台和系统的兼容性来提供超越数据格式本身的可移植性；

名称-值对：指拥有名称和对应的值的属性和特征（也叫键-值对）

语法验证：关注JSON格式的验证

一致性验证：关注独特数据结构的验证

三、JSON的数据类型

3.1数据类型简介

原始数据类型：数字、字符和字符串、布尔类型

复合数据类型：枚举数据类型、对象数据类型

3.2 JSON中的数据类型

复合数据类型可以被解构为原始数据类型

JSON中的类型：对象、字符串、数字、布尔值、null、数组

3.3 JSON 中的对象数据类型

{

​ “person”:{

​ “name”:“liqiang”,

​ “age”:60,

​ “head”:{

​ “hair”:{

​ “color”:“blue”,

​ “length”:“short”,

​ “style”:“A-line”

​ },

​ “eyes”:“green”

​ }

}

}

3.4 JSON中的字符串类型

除了双引号和反斜线，还需要转义以下字符：

/（正斜线）

\b(退格符)

\f(换页符)

\t（制表符）

\n(换行符)

\r(回车符)

\u 后面跟十六进制字符

3.9 专业术语

JSON中的字符串类型

一个字符串值，如”my string" ，使用双引号包裹。

JSON中的布尔值：true false

JSON的数字类型：一个数字值

JSON中的NULL值，一个表示空值的null值

JSON中的数组类型：数组是值得集合或列表，每个值都可以是字符串、数字、布尔值、对象或数组中的任何一种，数组必须被([])包裹，且值与值之间用逗号隔开。

JSON中的对象类型：对象类型是使用逗号分隔的名称-值对构成的集合，并使用({})包裹。

四、JSON schema :数据交换中一种虚拟的"合同"

JSON schema 主页(http://json-schema.org)

JSON schema 验证规范(http：//json-schema.org/latest/json-schema-validation.html)

五、JSON中的安全问题

跨站请求伪造，即CSRF(cross-site request forgery,读作sea-surf)，是一种利用站点对用户浏览器信任而发起攻击的方式。

例：

浏览器对于不同域名的站点之间进行资源分享有一定的限制规则。黑客使用

示例2：黑客站点的
那么银行如何阻止CSRF攻击呢？
将数组存放到对象之中，使其成为非法的Javascript，这样就不会被

下一步，银行应该仅允许POST请求获取数据，禁止使用GET请求，这样黑客就无法使用他自己的URL链接了，一旦不能使用

六、JS中的XHTMLRequest与Web API

JSON资源可以通过一个URL来请求

6.2 Javascript中的XMLHttpRequest对象

尽管Javascript的XMLHttpRequest对象听上去和XML有关，但实际上我们使用它来发起HTTP请求，在它以包含XML的名字命名时，XML是在发起这类请求时最常用的数据交换格式。然而，XMLHttpRequest并不仅限于使用XML。

那些允许我们访问站点进行数据交流的基础是基于超文本传输协议(HTTP)的。在浏览器中输入http;//www.cutelittlekittens.com时，就是使用HTTP协议去请求资源。

Javascript中使用这种协议来发送这类请求的是XMLHttpRequest.

JavaScript是一种面向对象的语言，而XMLHttpRequest就是一类对象，当使用new XMLHttpRequest()语法，并将其返回值赋值给一个变量时，它就有了从某一地址请求资源的功能。

Javascript 中的XMLHttpRequest对象

var myXmlHttpRequest = new XMLHttpRequest();

Javascript对象具有属性，这些属性就是名称-值对，XMLHttpRequest对象所拥有的属性有onreadystatechange、readyState、response responseText responseType responseXML status statusText timeout ontimeout upload withCredentials

JSON中不包含可执行的指令，只包含属性，

我们主要关注XMLHttpRequest中以下这些可用的函数：

open(method,url,async(可选）,user(可选）,password（可选),send()

以及下面这些属性：

onreadystatechange 可以在代码中给它赋值为一个函数

readyState 返回一个0~4的值，用来表示状态码

status 返回HTTP状态码（如200表示请求成功）

responseText 当请求成功时，该属性会包含作为文本的响应体。

属性的值可以是一个函数。因为JS中的函数也是一类对象。对象是一类数据，因此它可以被赋值给一个变量（属性）、修改和传递。

示例：创建了一个新的XMLHttpRequest对象，并让它从Open Weather-Map API获取JSON数据

一个新的XMLHttpRequest对象

var myXMLHttpRequest = new XMLHttpRequest();

var url = “http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139”;

myXMLHttpRequest.onreadystatechange = function(){

if(myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status === 200){

	var myObject = JSON.parse(myXMLHttpRequest.responseText);

  var myJSON = JSON.stringify(myObject);

​ }

}

myXMLHttpRequest.open(“GET”,url,true);

myXMLHttpRequest.send();

在将一个对象转化为一个文本，或者将JSON文本转换为对象时，很可能会接触两个专业术语：序列化和反序列化。序列化是将对象转换为文本的过程；

反序列化是将文本转换为对象的过程。

下面例子使用JSON.parse()进行反序列化操作，响应返回的JSON以文本以存储在responseText中，当它被JSON.parse()解析后，就成了JS对象。

​ var myJSON = JSON.parse(myXMLHttpRequest.responseText);

在JS中通过JSON.stringfy()对JSON进行序列化。

建立一个JSON请求并发送

myXMLHttpRequest.open(“GET”,url,true);

myXMLHttpRequest.send();

onreadystatechange属性的函数值是一个时间处理函数，底层的JS引擎会在每次就绪状态（ready state ）改变时获取该函数并调用。就绪状态从0~4意味着：

0表示未发送

表示open()函数还没有执行

1表示已发送

open()函数已执行，但send()函数还没有执行

2表示接收到头部

send()函数已经执行且头部和状态码可以获取了

3表示解析中

表示头部已经接收到，但响应体正在解析中

4表示完成

表示请求完成，包括响应头和响应体的内容都已经接收到了

6.3混乱的关系与共享的原则

6.3.1 跨域资源共享（CORS)

通过设置响应头，使得跨域请求资源可以成功

JSON-P 使用

七、JSON与客户端框架

框架：在计算机中，框架不是一种底层结构，是一层位于软件或者编程语言之上的为开发者提供支持的结构。

7.1 JQuery 与JSON

jQuery(http://jquery.com)是一种允许开发者专注于操作DOM构建功能的抽象化工具，

例:一个在浏览器中显示为"My Button"的按钮

​ myButton

为使用JS代码隐藏这个按钮，首先要调用HTML的document对象的getElementById(id)方法，然后将对应的style.display属性值设为"none"

​ document.getElementById(“myButton”).style.display = “none”

若使用JQuery： $("#myButton").hide();

JQuery 有自己的解析JSON的方法：用JQuery.parseJSON函数，

例：使用js中的JSON.parse()解析JSON

​ var myAnimal = JSON.parse(’{“animal”:“cat”}’);

例：使用JQuery中的JQuery.parseJSON函数解析JSON

​ var myAnimal = jQuery.parseJSON(’{“animal”:“cat”}’);

在使用js进行HTTP请求时，例：创建了一个新的XMLHttpRequest对象，并让它从Open Weather-Map API获取JSON数据

var myXMLHttpRequest = new XMLHttpRequest();

var url = “http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139”;

myXMLHttpRequest.onreadystatechange = function(){

if(myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status === 200){

	var myObject = JSON.parse(myXMLHttpRequest.responseText);

  var myJSON = JSON.stringify(myObject);

​ }

}

myXMLHttpRequest.open(“GET”,url,true);

myXMLHttpRequest.send();

这段JQuery代码创建了一个新的XMLHttpRequest对象，并获取JSON数据，还将JSON数据反序列化为一个JS对象

var url = “http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139”;

​ $.getJSON(url,function(data){

​ // 对天气数据执行一些操作

​ });

7.2 AngularJS

AngularJS(“http://angularjs.org”)专注于创建单页应用的抽象化工具，单页WEB应用致力于为用户提供无缝交互的应用体验。

AngularJS实现的MVC概念如下：

模型：JS对象即数据模型

视图：HTML（提供了与模型进行数据绑定的语法)

控制器：使用 AngularJS语法来定义和操作与模型和视图间的交互的JS文件

八、JSON与NoSQL

九、服务端的JSON

客户端：HTML CSS、 JAVASCRIPT

服务端：PHP ASP.NET 、 Node.js、 Ruby on Rails、Java 、Go等等

十、总结