Json简介

1. Json引入

JSON：JavaScript对象表示法（JavaScriptObjectNotation）。
JSON是存储和交换文本信息的语法。类似XML。
JSON比XML更小、更快，更易解析。

2. Json格式语法

JSON对象
{"name":"张三","age":22}

JSON数组
{
    "student":[
        {"name":"张三","age":22},
        {"name":"李四","age":23},
        {"name":"王五","age":24}
    ]
}

JSON嵌套
{
    "student":[
        {"name":"张三","age":22,"score":{"chinese":90,"math":100,"english":80}},
        {"name":"李四","age":23,"score":{"chinese":70,"math":90,"english":90}},
        {"name":"王五","age":24,"score":{"chinese":80,"math":60,"english":90}}
    ]
}
把Json串换成Json对象
vardataObj = eval("("+data+")"); // 转换为json对象

3. Json第三方jar包引入

Json-lib

4. Ajax&Json交互

导入jar包

commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-lang-2.4.jar
commons-logging-1.0.4.jar
ezmorph-1.0.3.jar
json-lib-2.2.3-jdk15.jar

GetAjaxInfoServlet.java

package com.andrew.web;

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;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetAjaxInfoServlet extends HttpServlet{

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String action=request.getParameter("action");
        if("jsonObject".equals(action)){
            this.getJsonObject(request, response);
        }else if("jsonArray".equals(action)){
            this.getJsonArray(request, response);
        }else if("jsonNested".equals(action)){
            this.getJsonNested(request, response);
        }
        
    }
    
    private void getJsonObject(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        // String resultJson="{\"name\":\"张三\",\"age\":22}";
        JSONObject resultJson=new JSONObject();
        resultJson.put("name", "张三");
        resultJson.put("age", 22);
        out.println(resultJson);
        out.flush();
        out.close();
    }
    
    private void getJsonArray(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        JSONObject resultJson=new JSONObject();
        JSONArray jsonArray=new JSONArray();
        JSONObject jsonObject1=new JSONObject();
        jsonObject1.put("name", "张三");
        jsonObject1.put("age", 22);
        JSONObject jsonObject2=new JSONObject();
        jsonObject2.put("name", "李四");
        jsonObject2.put("age", 23);
        JSONObject jsonObject3=new JSONObject();
        jsonObject3.put("name", "王五");
        jsonObject3.put("age", 24);
        jsonArray.add(jsonObject1);
        jsonArray.add(jsonObject2);
        jsonArray.add(jsonObject3);
        
        resultJson.put("students", jsonArray);
        out.println(resultJson);
        out.flush();
        out.close();
    }
    
    private void getJsonNested(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        JSONObject resultJson=new JSONObject();
        JSONArray jsonArray=new JSONArray();
        JSONObject jsonObject1=new JSONObject();
        jsonObject1.put("name", "张三");
        jsonObject1.put("age", 22);
        
        JSONObject scoreObject1=new JSONObject();
        scoreObject1.put("chinese", 90);
        scoreObject1.put("math", 100);
        scoreObject1.put("english", 80);
        jsonObject1.put("score", scoreObject1);
        
        JSONObject jsonObject2=new JSONObject();
        jsonObject2.put("name", "李四");
        jsonObject2.put("age", 23);
        
        JSONObject scoreObject2=new JSONObject();
        scoreObject2.put("chinese", 70);
        scoreObject2.put("math", 90);
        scoreObject2.put("english", 90);
        jsonObject2.put("score", scoreObject2);
        
        JSONObject jsonObject3=new JSONObject();
        jsonObject3.put("name", "王五");
        jsonObject3.put("age", 24);
        
        JSONObject scoreObject3=new JSONObject();
        scoreObject3.put("chinese", 80);
        scoreObject3.put("math", 60);
        scoreObject3.put("english", 90);
        jsonObject3.put("score", scoreObject3);
        
        jsonArray.add(jsonObject1);
        jsonArray.add(jsonObject2);
        jsonArray.add(jsonObject3);
        
        resultJson.put("students", jsonArray);
        out.println(resultJson);
        out.flush();
        out.close();
    }
}

web.xml

<servlet>
      <servlet-name>getAjaxInfoServlet</servlet-name>
      <servlet-class>com.andrew.web.GetAjaxInfoServlet</servlet-class>
</servlet>
<servlet-mapping>
      <servlet-name>getAjaxInfoServlet</servlet-name>
      <url-pattern>/getAjaxInfo</url-pattern>
</servlet-mapping>

ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function loadInfo(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange = function(){
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                alert(dataObj.name);
                alert(dataObj.age);
                document.getElementById("name").value=dataObj.name;
                document.getElementById("age").value=dataObj.age;
            }
        };
        xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true);
        xmlHttp.send();
    }
    
    function loadInfo2(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                var st=document.getElementById("studentTable");
                alert(dataObj.students.length);
                var newTr; // 行
                var newTd0; // 第一列
                var newTd1; // 第二列
                var newTd2; // 第三列
                for(var i=0;i<dataObj.students.length;i++){
                    var student=dataObj.students[i];
                    newTr=st.insertRow();
                    newTd0=newTr.insertCell();
                    newTd1=newTr.insertCell();
                    newTd2=newTr.insertCell();
                    newTd0.innerHTML=student.name;
                    newTd1.innerHTML=student.age;
                    newTd2.innerHTML="语文:"+student.score.chinese+",数学:"+student.score.math+",英语:"+student.score.english;
                }
            }
        };
        // xmlHttp.open("get", "getAjaxInfo?action=jsonArray", true);
        xmlHttp.open("get", "getAjaxInfo?action=jsonNested", true);
        xmlHttp.send();
    }
</script>
</head>
<body>
<div style="text-align: center;">
    <div><input type="button" onclick="loadInfo()" value="Ajax获取信息"/>&nbsp;&nbsp;姓名：<input type="text" id="name" name="name" />&nbsp;&nbsp;年龄：<input type="text" id="age" name="age" /></div>
    <div style="margin-top: 20px;">
        <input type="button" onclick="loadInfo2()" value="Ajax获取信息2"><br/>
        <table id="studentTable" align="center" border="1px;" cellpadding="0px;">
            <tr>
                <th>姓名</th><th>年龄</th><th>得分</th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

http://localhost:8080/HeadFirstAjaxJsonChap03/ajax.jsp
获取Ajax信息
张三
22
获取Ajax信息2
张三    22    语文:90,数学:100,英语:80
李四    23    语文:70,数学:90,英语:90
王五    24    语文:80,数学:60,英语:90