JSON:JavaScript object Notation(JavaScript对象表示法)
JSON是存储和交换文本信息的语法.类似XML
JSON比XML更小,更快,更易解析
JSON是轻量级的文本数据交换格式
JSON独立于语言:JSON适用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台,JSON解析器和JSON库支持许多不同的编程语言,
JSON具有自我描述性,更易理解
JSON-转换为JavaScript对象
JSON文本格式在语法上与创建JavaScript对象的代码相同
由于这种相似性,无需解析器,JavaScript程序能够适用内建的eval()函数,用JSON数据来生成原生的JavaScript对象
案例:用JSON存数据,并且显示出来
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<p id="p"></p><br />
<script>
var JSONObject = {
"name":"小明"
};
document.getElementById("p").innerHTML=JSONObject.name
</script>
</head>
<body>
</body>
</html>
这里需要注意的一点是,放在</head>中,页面还没有完全加载,document就去取元素了,这时候就会报错了
html从上到下运行的
JavaScript放的位置有几种:
1.放在<head>中:放在head中的JS代码会在页面加载完成之前就读取,可以确保在需要使用脚本之前，它已经被载入了.
2.放在body中:JavaScripts会在页面加载的时候被执行。
JSON与XML相同之处
JSON是纯文本
JSON是具有"自我描述"
JSON具有层级机构(值中存值)
JSON可通过JavaScript进行解析
JSON数据可使用Ajax进行传输
与XML不同之处
1.没有结束标签
2.更短
3.读写的速度更快
4.能够适用内建的JavaScript eval()方法进行解析
5.适用数组
6.不能用保留字
JSON的好处
1.对于Ajax应用程序来说,JSON比XML更快更易适用
使用XML的步骤:
1)读取XML文档
2)适用XMLDOM来循环遍历文档
3)读取值并存储在变量中
使用JSON的步骤
1)读取JSON字符串
2)用eval()处理JSON字符串
JSON语法规则
JSON语法是JavaScript对象表示语法的子集
1)数据在名称/值对中
2)数据用逗号分隔
3)大括号保存对象
4)中括号保存数组
JSON名称/值对
JSON数据的书写格式:名称/值对
名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:
"name":"dali"
等价于JavaScript中name="dali"
JSON值可以是
1)数字(整数或浮点数)
2)字符串(在双引号中)
3)逻辑值(布尔)
4)数组(在中括号[]中,里头包含一个个"对象",每个对应用大括号{})
5)对象(在大括号中)
6) null
JSON数字:JSON数字可以是整数或者浮点数
如:{"age":30}
JSON对象:在大括号{}中写
对象可以包含多个(key/value)键/值对;
key必须是字符串,value可以是合法的JSON数据类型(字符串,数字,对象,数组,布尔值或者null)
key和value中适用冒号(:)分割
每个键值对适用逗号(,)分割
例如:
var obj = {"name":"dali","age":18}
访问对象值:obj.name(访问对象obj的名字)
可以适用for-in来循环对象的属性名称
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p">
</p>
<script>
var odj = {"name":"赵云","age":90}
var Str = " ";
for(x in odj){
Str +=x+"<br>"
}
document.getElementById("p").innerHTML = Str;
</script>
</body>
</html>
如下图:
能够知道键值对的键,那么就很容易得出它的值了
把
改为:
for(x in odj){
Str +=x+" :"+odj[x]+"<br>"
}
运行输出如下图:
可见,这种循环的方式节省了不少代码量,更加简洁方便,可以防止键写错等
嵌套JSON对象(说白了,就是对象中有对象,被嵌套的那个对象,相当于外层对象的一个键值对,里层的对象的访问按照JSON对象的规则访问即可,只是需要指明外层对象)(对象的嵌套,属性值改变,删除都是使用同一个案例代码)
案例(访问诸葛的儿子,并得到他儿子的年龄,姓名):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var obj = {
"name":"诸葛",
"age":45,
"site":{
"name":"小诸葛",
"age":9
}
}
/*访问诸葛的儿子,你想见到诸葛的儿子,那就先经过诸葛的同意,诸葛儿子的年龄由他自己说*/
document.getElementById("p").innerHTML="name:"+obj.site.name+"age:"+obj.site.age
</script>
</body>
</html>
如下图:
(修改JSON对象的值)给诸葛的儿子起个外号,直接修改就可以,有两种方式:
1)
obj.site.name="ll"
2)obj.site["name"]="ll"
这两种都可以改变,不过第一种比较直观.
如下图:
(删除对象的属性)诸葛的儿子不要他这个名字了
1)delete obj.site["name"]
2)delete obj.site.name
两种都是等价的.
如下图:
从图中可以看书,当删除了小诸葛的名字这个属性后,再想输出他的名字,就显示未定义.
JSON数组
数组可包含多个对象
{
"sites":[
{"name":"dali","age":18},
{"name":"daniu","age":19},
{"name":"dalu","age":20}
]
}
上面的"sites"是包含三个对象的数组.每个对象代表一条个人信息(名字,年龄)
数组作为JSON对象
JSON数组在中括号中写
JSON中数组值必须是合法的JSON数据类型(字符串,数字,对象,数组,布尔值或null)
JavaScript中,数组可以是以上JSON数据类型,也可以是JAvascript的表达式,包括函数,日期,及underfined
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var city ={
"BJ":"中国首都",
"ShH":[{"XNQ":["a","b","c"]},
"静安区","宝山区"]
}
/*访问上海的兴宁区的三个地方(a,b,c)*/
var x = " ";
for(j in city.ShH){
x += city.ShH[0].XNQ[j] + "<br>";
}
document.getElementById("p").innerHTML = x;
</script>
</body>
</html>
如下图:
访问步骤:city.ShH[0].XNQ[j] ---先从对象中访问属性,属性包含一个数组,数组里头包含JSON对象,这个JSON对象的属性值是一个数组.层层类推.
JSON对象中的数组(比如城市包括北京,上海等,上海又包括兴宁区,静安区,宝山区等)
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var city ={
"BJ":"中国首都",
"ShH":["长宁区","静安区","宝山区"]
}
/*访问上海的一个城市*/
document.getElementById("p").innerHTML = city.ShH[0];
</script>
</body>
</html>
如下图:
修改数组值:
如,把上面的长宁区改成金山区
city .ShH[0]="金山区"
删除数组值:
如:删除长宁区
delete city .ShH[0]
JSON布尔值(true和false两种)
{"b":true}
JSON null
{"name":null}
JSON适用JavaScript语法
因为JSON适用JavaScript语法,所以无需额外的软件就能处理JavaScript中的JSON
案列:访问JSON数组,把所有的数据显示出来
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var site=[
{"name":"小明","age":18},
{"name":"小红","age":19},
{"name":"小灰","age":19},
]
var str = " ";
for(var i = 0 ; i < site.length;i++){
str +="name:"+site[i].name + "age:"+site[i].age+"<br>";
}
document.getElementById("p").innerHTML = str;
</script>
</body>
</html>
如下图:
可以看到JSON非常轻便地就取出数据并显示
JSON文件
1.JSON文件的文件类型是".json"
2.JSON文本的MIME类型是"application/json"
JSON.parse()
JSON通常用于服务器端交换数据,在加收服务器数据时一般是字符串,我们可以使用JSON.parse()方法将数据转换为JavaScript对象
语法:
JSON.parse(text[,reviver])
text:必需,表示一个有效的JSON字符串
reviver:可选,表示转换结果的函数,将为对象的每个成员调用此函数
通俗的来说,上面的JSON结构化数据都是我们造出来的,有明确的JSON对象名称,我们可以通过名称直接属性获取并运用,但是现在只提供给我们一个一组JSON数据格式的数据,让我们转换称JavaScript对象,再通过这个JavaScript对象进行访问JSON数据.
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var obj = JSON.parse('{"name":"亚瑟","age":98}');
document.getElementById("p").innerHTML = obj.name
</script>
</body>
</html>
如下图:
可以看到,代码中我们并没有直接创建一个JSON对象,而是将JSON数据通过parse转换成了一个JavaScript对象,再对JSON数据进行操作
主流浏览器都支持 JSON.parse() 函数：
- Firefox 3.5
- Internet Explorer 8
- Chrome
- Opera 10
- Safari 4
JSON异常(解析数据):
如果一个JSON对象中包含一个键值对 "date":2018-3-30
正常的话,取出来的值就是2018-3-30,但是我们并不想让它这么表示出来,而是读懂我们的日期格式,并以中国标准时间来表示
如下图正常显示:
异常:
很显然,中国标准时间形式比较规范化
案例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var obj = JSON.parse('{"name":"亚瑟","age":98,"initDate":"2018-3-30"}');
obj.initDate = new Date(obj.initDate);
document.getElementById("p").innerHTML = obj.initDate
</script>
</body>
</html>
需要先将日期存储为字符串的形式,也就是JavaScript对象中initDate属性的属性值是字符串的格式,然后再用Date()方法把字符串转换成Date形式
以上的转换方法,是我们再外部实现的,不过还有一种方法,JSON.parse()方法还接收了一个参数,叫reviver函数,该函数主要作用在每个键值对上.意思是,数据少的时候,我们可以单个转换,但当我们的JSON数据太多(JSON数组)的时候,我们不可能一个个取出来再进行数据格式转换,那样代码冗余,真是太浪费了,此时就需要这么一个函数在转换成JavaScript对象的过程中,对每一个JSON数据的键值对进行转换.这样就简单方便多了.
下面看这个案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var obj = JSON.parse('[{"name":"亚瑟","age":98,"initDate":"2018-3-30"},{"name":"东皇","age":90,"initDate":"2018-4-1"}]',function(key,value){
if(key == "initDate"){
return new Date(value);
}else{
return value;
}
});
document.getElementById("p").innerHTML = "亚瑟的时间:"+obj[0].initDate+"<br> 东皇的时间:"+obj[1].initDate
</script>
</body>
</html>
如下图:
这样就简单方便多了.(源码的编写人,总是比我们多一根筋,方方面面的情况都会考虑到,只有你想不到,没有他们做不到的)
解析函数:
再来看一种情况,运用JSON的人,也许会在JSON对象中的,键值对中的值放入函数.正常情况下键值对如:"name":"张飞",但是现在传入的键值对变成:"name":"function(){ return "张飞"}",那么能够解析地出来吗,JSON是不允许包含函数的,但是可以把函数包装称字符串的形式,进行传值,也就是说 :
{ "name":"张飞", "age":function () { return 100;}}(这种写法,JSON数据格式是不合法的)
但是下面这种是合法的:
{ "name":"张飞", "age":"function () { return 100;}"}
只是我们想得到"张飞"这个名字,还需要对obj进行处理
注意:当我们进行访问JSON对象中的属性时,可以以: 对象名.属性名 的形式进行访问,但是键值中包含函数后访问不同,前者并不生效,需要改为 对象名.属性名 () 才能访问.
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p"></p>
<script>
var text = '{ "name":"张飞", "age":"function () { return 100;}"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age+ ")");
document.getElementById("p").innerHTML = obj.age();
</script>
</body>
</html>
JavaScript函数eval()可以用于将JSON文本转换为JavaScript对象,eval()函数使用的是JavaScript编辑器,可以解析JSON,然后生成JavaScript对象,必需把文本包括在括号中,这样才能避免错误. eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本
JSON.stringify()
JSON通常用于与服务器端交换数据,再想服务器发送数据时一般是字符串.可以使用JSON.stringify()方法将JavaScript对象转换成为字符串
语法:
JSON.stringify(value[,replacer[,space]])
value:表示一个有效的JSON对象
replacer:可选,用于转换结果的函数或数组
若replacer为函数,则JSON.stringify将调用该函数,并传入每个成员变量的键和值.使用返回值而不是原始值.如果此函数返回undefined,则排除成员,根对象的键是一个空字符串:" ".
如果replacer是一个数组,则仅转换该数组中具有键值的成员.成员的转换顺序与键再数组中的顺序一样
- 当 value 参数也为数组时，将忽略 replacer 数组。
- space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：\t。
这一大串,很难看,简单来说,JSON往服务器中发送数据,不能是以JSON数据格式,需要把JSON数据格式转换成字符串的形式再发送.这样的数据比较友好.
所以再测试的时候,可能看起来两个数据一样,但是他们的数据类型是不同的,一个是JSON对象,一个是简单的字符串
通过案例你就会明白了:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="p"></p>
<script>
var obj = {"name":"李白","age":90}
obj = JSON.stringify(obj);
document.getElementById("p").innerHTML = obj +" "+obj.name;
</script>
</body>
</html>
这个案例,先把JSON对象odj通过stringify转换成了字符串对象的obj,然后进行输出obj,关键点在后面的obj.name,可以看下图,obj.name输出的undefined,原因在于此时的obj已经不是JSON对象了,它是一个普通的字符串.
如下图
JavaScript数组转换为JSON字符串
在这里我们需要明白几个问题
1.JSON字符串:是指该字符串的值与JSON的数据格式相同,但是它并不是JSON对象.
2.JSON对象跟Javascript的数组字面量很相似,JSON的键/值在任何时候都必需要双引号引起来的(JavaScript字面量数组可以有,也可以没有),Javascript数组字面量里并不叫键,而是普通变量名,JSON没有变量的概念,JavaScript语句通常需要分号结尾,但是JSON没有.
3.JSON的创建跟JavaScript中数组的创建并不同.
创建一个数组，有三种方法。
下面的代码定义了一个名为 myCars的数组对象：
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
创建一个JSON对象:
var book = {"name":"liming","age":5}
从服务端接收 JSON 数据和从服务端接收数组的 JSON 数据(涉及Ajax),后续更新
JSON使用
1.把JSON文本转换为JavaScript对象
JSON最常见的用法之一,是从web服务器上读取JSON数据(作为文件或者httpRequest),将JSON数据转换为JavaScript对象,然后在网页中使用该数据.
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p"></p>
<script>
var text = '{ "sites" : [{ "name":"吕布" , "age":100 },{ "name":"姜子牙" , "age":101 },{ "name":"曹操" , "age":102 } ] }';
/*var obj = JSON.parse(text);*/
text = eval("(" +text+ ")");
document.getElementById("p").innerHTML = text.sites[0].name;
</script>
</body>
</html>
下面这两个等价
/*var obj = JSON.parse(text);*/
text = eval("(" +text+ ")");
输出如下图
来区分一下parse和eval的区别:
共同点:都能将字符串解析成JSON对象
不同点:eval方法不会去检查给的字符串是否符合JSON的格式,同时会将字符串中的js代码一并执行,但是parse不会执行js代码.会检查是否是JSON数据格式
可以把写好JSON数据放入JSON格式化工具中进行格式化,这样可以验证所写的JSON数据格式是否正确