数据交换的常见格式,如JSON格式和XML格式

JSON

数据交换的格式

JSON的全称是JavaScript Object Notation(JavaScript标记对象), JSON的体积小是一种轻量级的数据交换格式

JSON和XML都是非常标准的数据交换格式

• XML是一种国际上通用的数据交换格式, 体积大解析难度大并且语法严格（一般和钱有关系的，严谨的系统都会采用XML进行数据交换）
• JSON是一种轻量级的数据交换格式, 体积小解析更容易并且语法相对松散

数据交换是指不同语言之间交换数据,

• 如C语言查询数据库之后,拼接了一个XML格式的字符串然后通过网络的方式传输,Java语言接收到这个字符串之后开始解析获取数据完成数据的交换

<students>
    <student>
        <name>zhangsanname>
        <age>20age>
    student>
    <student>
        <name>lisiname>
        <age>21age>
    student>
    <student>
        <name>wangwuname>
        <age>22age>
    student>
students>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JSON对象的格式

在JavaScript当中,JSON是一种无类型的对象,用{}包起来就是一个JSON对象,[]包起来的是数组对象

• JSON对象的属性名: 必须用引号括起来
• JSON对象的属性值: 可以是任意类型甚至可以是JSON对象,属性值是字符串类型需要用双引号括起来

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

访问JSON对象的属性,直接通过对象点.属性名方式或者对象["属性名"]的方式

var person = {
    // 属性名是一个字符串
    "name" : "zhangsan",
    // 属性值是一个boolean类型
    "sex" : false,
    // 属性值是一个数组
    "aihao" : ["抽烟","喝酒","烫头"]
}
console.log(person.name)
console.log(person["sex"] ? "男" : "女"),
var aihaos = person.aihao;
for(var i = 0; i < aihaos.length; i++){
    console.log(aihaos[i])
}
// JSON对象的属性值可以是JSON对象
var user = {
    "username" : "zhangsan",
    "password" : "123",
    "email" : "zhangsan@123.com",
    // 属性值是一个json对象
    "address" : {"city" : "深圳","street" : "宝安"}
}

// 访问zhangsan居住的城市
console.log(user.username + "居住在" + user.address.city)
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

设计一个JSON格式的数据可以表示全班人数和每个学生信息

// 属性值是字符串类型需要用双引号括起来
var students = {
    "total" : 3,
    // 属性值是个数组,数组中的每个元素是一个JSON对象
    "data" : [{"name":"陈赓", "age":20},{"name":"吴雨阳","age":21},{"name":"殷远庭", "age":23}]
};

// JSON很容易解析,一顿"点"就行
console.log(students.data[0].name)

// 访问以上的json对象,将总人数取出,将每个学生的信息取出
console.log("总人数：" + students.total)

// 访问每一个学生数据
var arr = students.data;
for(var i = 0; i < arr.length; i++){
    var s = arr[i];
    console.log("姓名：" + s.name + ",年龄：" + s.age)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Java和JavaScript数据交换

Java和JavaScript之间可以使用JSON格式的字符串完成数据的交换

• 在Java中使用JDBC连接数据库查询数据,然后将查询到的数据拼接成JSON格式的字符串，将JSON格式的字符串通过网络传输传给Javascript
• 在Javascript中把接收的JSON格式的字符串转换成JSON对象,这样就可以从JSON对象中取出对象的属性实现数据的交换

// eval函数的作用是将后面的字符串当做一段JS代码解释并执行
window.eval("var i = 0")
alert(i)

// 双引号当中的是Java传给我们浏览器的一个字符串不是Json对象,使用\进行转义
var fromJavaJSON = "{\"name\":\"zhangsan\", \"age\":20}";  

// 将Json格式的字符串转换成Json对象
window.eval("var stu = " + fromJavaJSON) 

// 上面代码执行结束之后,等同于执行以下代码创建了一个Json对象
var stu = {
	"name" : "zhangsan",
	"age" : 20
}; 

// 转换成Json对象的目的是为了取数据(这样Javascript和Java之间两个不同的编程语言就完成了数据的交换)
console.log(stu.name + "," + stu.age)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

需求: 接收Java传过来一个的JSON格式的字符串,通过拼接html的方式设置table中tbody的内容

<input type="button" value="查看学生信息列表" id="displaybtn" />

<table border="1px" width="40%">
    <tr>
        <th>序号th>
        <th>学生姓名th>
        <th>学生年龄th>
    tr>
    <tbody id="stutbody">
       
    tbody>
table>
总记录条数：<span id="totalSpan">0span>条

<script type="text/javascript">
	// json格式的字符串
    var fromJava = "{\"total\" : 2, \"students\" : [{\"name\":\"李四\",\"age\":19},{\"name\":\"王五\",\"age\":18}]}";
	window.onload = function(){
    document.getElementById("displaybtn").onclick = function(){
        // 将json格式的字符串转化json对象, 将json对象中的数据放到tbody当中
        window.eval("var json = " + fromJava) 
            // 设置总记录条数
            document.getElementById("totalSpan").innerHTML = json.total;
        // 拿到学生数组,拼接HTML
        var studentArray = json.students;
        var html = "";
        for(var i = 0; i < studentArray.length; i++){
            var s = studentArray[i]
            html += "";
            html += ""+(i+1)+"";
            html += ""+s.name+"";
            html += ""+s.age+"";
            html += "";
        }
        // 将以上拼接的HTML设置到tbody当中
        document.getElementById("stutbody").innerHTML = html;
    }
}
script>
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
31
32
33
34
35
36
37
38
39