一、什么是 JSON ？
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言。JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言
- JSON 具有自我描述性，更易理解
二、JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的eval( ) 函数，用 JSON 数据来生成原生的 JavaScript 对象。
转换的时候注意，eval 函数要以（ 开头，）结尾。
三、为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML
- 读取 XML 文档
- 使用 XML DOM 来循环遍历文档
- 读取值并存储在变量中
使用 JSON
- 读取 JSON 字符串
- 用 eval() 处理 JSON 字符串
四、JSON语法
JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号{ } 保存对象
- 方括号[ ] 保存数组
JSON 对象(名称/值对)
JSON 数据的书写格式是：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值。
JSON 对象在花括号中书写。
对象可以包含多个名称/值对。
JSON 对象创建：
var person = {"name": "yangTengYu", "age": 26, "sex" : "male"};name = "yangtengyu" ...
JSON对象案例
json1.jsp :
<script type="text/javascript">
window.onload = function() {
var person = {"name": "yangTengYu", "age": 26, "sex" : "male"};
alert(person.name + "," + person.age + "," + person.sex);
}
</script>
</head>
<body>
<h1>json的应用</h1>
</body>
</html>JSON 值
JSON 值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中 [ ] ）
- 对象（在花括号中 { } ）
- null
JSON 数组
JSON 数组在方括号中书写。
数组可包含多个对象：
JSON数组案例
json3.jsp :
<script type="text/javascript">
var heros =
[
{"name":"盖伦", "hp":616},
{"name":"赵信", "hp":617},
{"name":"劫", "hp":618},
{"name":"鳄鱼", "hp":619}
]
document.write("JSON数组大小为" + heros.length + "<hr>");
document.write("第3个英雄是：" + heros[2].name + "<br>");
</script>
</head>五、字符串与JSON的相互转换
字符串转为JSON对象
由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：
var obj = eval ("(" + txt + ")");字符串转为JSON对象案例
json4.jsp :
<script type="text/javascript">
var s1 = "{\"name\":\"火女\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
var huonv = eval("(" + s3 + ")");
document.write("这是一个JSON对象的值:" + huonv.hp);
</script>
</head>JSON 对象转换为字符串
json 对象因为是一个javascript对象，所以如果直接打印的话，看不到里面的内容。
有时候要看看这个对象是不是我们期望的，所以需要通过 JSON.stringify 函数把它转换为 字符串。
json6.jsp :
<script type="text/javascript">
var hero = {"name":"盖伦", "level":"16"};
document.write("这是一个json对象的值:" + hero.level + "<hr>");
var heroString = JSON.stringify(hero);
document.write("这是一个JSON字符串：" + heroString);
</script>
</head>六、AJAX与JSON联合使用
AServlet.java :
package waf.yty.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 向客户端发送json串
String str = "{\"name\":\"Fingercroxx\", \"age\":18, \"sex\":\"nanren\"}";
response.getWriter().print(str);
System.out.println(str);
}
}json2.jsp :
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "${pageContext.request.contextPath}/AServlet", true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var text = xmlhttp.responseText; //返回一个JSON串
var person = eval("(" + text + ")");
document.getElementById("h2").innerHTML
= person.name + "," + person.age + "," + person.sex
}
}
}
}
</script>
</head>
<body>
<button id="btn">猛击这里</button>
<h1>JSON之JSON2</h1>
<h2 id="h2"></h2>
</body>
</html>
