SegmentFault 技术周刊 Vol.33 - 什么是 JSON ?

阅读 285
收藏 30
2017-09-14
原文链接:segmentfault.com

JSON 的全称是JavaScript Object Notation,可以翻译为 JavaScript 对象表示法,即将一个 Object 以文本的方式给记录下来。

根据 ECMA-404 标准:

JSON is a text format that facilitates structured data interchange between all programming languages.

所以 JSON 是一种文本格式,它能用于在不同编程语言中交换结构化数据。JSON 是存储和交换文本信息的语法,在很多情况下可以用来描述特定数据结构的实例。

JSON 基础

JSON入门

JSON有两种表示结构,对象和数组。

  • 对象是一个无序的“‘名称/值’对”集合。一个对象以{(左括号)开始,}(右括号)结束。每个“名称”后跟一个:(冒号);“‘名称/值’ 对”之间使用,(逗号)分隔。

  • 数组是值(value)的有序集合。一个数组以[(左中括号)开始,](右中括号)结束。值之间使用,(逗号)分隔。

JavaScript:JSON 和 JS 对象

JSON(JavaScript Object Notation)仅仅是一种数据格式(或者叫数据形式)。数据格式其实就是一种规范,按照这种规范来存诸和交换数据。就好像 XML 格式一样。JSON 文本格式在语法上与创建 JavaScript 对象的代码相同,但本质是不同的。

JSON 和 JavaScript 确实存在渊源,JSON 本身的意思就是 JavaScript 对象表示法(JavaScript Object Notation),可以说这种数据格式是从 JavaScript 对象中演变出来的。JSON 语法是 JavaScript 对象表示法语法的子集。

JSON 格式的数据,主要是为了跨平台交流数据用的。JSON 独立于语言和平台,JSON 解析器和 JSON 库支持许多不同的编程语言。

JSON不等于JavaScript对象

我尝试复制一些JavaScript对象,然后将它们发送到一个基于JSON的书签站点。但是它不能工作,为什么?

服务器返回的错误信息是Unexpected token n(服务器使用NodeJS和Express框架搭建),这意味着上面的JavaScript对象不是合法的JSON。

深入理解JavaScript系列11:根本没有“JSON对象”这回事

我想给大家澄清一下一个非常普遍的误解,我认为很多JavaScript开发人员都错误地把JavaScript对象字面量(Object Literals)称为JSON对象(JSON Objects),因为他的语法和JSON规范里描述的一样,但是该规范里也明确地说了JSON只是一个数据交换语言,只有我们将之用在string上下文的时候它才叫JSON。

对象字面量不是JSON对象,但是有真正的JSON对象。但是两者完全不一样概念,在现代的浏览器里JSON对象已经被原生的内置对象了,目前有2个静态方法:JSON.parse()用来将JSON字符串反序列化成对象,JSON.stringify()用来将对象序列化成JSON字符串。

JSON:如果你愿意一层一层剥开我的心,你会发现...这里水很深——深入理解JSON

欢迎进入本次“深挖JSON之旅”,下文将从以下几个方面去理解JSON:

  • 首先是对“JSON是一种轻量的数据交换格式”的理解;

  • 然后来看经常被混为一谈的JSON和JS对象的区别;

  • 最后我们再来看JS中这几个JSON相关函数具体的执行细节。

JSON 进阶

小技巧之JSON.stringify()/parse()

JSON.stringify() 用于把一个JSON对象(恩,javascript中万物皆对象),转化为一个字符串。

JSON.parse() 只拥有两个参数,第一个就是把这个字符串转换为JSON对象,第二个就是筛选对象。

解析XML和JSON内容的一点技巧

在没有统一标准的情况下,一个系统对接多个外部系统往往会遇到请求接口响应数据异构的情况,有可能返回的是XML,也有可能返回JSON。除了返回类型不同,内容结构也不尽相同。

如果在我们系统中为每种格式的内容针对处理显然是不合理的,上面的内容中我们只是关心三种信息,分别是业务ID、状态值和描述信息,那么可不可以抽象这三种信息,获得这些信息后再进行业务逻辑处理。

自己动手实现一个简单的JSON解析器

JSON 解析器从本质上来说就是根据 JSON 文法规则创建的状态机,输入是一个 JSON 字符串,输出是一个 JSON 对象。一般来说,解析过程包括词法分析和语法分析两个阶段。

词法分析解析出 Token 序列后,接下来要进行语法分析。语法分析的目的是根据 JSON 文法检查上面 Token 序列所构成的 JSON 结构是否合法。

造轮子系列(一): 一个速度九分快的JSON解析器

前一阵子看到了一个Golang的JSON库go-simplejson,用来封装与解析匿名的JSON,说白了就是用map或者slice等来解析JSON,觉得挺好玩,后来有个项目恰好要解析JSON,于是就试了试,不小心看了一眼源代码,发现竟然是用的Golang自带的encoding/json库去做的解析,而其本身只是把这个库封装了一层,看起来更好看罢了

于是心想能不能徒手写一个解析器,毕竟写了这么多年代码了,也JSON.parse,JSON.stringify了无数次。捣腾了两天,终于成了,测试了一下,性能比自带的库要高很多,速度基本上在1.6到7倍之间(视JSON串的大小和结构而定),所以决定写这篇文章分享一下思路。

动手实现一个JSON验证器

JSON字符串的验证比想象中的要简单很多,可以说是相当的简单,这得益于在官网上已经将各个状态的扭转、格式类型和组成图给你画好了,只要代码没写错,照着图把各个部分的验证写出来就实现了。

在写完后,我用fastjson的issue859.json测了一下性能,和调用Go的json库或其它三方json库相比,这个实现的性能要高出30%左右,因此如果有需求只验证不解析的,花点时间手撸一个验证器还是很划算的。

JS+PHP+MYSQL处理JSON的全面总结

开发过程中经常碰到要把前端的json格式的数据传递到后端php,php做一些业务处理后把数据存到mysql,然后,php再从mysql中取出数据返回到前端。虽然这是一个再基础不过的处理过程,但还是有不少问题需要认真研究。下面从几个环节看看可能出现的各种问题。

json字符串头部出现非法字符“ufeff”的问题处理

今天在处理将数组转为json 字符串后,然后获取到解析时,出现解析的json字符串为空的现象,首先看了下,我的json转换脚本之前没有任何输出,但还是出现json转化乱码,后来查了下,原来是脚本编码格式的问题。

PHP json_decode 遇到的坑

场景:某项目客户反馈,输出的结果 JSON 中有个要求为对象的数据字段,在某些情况下返回的是 [] 而不是 {};数据由公司其他部门提供,查看原始数据的时候,没有发现任何问题;后来因为要加入某些预处理,在获取到其他部门的 JSON 数据之后进行解码并对某个字段进行处理;然而,在处理完之后再次使用 JSON 输出,发现结果已经不是我们想要的了。

(转)php json_decode解析失败及错误处理

一般情况下,获取到一段json内容,直接json_decode($content, true)就转成array来用了,很方便。

但是,如果给你提供json内容的接口出了点问题,给的json不标准或是干脆有错误,那就要想办法来找出问题了。

JavaScript JSON——“语法、解析与序列化”的注意要点

JSON可以表示一下三种类型的值:

  • 简单值:使用与js相同的语法可以在json中表示字符串、数值、布尔值和null。但是json不支持js的undefined。

  • 对象:对象作为一种复杂的数据类型,表示的是一组有序的键值对。每个键值对的值可以是简单值,也可以是复杂数据类型的值

  • 数组:数组也是一种复杂数据类型,表示一组有有序的的值列表,可以通过数值索引来访问其中的值。数组的值也可以是任意类型,简单值,对象,数组均可。

json不支持变量,函数,对象实例,它就是一种表示结构化数据的格式。

让json更懂中文

相信很多人用php搭后台时候,当ajax用于交互时候,由于字符都被urf-8处理,所以用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”u*”的格式, 而且还会在一定程度上增加传输的数据量。

总结几种解决方法:

  • 自己构造支持中文的 json_encode

  • 运用preg_replace替换u**为中文

  • 5.4版本后的直接处理

ajax 以json形式提交表单

JSON 扩展

ajax相关测试题目

记录下Flarum论坛API设计

利用window.name实现页面跳转之间的数据传递

先描述一下需求情景:

有一个生成节日贺卡的页面,a页面最后部分用来填写用户名和贺卡内容,点击提交按钮跳转到贺卡页面b,b页面显示的就是a页面填写的内容和用户名。(a页面和b页面是没有跨域的...)

一开始我只想到用ajax提交数据来实现,不过一想,是直接提交到b页面吗?一时之间,我也不知道该如何进行页面跳转之间的数据传递。百度许久,终于看到 window.name这个方法。

介绍两大神器!——使用json-server和faker.js模拟REST API

今天发现了一个神器——json-server!在他的帮助下可以在很短的时间内搭建一个Rest API, 然后就可以让前端在不依赖后端的情况下进行开发啦!

简单来说,JSON-Server是一个Node模块,运行Express服务器,你可以指定一个json文件作为api的数据源。

Jsoniter 0.9.8 发布: JSON 性能对标 Protobuf

Jsoniter 是一款快且灵活的 JSON 解析器,同时提供 Java 和 Go 两个版本。

zTree -- jQuery 树插件 构造treeNode JSON 数据对象

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

在大型项目中,往往需要不同的用户看到不同的目录,不同的地区显示不同的目录等等,面对这些庞大的数据,需要生成不同结构的树目录,你不能一个一个定义这些配置来满足那么多数据需求,这就需要异步加载子节点的的父节点,通过构造treeNode的 JSON 数据对象方法来实现,如果你不嫌我啰嗦,接下来会给大家讲述这个方法。

推荐Mac系统快速预览扩展插件15个,保证你满意

包括:

  • Markdown文件转换成静态页面预览

  • 在预览源代码文件,高亮代码

  • 格式化预览JSON文件

  • 显示图像大小和分辨率

不得不说的 JSONP

ajax相关完整知识

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

  • AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)

  • AJAX 是一种用于创建快速动态网页的技术

  • 通过在后台与服务器进行少量数据交换

  • AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  • 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

JSONP是什么

JSONP的诞生

  • 首先,因为ajax无法跨域,然后开发者就有所思考

  • 其次,开发者发现, <script> 标签的src属性是可以跨域的。把跨域服务器写成 调用本地的函数 ,回调数据回来不就好了?

  • json刚好被js支持(object)

  • 调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址,最终生成的返回值都是一段js代码)

  • 这种获取远程数据的方式看起来非常像ajax,但其实并不一样。便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP。

  • 传递一个callback参数给跨域服务端,然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。

同源策略与JS跨域(JSONP , CORS)

本文按照政治问答题必备套路分为以下3个部分:

  • 为什么要跨域?

  • 跨域是什么?

  • 如何实现跨域?

为什么是 JSONP

在 WEB 开发中,经常见到诸如 AJAX、JSON、JSONP 这些名词。三者看起来很像,很多同学尤其是没有系统了解过前端技术体系的同学,平常只是借助类似 JQuery 这类库封装好的函数使用而已,并不了解其原理。但这三种东西具体是什么,有什么关系和区别却常常说不清楚。

接下来,会简要介绍一下三者的的含义,重点阐述 JSONP 的来源和原理,以及为什么 JSONP 不是 AJAX。

jsonp 跨域原理分析

总结:

  1. ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

  2. ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XMLHttpRequest获取非本页内容,而jsonp的核心则是通过HTTP来动态添加 <script> 标签来调用服务器提供的js脚本。

  3. 其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理(CORS)一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

  4. jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

  5. jsonp整个过程中,本地站点一直处于主动的地位,主动的发送请求,主动的加载远程js.而第三方站点则处于被动的响应。

(Ajax) 浅谈 JSONP 的原理与实现

JSONP与Ajax的关系:

  • Ajax与JSONP这两种技术看起来很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jQuery等框架都把JSONP作为Ajax的一种形式。

  • 实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据,而JSONP的核心则是动态添加<script>标签来调用服务器提供的js文件。

  • Ajax与JSONP的区别也不在于是否跨域,Ajax通过服务端代理也可以跨域,JSONP也可获取同源数据。

本期完:)


评论
说说你的看法