JSON 简单了解

简介: JSON 简单了解

JSON 简单了解

JSON是什么?

image.png

2、JSON的与法规则

image.png

3.JSON和XML

image.png

4.JSON 解析和生成

image.png

5.JSON使用规范


JSON 的语法规则十分简单,无论用何种方法总结都只有数条而已,它参考了 C 语言家族的一些习惯,学习起来并不会感到陌生。


上一课提到的 JSON 的五点语法:


数组(Array)用方括号(“[]”)表示。

对象(Object)用大括号(”{}”)表示。

名称/值对(name/value)之间用冒号(”:”)隔开。

名称(name)置于双引号中,值(value)有字符串、数值、布尔值、null、对象和数组。

并列的数据之间用逗号(“,”)分隔

对象(Object)

对象用大括号(“{}”)括起来,大括号里是一系列的“名称/值对”,请看概念图。


两个并列的数据之间用逗号(“,”)隔开,注意两点:


使用英文的逗号(“,”),不要用中文的逗号(“,”)

最后一个“名称/值对“之后不要加逗号

image.png

数组(Array)

数组表示一系列有序的值,用方括号(“[]”)包围起来,并列的值之间用逗号分隔,请看概念图。


例如,以下的数组是合法的:


image.png


名称/值对(Name/Value)

名称(Name)是一个字符串,要用双引号括起来,不能用单引号,也不能没有引号,这一点与 JavaScript 不同。


值的类型只有七种:字符串(string)、数值(number)、对象(object)、数组(array)、true、false、null。不能有这之外的类型,例如

undefined、函数等。请看概念图。


image.png


字符串(string)的规则如下:


英文双引号括起来,不能用单引号,也不能没有。

字符串中不能单独出现双引号(”) 和右斜杠(“\”)。

如果要打双引号或右斜杠,需要使用“右斜杠+字符”的形式,例如 \” 和 \,其它的转义字符也是如此

字符串的概念图。

image.png


数值的概念图。

image.png


6.字符转转化


解析,是指将符合 JSON 语法规则的字符串转换成对象的过程。


不同的编程语言都提供了解析 JSON 字符串的方法,在这里主要讲解 JavaScript 中的解析方法。主要有三种:


使用 eval()

使用 JSON.parse()

使用第三方库,例如 JQuery 等

eval()

eval() 函数的参数是一个字符串,其作用是直接执行其中的 JavaScript 代码。


eval() 能够解析 JSON 字符串。从这里也可以看得出,JSON 和 JavaScript 是高度嵌合的。


但是,现在已经很少直接使用 eval() 来解析了,如果您的浏览器版本真的是很旧,可能才需要这个方法。此外,eval()

是一个相对危险的函数,因为字符串中可能含有未知因素。在这里,作为学习,还是要知道这也是一种方法。


请注意 eval() 的参数,在字符串两旁加了括号,这是必须的,否则会报错。


因为 JSON 字符串是被大括号(“{}”)包围的,直接放到 eval() 会被当成语句块来执行,因此要在两旁加上括号,使其变成表达式。


image.png


JSON.parse()

现在绝大多数浏览器都以支持 JSON.parse(),是推荐使用的方式。


如果输入了不符合规范的字符串,会报错。


JSON.parse() 可以有第二个参数,是一个函数。此函数有两个参数:name 和 value,分别代表名称和值。当传入一个 JSON

字符串后,JSON 的每一组名称/值对都要调用此函数。该函数有返回值,返回值将赋值给当前的名称(name)。


利用第二个参数,可以在解析 JSON 字符串的同时对数据进行一些处理。


7、对象转换字符串


序列化,指将 JavaScript 值转化为 JSON 字符串的过程。


JSON.stringify() 能够将 JavaScript 值转换成 JSON 字符串。JSON.stringify()

生成的字符串可以用 JSON.parse() 再还原成 JavaScript 值。


image.png


参数的含义

JSON.stringify(value[, replacer[, space]])


value:必选参数。被变换的 JavaScript 值,一般是对象或数组。


replacer:可以省略。有两种选择:函数或数组。


如果是函数,则每一组名称/值对都会调用此函数,该函数返回一个值,作为名称的值变换到结果字符串中,如果返回 undefined,则该成员被忽略。


如果是数组,则只有数组中存在名称才能够被转换,且转换后顺序与数组中的值保持一致。


space:可以省略。这是为了排版、方便阅读而存在的。可以在 JSON 字符串中添加空白或制表符等。


value 用法


replacer 的用法


space 的用法


8.JSON和XML转换


**1. 下载相关文件


JQuery

jquery.json2xml.js

jquery.xml2json.js

XML 字符串转换成 JSON 对象 $.xml2json(str);

JSON 对象转换成 XML 字符串 $.json2xml(obj);**

image.png

9.Ajax和JSON

JSON 文件被放置在服务器端,客户端请求该文件用得最多的是 Ajax,能够实现异步请求。

Ajax 是什么

AJAX,全称 Asynchronous JavaScript and XML,即“异步的 JavaScript 和 XML”,一般写作

Ajax。


Ajax 能够与服务器交换少量数据,从而异步地更新部分网页。


异步,指的是当 Ajax 执行交换数据的操作时,其他的操作仍然可以执行。


一个最常见的应用是:打开百度或谷歌首页,当输入文字后,搜索栏下方会显示出几个建议的搜索词。这正是 Ajax 的应用。




创建和使用 Ajax

创建 Ajax 对象要考虑浏览器的版本问题,主要分为两大类:IE7+/Chrome/Firefox/… 和 IE6/IE5.。


function CreateXHR(){

if (window.XMLHttpRequest)

{

//对浏览器 IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

else

{

//对浏览器 IE6, IE5

return new ActiveXObject(“Microsoft.XMLHTTP”);

} }


然后,只要用如下方式创建即可。


var xmlhttp; xmlhttp = CreateXHR();


服务器端有一个文件 test.json,请求并输出。


xmlhttp.open(“GET”,“test.json”,true); xmlhttp.send();

xmlhttp.onreadystatechange = function(){

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

var jsonstr = xmlhttp.responseText;

console.log(jsonstr);

} }


其中,xmlhttp.readyState 存有 XMLHttpRequest 的状态,有五个值:


0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪


xmlhttp.status 的值为请求结果,200 表示“OK”,404 表示未找到页面。


获取来自服务器的响应,可使用 XMLHttpRequest 对象的 responseText 或 responseXML

属性,前者是以字符串形式,后者是以 XML 形式。


10.GeoJSON 和opoJSON


GeoJSON 和 TopoJSON 是符合 JSON 语法规则的两种数据格式,用于表示地理信息。


GeoJSON

GeoJSON 是用于描述地理空间信息的数据格式。GeoJSON 不是一种新的格式,其语法规范是符合 JSON

格式的,只不过对其名称进行了规范,专门用于表示地理信息。


GeoJSON 的最外层是一个单独的对象(object)。这个对象可表示:


几何体(Geometry)。

特征(Feature)。

特征集合(FeatureCollection)。

最外层的 GeoJSON 里可能包含有很多子对象,每一个 GeoJSON 对象都有一个 type 属性,表示对象的类型,type

的值必须是下面之一。


Point:点。

MultiPoint:多点。

LineString:线。

MultiLineString:多线。

Polygon:面。

MultiPolygon:多面。

GeometryCollection:几何体集合。

Feature:特征。

FeatureCollection:特征集合。

下面举几个例子。


点对象:


{ “type”: “Point”, “coordinates”: [ -105, 39 ] }


线对象:


{ “type”: “LineString”, “coordinates”: [[-105, 39 ], [-107, 38 ]] }


面对象:


{ “type”: “Polygon”, “coordinates”:[[ [30, 0], [31, 0], [31, 5], [30,

5], [30, 0] ]] }


由以上格式可以发现,每一个对象都有一个成员变量 coordinates。如果 type 的值为

Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon

之一,则该对象必须有变量 coordinates。


如果 type 的值为 GeometryCollection(几何体集合),那么该对象必须有变量

geometries,其值是一个数组,数组的每一项都是一个 GeoJSON 的几何对象。例如:


{

“type”: “GeometryCollection”,

“geometries”: [

{

“type”: “Point”,

“coordinates”: [100, 40]

},

{

“type”: “LineString”,

“coordinates”: [ [100, 30], [100, 35] ]

}

] }


如果 type 的值为 Feature(特征),那么此特征对象必须包含有变量 geometry,表示几何体,geometry

的值必须是几何体对象。此特征对象还包含有一个 properties,表示特性,properties 的值可以是任意 JSON 对象或

null。例如:


{

“type”: “Feature”,

“properties”: {

“name”: “北京”

},

“geometry”: {

“type”: “Point”,

“coordinates”: [ 116.3671875, 39.977120098439634]

} }


如果 type 的值为 FeatureCollection(特征集合),则该对象必须有一个名称为 features 的成员。features

的值是一个数组,数组的每一项都是一个特征对象。


TopoJSON

TopoJSON 是 GeoJSON 按拓扑学编码后的扩展形式,是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON

直接使用 Polygon、Point 之类的几何体来表示图形的方法,TopoJSON

中的每一个几何体都是通过将共享边(被称为arcs)整合后组成的。


TopoJSON 消除了冗余,文件大小缩小了 80%,因为:


边界线只记录一次(例如广西和广东的交界线只记录一次)。 地理坐标使用整数,不使用浮点数。


在线工具

在线生成 GeoJSON:http://geojson.io/


简化、转换 GeoJSON 和 TopoJSON:http://mapshaper.org/

image.png


image.png

目录
相关文章
|
1月前
|
存储 JSON JavaScript
JSON应用
JSON应用
28 4
|
3月前
|
JSON JavaScript 前端开发
JSON
JSON(JavaScript Object Notation)是一种数据格式,用于在不同平台之间进行数据交换和存储。它采用了易于阅读和编写的文本格式,并且在多种编程语言中都有良好的解析和生成支持。
28 0
JSON
|
3月前
C++Json生成
C++Json生成
23 0
|
4月前
|
JSON 前端开发 JavaScript
JSON小技巧
JSON小技巧
25 0
|
8月前
|
JSON fastjson Java
JSON小记
JSON小记
|
10月前
|
数据格式 JSON JavaScript
JSON是什么?
JSON 全称“JavaScript Object Notation”,译为“JavaScript 对象简谱”或“JavaScript 对象表示法”,是一种轻量级的、基于文本的、开放的数据交换格式。JSON 在 Web 开发领域有着举足轻重的地位,如果您想在 Web 开发领域大展身手的话,就必须了解 JSON。
|
10月前
|
XML JSON JavaScript
json
json
50 0
|
10月前
|
JSON 数据格式
json的一些小理解
个人学习总结
59 0
|
JSON JavaScript 前端开发
什么是 JSON?
什么是 JSON?
76 0
|
存储 JSON JavaScript
JSON介绍
JSON介绍
171 0