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

JSON

`数据交换的格式`

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

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

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

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

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

<?xml version="1.0" encoding="gbk"?>
<students><student><name>zhangsan</name><age>20</age></student><student><name>lisi</name><age>21</age></student><student><name>wangwu</name><age>22</age></student>
</students>

`JSON对象的格式`

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

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

var jsonObj = {"属性名" : 属性值,"属性名" : 属性值,....
}

访问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)

设计一个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)
}

`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)

需求: 接收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">0</span>条<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;// 拿到学生数组,拼接HTMLvar studentArray = json.students;var html = "";for(var i = 0; i < studentArray.length; i++){var s = studentArray[i]html += "<tr>";html += "<td>"+(i+1)+"</td>";html += "<td>"+s.name+"</td>";html += "<td>"+s.age+"</td>";html += "</tr>";}// 将以上拼接的HTML设置到tbody当中document.getElementById("stutbody").innerHTML = html;}
}
</script>