JSON是一种简单的数据格式,比xml更轻巧。其规则很简单,对象是一个无序的名称/值对集合,下面有个案例,大家可以感受下
1:
JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单:对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值'对”之间使用“,”(逗号)分隔。
JSON用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。
<span style="font-size:18px;">{"person": {
"name":"Andy Budd",
"website":"http://andybudd.com/",
"email":"andy@clearleft.com"
}
}</span>
JSON 只是一种文本字符串。它被存储在responseText 属性中
为了读取存储在 responseText 属性中的JSON 数据,需要根据JavaScript 的eval语句。函数 eval会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的,所以它本身是可执行的
2:案例
<%@ page language=
"java"
pageEncoding=
"UTF-8"
%>
<%@ page language=
"java"
pageEncoding=
"UTF-8"
%>
02
<html xmlns=
"http://www.w3.org/1999/xhtml"
xml:lang=
"en"
lang=
"en"
>
03
<head>
04
<meta http-equiv=
"content-type"
content=
"text/html; charset=utf-8"
/>
05
<title>People at Clearleft</title>
06
<style type=
"text/css"
>
07
@importurl(
"clearleft.css"
);
08
</style>
09
<script type=
"text/javascript"
>
10
window.onload=function(){
11
var aNodes=document.getElementsByTagName(
"a"
);
12
13
for
(var i =
0
;i < aNodes.length; i++){
14
15
aNodes[i].onclick=function(){
16
var request=
new
XMLHttpRequest();
17
var url=
this
.href;
18
var method=
"GET"
;
19
request.open(method,url);
20
request.send(
null
);
21
request.onreadystatechange=function(){
22
if
(request.readyState==
4
){
23
if
(request.status==
200
||request==
304
){
24
var result=request.responseText;
//json被存储在responseText属性中
25
var object=eval(
"("
+result+
")"
);
//读取responseText中的json数据
26
var name= object.person.name;
//读取json对象中存储的数据
27
var website= object.person.website;
28
var email= object.person.email;
29
var aNode=document.createElement(
"a"
);
30
aNode.appendChild(document.createTextNode(name+
":"
+
"email"
+
":"
+website));
31
aNode.href=
"mailTo"
+
"email"
+
",website"
;
32
var h2Node=document.createElement(
"h2"
);
33
h2Node.appendChild(aNode);
34
var dtails=document.getElementById(
"details"
);
35
details.innerHTML=
""
;
//防止重复的添加字符串
36
dtails.appendChild(h2Node);
37
}
38
}
39
}
40
return
false
;
41
}
42
}
43
};
44
</script>
45
</head>
46
<body>
47
<h1>
48
People
49
</h1>
50
<ul>
51
<li>
52
<a href=
"files/andy.js"
>Andy</a>
53
</li>
54
<li>
55
<a href=
"files/richard.js"
>Richard</a>
56
</li>
57
<li>
58
<a href=
"files/jeremy.js"
>Jeremy</a>
59
</li>
60
</ul>
61
<div id=
"details"
></div>
62
</body>
63
</html>
更多信息请查看IT技术专栏