Json:(一种存储和交换数据的语法)，结合ajax写案例

一.概念：

• 本质：本质就是字符串，json数据是用在语言（java，c#,js）里面使用的
• Json对象：意思是一组键值对的数据对象，在JavaScript当中就是JavaScript对象，java当中就是java的就是json对象
• Json数据写为 名称/值 对，名称由字段名称构成，后面跟冒号和值；一般的格式是：
  • name={"name1":"" ," name2"={"name2":"","name21":""}}
  • 名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号 {} 保存对象

    • {key1 : value1, key2 : value2, ... keyN : valueN }

  • 中括号 [] 保存数组，数组可以包含多个对象

    • [
          { key1 : value1-1 , key2:value1-2 }, 
          { key1 : value2-1 , key2:value2-2 }, 
          { key1 : value3-1 , key2:value3-2 }, 
          ...
          { keyN : valueN-1 , keyN:valueN-2 }, 
      ]
      

  •  json当中可以存在的类型：
    • 字符串
    • 数字
    • 对象（json对象）
    • 数组
    • 布尔
    • Null
  • json当中不可以存在的数据类型：
    • 函数
    • 日期
    • undefined
  • Json字符串
    • json当中的字符串必须要用双引号包围

  • 3.JSON的值:

    3.1 JSON的构成: ws 值 ws [1] 

    3.2值可以是对象、数组、数字、字符串或者三个字面值(false、null、true)中的一个。值中的字面值中的英文必须使用小写。

    3.2.1对象由花括号括起来的逗号分割的成员构成，成员是字符串键和上文所述的值由逗号分割的键值对组成，如：

    1	{"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}

    JSON中的对象可以包含多个键值对，并且有数组结构，该语言正是一次实现过程内容的描述。 [6] 

    3.2.2数组是由方括号括起来的一组值构成，如：

    1	[3, 1, 4, 1, 5, 9, 2, 6]

    3.2.3 字符串与C或者Java的字符串非常相似。字符串是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。

    3.2.4数字也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。 [2] 

    一些合法的JSON的实例：

    1	{"a": 1, "b": [1, 2, 3]}

    1	[1, 2, "3", {"a": 4}]

    1

    3.14

    1	"plain_text"

• json 是一种数据格式： 说对象标记法太官方了 ，其实就是一种键值对的数据格式
  json格式就是键值对：name=value，前面是键，后面是值
• 轻量级的意思是使用方面简单，没有什么复杂的其他功能，就是单单数据存储格式
• 自我表述我不知怎么说，但是易于理解的意思是这种数据拿出来，我们一看就知道是什么数据，能看得懂
• json独立于语言：json是数据格式，而也算是一串字符串，所以几乎所有语言都可以使用json数据
   

二.JS与Json相互转换

• 很多人搞不清楚 JSON 和 JS 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：

  JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

• 要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

• 要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

• 

• 因为让自己去写字符串拼接，很麻烦，所以导入依赖fastjson

•         <dependency>
              <groupId>com.alibaba</groupId>
              <artifactId>fastjson</artifactId>
              <version>1.2.47</version>
          </dependency>

三.user案例

• 
• 新建一个user类
• 
•      新建一个servlet并在web.xml里面配置好            

package com.pro.servlets;

import com.alibaba.fastjson.JSON;
import com.pro.domain.User;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置乱码，req和resp都写上
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        //
        String me = req.getParameter("me");
        if("check".equals(me)){
            check(req, resp);
        }else if("getUsers".equals(me)){
            getUsers(req,resp);
        }else if("addUser".equals(me)){
            addUser(req,resp);
        }
    }

    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws IOException {

        String userName = req.getParameter("userName");
        String password = req.getParameter("password");

        PrintWriter writer = resp.getWriter();
        writer.write("添加成功了，我使用了ajax！");
//        writer.write(userName);

        writer.flush();
        writer.close();
    }

    //获取到一个集合后，想让他去页面显示
    private void getUsers(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        List<User> userList = new ArrayList<User>();
        for (int i = 0; i < 10; i++) {
            userList.add(new User(i,"name"+i,"psaaword"+i));
        }

        //因为有个需求，需要将集合转换为js对象格式的json串，所以为了方便转换，导入fastjson依赖
        String jsonString = JSON.toJSONString(userList);
        //此时就拿到了json串，再建立管道，将数据响应到客户端
        PrintWriter writer = resp.getWriter();
        writer.write(jsonString);
        writer.flush();
        writer.close();

    }


    //将验证抽取成方法
    private void check(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String userName = req.getParameter("userName");
        //
        String msg = "用户已存在！";
        if (!"admin".equals(userName)){
         msg ="可以注册";
        }
        //由响应对象创建一个从服务器端到客户端的一个管道
        PrintWriter writer = resp.getWriter();
        writer.write(msg);
        //清空管道数据
        writer.flush();
        //关闭
        writer.close();
    }
}

• 新建一个html页面，使用来ajax发送请求，响应数据， 使用json格式来进行前后端数据交互
• 这里主要注意JS对象与JSON串的相互转换，还有显示数据时的字符串拼接（原生会比较麻烦），后面学jQuery就会简单。
• 每一个ajax请求都写了一个回调函数在它下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    //首先创建核心对象
    var xmlHttp;
    function creatXMLHttpRequest() {
        //表示如果你是IE浏览器
        if (window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else{//非IE浏览器
            xmlHttp = new XMLHttpRequest();
        }

    }

    //get请求，查验用户名是否重复
    function f() {
        //调用上面的方法创建一个核心对象
        creatXMLHttpRequest();
        var userName = document.getElementById("userName").value;
        var url = "userServlet?me=check&userName="+userName;
        xmlHttp.open("get",url,true);//使用get方式和URL地址建立连接，目的是为了把请求的数据发送过去
        //当readystate的值发生改变时，会调用xx函数，这个xx虽然没有括号，但他也是一个函数，是一个指针
        //第一次经过xmlHttp.onreadystatechange=xx;只是去指定回调函数，并不会把回调函数执行完，
        // 而是去执行完发送请求，当状态码发生改变时，才会去执行之前指定的回调函数
        xmlHttp.onreadystatechange=xx;
        //用这个方法来发送请求数据
        xmlHttp.send();
    }

    //核心对象的readyState发生变化，就会触发这个响应函数
    //查验用户名的回调函数
    function xx() {
        //必须状态信息readyState=4且状态码status=200才能获取到数据（谁来获取呢，是获取请求的数据还是响应的数据--->获取到响应的数据）
        if (xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                var result = xmlHttp.responseText;
                document.getElementById("info").innerHTML = result;
            }
        }
    }


    //单击页面上查看用户列表时，调用一个servlet得到一个user集合转为一个json串
    function displayUser() {
        //发送一个ajax请求
        //调用上面的方法创建一个核心对象
        creatXMLHttpRequest();
        var url = "userServlet?me=getUsers";
        xmlHttp.open("get",url,true);//使用get方式和URL地址建立连接，目的是为了把请求的数据发送过去
        //当readystate的值发生改变时，会调用xx函数，这个xx虽然没有括号，但他也是一个函数，是一个指针
        //第一次经过xmlHttp.onreadystatechange=xx;只是去指定回调函数，并不会把回调函数执行完，
        // 而是去执行完发送请求，当状态码发生改变时，才会去执行之前指定的回调函数
        xmlHttp.onreadystatechange=userList;
        //用这个方法来发送请求数据
        xmlHttp.send();
    }

    //建立一个回调函数，将获取到的json串转换成一个js对象，拼接一个表格在div中显示
    function userList() {
        //必须状态信息readyState=4且状态码status=200才能获取到数据（谁来获取呢，是获取请求的数据还是响应的数据--->获取到响应的数据）
        if (xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                //取得服务端返回的json串
                var users = xmlHttp.responseText;
                //到这已经拿到了json串，因此要转成JS对象
                users = JSON.parse(users);
                // alert(users);
                //将获取的user对象拼接成一张表来显示
                var mytb = '<table border="1px" width="500" align="center">';
                for (var i = 0; i <users.length; i++) {
                    mytb+='<tr style="text-align: center"><td>'+users[i].userId+'</td><td>'+users[i].username+'</td><td>'+users[i].password+'</td><td><a href="#" onclick="del_('+users[i].userId+');return false">删除</a></td></tr>'
                }
                mytb+='</table>';
                //将拼接好的表格显示到指定的div当中，或者说是设置users div块的内容为上面拼接的表mytb;
                document.getElementById("users").innerHTML=mytb;
            }
        }
    }
    //删除，这个函数只是上面生成的删除按钮的测试
    function del_(v) {
        alert(v);
    }

    //post方式请求与get方式提交不一样，传参不能直接在servlet后面用？来传
    //添加用户的函数，ajax post提交用户名，密码以及调用servlet中的方法的参数的
    function sendPost() {
        //调用上面的方法创建一个核心对象
        creatXMLHttpRequest();
        var url = "userServlet";

        var userName = document.getElementById("userName").value;
        var password = document.getElementById("password").value;
        var me = document.getElementById("me").value;

        //数据不能以对象的形式传过去，所以要拼接
        // var user = {userName:userName,password:password,me:me};
        // var user = {"userName":userName,"password":password,"me":me};
        var data = "userName="+userName+"&password="+password+"&me="+me;
        xmlHttp.open("post",url,true);

        //对象状态得放到open后面,因为只有连接后，才能设置头信息，以前不用ajax时，头信息默认就有，所以不用写，但是这里必须写
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        xmlHttp.onreadystatechange=addres;
        //用这个方法来发送请求数据
        //以对象的形式不行，所以用拼接的
        // xmlHttp.send(user);
        xmlHttp.send(data);
    }

    function addres() {
        //必须状态信息readyState=4且状态码status=200才能获取到数据（谁来获取呢，是获取请求的数据还是响应的数据--->获取到响应的数据）
        if (xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                var result = xmlHttp.responseText;
                alert(result);
            }
        }
    }

</script>
<!--
    需要局部刷新，首先就应该想到核心对象XMLHttpRequest
-->
<body>
<!--<input type="text" name="userName" id="userName" onblur="f();"><span id="info"></span>-->
<hr>
<select name="" id="">
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="ccc">ccc</option>
</select>
<hr>
<a href="#"onclick="displayUser();return false;">查看用户列表</a>
<div id="users">
</div>


<!--用户添加的表单，其实不写也可以，因为根本没用到-->
<form action="">
    <input type="text" name="userName" id="userName"><span id="info"></span>
    <input type="text" name="password" id="password">
    <input type="text" name="me" value="addUser" id="me">
</form>
<input type="button" value="提交" onclick="sendPost()">
</body>
</html>