一、什么是 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>