08 JSON

• JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)。JSON是一种标准的轻量级的数据交换格式。特点是：体积小，易解析
• JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
• 在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）

8.1 代码比较

两个数据要交换可以用json或者xml，通过与java交换
对比一下数据的轻量级

// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
var studentObj = {
	"sno" : "110",
	"sname" : "张三",
	"sex" : "男"
};

// 访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
1
2
3
4
5
6
7
8
9

也可以进行数组的遍历

// JSON数组
var students = [
	{"sno":"110","sname":"张三","sex":"男"},
	{"sno":"120","sname":"李四","sex":"男"},
	{"sno":"130","sname":"王五","sex":"男"}
];

// 遍历
for(var i = 0; i < students.length; i++){
	var stuObj = students[i];
	alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
}
1
2
3
4
5
6
7
8
9
10
11
12

所以json的代码格式是：

var jsonObj = {
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	....
};
1
2
3
4
5
6
7

对比：
之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.

Student = function(sno,sname,sex){
	this.sno = sno;
	this.sname = sname;
	this.sex = sex;
}
var stu = new Student("111","李四","男");
alert(stu.sno + "," + stu.sname + "," + stu.sex);
1
2
3
4
5
6
7

8.2 JSON对象

• 通过键值对进行一一书写
• 可以json嵌套json数据

var user = {
	"usercode" : 110,
	"username" : "张三",
	"sex" : true,
	"address" : {
		"city" : "北京",
		"street" : "大兴区",
		"zipcode" : "12212121",
	},
	"aihao" : ["smoke","drink","tt"]
};

// 访问人名以及居住的城市
alert(user.username + "居住在" + user.address.city);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码示列：
请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。

var jsonData = {
	"total" : 3,
	"students" : [
		{"name":"zhangsan","birth":"1980-10-20"},
		{"name":"lisi","birth":"1981-10-20"},
		{"name":"wangwu","birth":"1982-10-20"}
	]
};
1
2
3
4
5
6
7
8

记住格式符号不要错乱，特别是;

8.3 eval函数

通过eval赖连接前后端的函数
功能：将字符串当做一段JS代码解释并执行
例如：window.eval(“var i = 100;”);

主要在实战中

• java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
• java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象
• 可以使用eval函数,将json格式的字符串转换成json对象

var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
// 将以上的json格式的字符串转换成json对象
window.eval("var jsonObj = " + fromJava);
// 访问json对象
alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据
1
2
3
4
5

用java处理json发过来的字符串对象，\这是转义字符，将其转换成json的对象，在用对象调用属性
js中访问对象属性还可以用这种代码格式

// JS中访问json对象的属性
alert(json.username);

// JS中访问json对象的属性
alert(json["username"]);
1
2
3
4
5

8.4 设置table的tbody

将java中的数据展示到table中
表格页面的html格式如下

<input type="button" value="显示员工信息列表" id="displayBtn" />
<h2>员工信息列表h2>
<hr>
<table border="1px" width="50%">
	<tr>
		<th>员工编号th>
		<th>员工名字th>
		<th>员工薪资th>
	tr>
	<tbody id="emptbody">
		
	tbody>
table>
总共<span id="count">0span>条数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

本身tbody没有数据，通过点按钮，将json的数据显示到页面上
json的数据如下

// 有这些json数据
var data = {
	"total" : 4,
	"emps" : [
		{"empno":7369,"ename":"SMITH","sal":800.0},
		{"empno":7361,"ename":"SMITH2","sal":1800.0},
		{"empno":7360,"ename":"SMITH3","sal":2800.0},
		{"empno":7362,"ename":"SMITH4","sal":3800.0}
	]
};
1
2
3
4
5
6
7
8
9
10

通过点击按钮框实现的代码逻辑如下
每循环一次加一个html的页面以及json的数据
数据都加载到tbody中

document.getElementById("emptbody").innerHTML = html;
document.getElementById("count").innerHTML = data.total;
1
2

完整代码如图

// 希望把数据展示到table当中.
window.onload = function(){
	var displayBtnElt = document.getElementById("displayBtn");
	displayBtnElt.onclick = function(){
		var emps = data.emps;
		var html = "";
		for(var i = 0; i < emps.length; i++){
			var emp = emps[i];
			html += "";
			html += ""+emp.empno+"";
			html += ""+emp.ename+"";
			html += ""+emp.sal+"";
			html += "";
		}
		document.getElementById("emptbody").innerHTML = html;
		document.getElementById("count").innerHTML = data.total;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

8.5 面试题

在JS当中：[]和{}有什么区别

• [] 是数组
• {} 是JSON

java中的数组：int[] arr = {1,2,3,4,5};
JS中的数组：var arr = [1,2,3,4,5];
JSON：var jsonObj = {“email” : “zhangsan@123.com”,“age”:25};