什么是JSON
JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法。JSON也是一种轻量级数据交换格式。JSON非常易于人阅读与编写,同时利于机器解析与生成。JSON是在AJAX中代替XML交换数据的更佳方案。
猴子提示: JSON定义法类似于直接定义法,JSON定义法就是将直接定义法定义的函数与属性放到大括号中,并且去掉属性与函数签名的对象名,把等于号改为了冒号,每行后面改为逗号!
JSON格式与语法
var
jsonobject
=
{
//
对象内的属性语法(属性名与属性值是成对出现的)
propertyname
:
value
,
//
对象内的函数语法(函数名与函数内容是成对出现的)
functionname
:
function
(
)
{
...;
}
};
- jsonobject -- JSON对象名称
- propertyname -- 属性名称
- functionname -- 函数名称
- 一对大括号,括起多个"名称/值"的集合
- JSON使用"名称/值"对的集合表示,也可以被理解为数组(Array)
- 属性名或函数名可以是任意字符串,甚至是空字符串(见下面示例)
- 逗号用于隔开每对"名称/值"对
引用网址:http://www.dreamdu.com/javascript/json/
示例
var
site
=
{
URL
:
"
www.dreamdu.com
"
,
name
:
"
梦之都
"
,
englishname
:
"
dreamdu
"
,
author
:
"
可爱的猴子
"
,
summary
:
"
免费的网页设计教程
"
,
pagescount
:
100
,
isOK
:
true
,
startdate
:
new
Date
(
2005
,
12
)
,
say
:
function
(
)
{
document
.
write
(
this
.
englishname
+
"
say : hello world!
"
)
}
,
age
:
function
(
)
{
document
.
write
(
this
.
name
+
"
已经
"
+
(
(
new
Date
(
)
.
getFullYear
(
)
)
-
this
.
startdate
.
getFullYear
(
)
)
+
"
岁了!
"
)
}
};
上面就是一个典型的JSON表示的JavaScript对象,对象的名称为dreamdu,每个名称与值使用冒号:
分割,例如名称author对应值monkey,名称age对应值5.
另一个例子:
var
circle
=
{
x
:
6
,
y
:
8
,
r
:
5
}
;
上面定义了一个x坐标为6,y坐标为8,半径为5的元。
嵌套JSON对象定义
var
sites
=
{
count
:
2
,
language
:
"
chinese
"
,
baidu
:
{
URL
:
"
www.baidu.com
"
,
name
:
"
百度
"
,
author
:
"
baidu
"
,
say
:
function
(
)
{
document
.
write
(
this
.
name
+
"
say hello
"
)
}
},
dreamdu
:
{
URL
:
"
www.dreamdu.com
"
,
name
:
"
梦之都
"
,
author
:
"
monkey
"
,
say
:
function
(
)
{
document
.
write
(
this
.
name
+
"
say hello
"
)
}
}
};
上面的例子中的sites的JSON表示法中还包含了2个小的JSON表示法,因此JSON表示法是可以嵌套的。
梦之都 JavaScript教程 JSON法创建JavaScript对象示例
梦之都已经6岁了!梦之都 say hello
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JSON法创建JavaScript对象</title>
</head>
<body>
<script type="text/javascript">
var site =
{
URL:"www.dreamdu.com",
name:"梦之都",
englishname:"dreamdu",
author:"可爱的猴子",
summary:"免费的网页设计教程",
pagescount:100,
isOK:true,
startdate:new Date(2005, 12),
say:function(){document.write(this.englishname+" say : hello world!")},
age:function(){document.write(this.name+"已经"+((new Date().getFullYear())-this.startdate.getFullYear())+"岁了!")}
};
site.age();
var sites =
{
count: 2,
language: "chinese",
baidu:
{
URL: "www.baidu.com",
name: "百度",
author: "baidu",
say : function(){document.write(this.name+" say hello")}
},
dreamdu:
{
URL: "www.dreamdu.com",
name: "梦之都",
author: "monkey",
say : function(){document.write(this.name+" say hello")}
}
};
sites.dreamdu.say();
</script>
</body>
</html>