JSON
1.json是什么
它是js提供的一种数据交换格式
2.json语法
{}：是对象
属性名必须使用双引号括起来，单引号不行
json值：
null ,数字，字符串，布尔型，数组[]
3.应用json
var person = {"name":"zhangsan","age":18,"sec":"male"};<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json</title>
<script type="text/javascript">
window.onload = function() {
var person = {"name":"zhangsan","age":18,"sex":"male"};
alert(person.name + "," + person.age + "," + person.sex);
};
</script>
</head>
<body>
</body>
</html><%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json</title>
<script type="text/javascript">
window.onload = function() {
var str = "{\"name\":\"zhangsan\",\"age\":18,\"sex\":\"male\"}";
var person = eval("("+str+")");
alert(person.name + "," + person.age + "," + person.sex);
};
</script>
</head>
<body>
</body>
</html><%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json</title>
<script type="text/javascript">
window.onload = function() {
var str = "1+2";
var sum = eval("("+str+")");
alert(sum);
};
</script>
</head>
<body>
</body>
</html>4.一个Json 案例
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest() ;
} catch (e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("你用的浏览器我实在没办法搞");
throw e;
}
}
}
}
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() { //给按钮的点击事件添加监听
//使用ajax得到服务器响应
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET","/test1/YServlet",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应结果
var text = xmlHttp.responseText;
var person = eval("("+text+")");
var s = person.name + " , " + person.age + ", "+ person.sex;
document.getElementById("h3").innerHTML = s;
}
};
}
}
</script>
</head>
<body>
<%--点击按钮之后，把服务器响应的数据显示到h3元素中 --%>
<button id = "btn">点击这里</button>
<h1>JSON之Hello World</h1>
<h3 id = "h3"> </h3>
</body>
</html>4.json与xml比较
可读性：xml胜出
解析难度：json本身就是js对象，所以json简单
流行度：xml已经流行很多年，但是在Ajax领域，json更受欢迎
