json

一、什么是json？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON是用字符串来表示Javascript对象，例如可以在Servlet中发送一个JSON格式的字符串给客户端Javascript，Javascript可以执行这个字符串，得到一个Javascript对象。

二、JSON对象语法

Json语法：

数据保存在键值对中。
数据由逗号分隔。
花括号保存对象。
方括号保存数组。

例如：

var person = { "name":"veeja", "age":18, "sex":"male"};

Json的值：

数字（整数或者浮点数）
字符串（在双引号中）
逻辑值（true或者false）
数组（在方括号中）
对象（在花括号中）
null

例如，我们做一个小小的演示：

var person = { 
    "name": "veeja",
    "age": 18,
    "sex": "male"
};
alert(person.name + "," + person.age + "," + person.sex);

输出的结果：
在这里插入图片描述
如果给出的json是一个字符串（注意，这里面的双引号都需要转义字符来转义），这个时候我们应该使用eval()函数执行一下这个字符串，来得到相应的json对象。例如：

var str = "{\"name\": \"veeja\",\"age\": 18,\"sex\": \"male\"}";
var person = eval("(" + str + ")");
alert(person.name + "," + person.age + "," + person.sex);

结果是一样的：
在这里插入图片描述
还可以存储数组，例如：

var person = { 
    "name": "veeja",
    "age": 18,
    "sex": "male",
    "hobby": ["cf", "sj", "ddm"]
};
alert(person.name + "," + person.age + "," + person.sex + "," + person.hobby);

输出结果：
在这里插入图片描述

三、案例

接下来我们做一个简单的小案例。

json与ajax结合的案例。
首先新建一个servlet，用来响应数据，也就是发送我们的json字符串。

public class AServlet extends HttpServlet { 
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException { 
        // 向客户端发送json串
        String string = "{\"name\": \"veeja\",\"age\": 18,\"sex\": \"male\"}";
        response.getWriter().print(string);
        System.out.println(string);
    }
}

我们再写一个jsp用来接收数据并显示出来。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>json2.jsp</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
        <script type="text/javascript"> // 创建异步对象 function createXMLHttpRequest() { try { return new XMLHttpRequest(); // 支持大多数浏览器 } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); // 支持IE6浏览器 } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); //支持IE5.5以及更早版本的浏览器 } catch (e) { alert("不支持您的浏览器！"); throw e; } } } } window.onload = function() { // 获取btn元素 var btn = document.getElementById("btn"); btn.onclick = function() { //给按钮的点击事件添加监听 /* ajax的四步操作，得到服务器的响应 把响应的结果显示到h1元素中 */ // 1.得到异步对象 var xmlHttp = createXMLHttpRequest(); // 2.打开与服务器的连接(指定请求方式，指定请求的URL，指定是否为异步请求) xmlHttp.open("GET", "<c:url value='/AServlet'/>", true); // 3. 发送请求 xmlHttp.send(null); // 4. 给异步对象的onreadystatechange事件注册监听器 xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发生改变的时候执行 //双重判断,xmlHttp的状态为4，以及服务器响应的状态码为200 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取服务器的响应内容,现在得到的是一个json字符串 var text = xmlHttp.responseText; // 执行json语句 var person = eval("(" + text + ")"); var s = person.name + "," + person.age + "," + person.sex; // 获取h3元素 var h3 = document.getElementById("h3"); h3.innerHTML = s; } }; }; }; </script>
    </head>
    <body>
        <!-- 点击按钮之后，把服务器响应的数据显示到h3中 -->
        <button id="btn">点击这里</button>
        <h1>json 之 Hello World</h1>
        <h3 id="h3"></h3>
    </body>
</html>