javaweb学习笔记day14---JSON、AJAX

JSON介绍

概述

JSON(Javascript Object Notation) 是一种轻量级的数据交换格式。是ECMAscript的一个子集。

语法
一个对象

{
    "pId":1,
    "pName":"湖北省"
}

多个对象

[
    {
        "pId":1,
        "pName":"湖北省",
        "isCenter":false
    },
    {
        "pId":2,
        "pName":"湖南省",
        "isCenter":false
    },
    {
        "pId":3,
        "pName":"北京市",
        "isCenter":true
    }
    
]

JSON格式化网址
- JSON在线解析及格式化验证 - JSON.cn
注意事项
- json中没有注释。

Jackson的使用

概述
- 是一个用于操作json的类库。
作用
- ①将java对象转换为json字符串
  - writevalueAsString
- ②将json字符串转换为java对象
  - readValue
①将java对象转换为json字符串

public class Demo01 {


    public static void main(String[] args) throws JsonProcessingException {
        //1.1，将一个对象转换为json字符串
        Province province1 = new Province(1, "湖北省", false);
        String jsonStr1 = new ObjectMapper().writevalueAsString(province1);
        System.out.println("jsonStr1 = " + jsonStr1);
        //1.2,将list转换为json字符串
        List provinceList = new ArrayList<>();
        provinceList.add(province1);
        Province province2 = new Province(2, "湖南省", false);
        provinceList.add(province2);
        Province province3 = new Province(3, "北京市", true);
        provinceList.add(province3);
        String jsonStr2 = new ObjectMapper().writevalueAsString(provinceList);
        System.out.println("jsonStr2 = " + jsonStr2);
        //1.3,将map转换为json字符串 , {"flag":true,"msg":"查询省份列表成功!",data:集合}
        Map map = new HashMap<>();
        map.put("flag", true);
        map.put("msg", "查询省份列表成功!");
        map.put("data", provinceList);
        String jsonStr3 = new ObjectMapper().writevalueAsString(map);
        System.out.println("jsonStr3 = " + jsonStr3);
        //1.3,将ResultVO转换为json字符串 , {"flag":true,"msg":"查询省份列表成功!",data:集合}
        ResultVO> resultVO = new ResultVO<>(
                true,
                "查询省份列表成功!",
                provinceList
        );
        String jsonStr4 = new ObjectMapper().writevalueAsString(resultVO);
        System.out.println("jsonStr4 = " + jsonStr4);


    }


}

②将json字符串转换为java对象

public class Demo02 {


    public static void main(String[] args) throws IOException {
        //2.1，将json字符串转换为java对象
        String jsonStr1 = "{"provinceId":1,"provinceName":"湖北省","capital":false}";
        Province province = new ObjectMapper().readValue(jsonStr1, Province.class);
        System.out.println("province = " + province);

        //2.2，将json字符串转换为list
        String jsonStr2 = "[{"provinceId":1,"provinceName":"湖北省","capital":false},{"provinceId":2,"provinceName":"湖南省","capital":false},{"provinceId":3,"provinceName":"北京市","capital":true}]n";
        List provinceList = new ObjectMapper().readValue(jsonStr2, List.class);
        System.out.println("provinceList = " + provinceList);

        //2.3，将json字符串转换为map
        String jsonStr3 = "{"msg":"查询省份列表成功!","flag":true,"data":[{"provinceId":1,"provinceName":"湖北省","capital":false},{"provinceId":2,"provinceName":"湖南省","capital":false},{"provinceId":3,"provinceName":"北京市","capital":true}]}";
        Map map = new ObjectMapper().readValue(jsonStr3, Map.class);
        System.out.println("map = " + map);

        //2.4，将json字符串转换为ResultVO
        String jsonStr4 = "{"msg":"查询省份列表成功!","flag":true,"data":[{"provinceId":1,"provinceName":"湖北省","capital":false},{"provinceId":2,"provinceName":"湖南省","capital":false},{"provinceId":3,"provinceName":"北京市","capital":true}]}";

        ResultVO resultVO = new ObjectMapper().readValue(jsonStr4, ResultVO.class);
        System.out.println("resultVO = " + resultVO);
    }




}

JSONUtils工具类

代码实现

public class JSonUtils {


    
    public static String javaBean2JsonStr(Object object) throws JsonProcessingException {
        return new ObjectMapper().writevalueAsString(object);
    }


    
    public static  T jsonStr2Javabean(String jsonStr, Class clazz) throws IOException {
        return new ObjectMapper().readValue(jsonStr, clazz);
    }


}

AJAX概述

概述
- AJAX即“Asynchronous Javascript And XML” ：异步的Javascript和XML。
作用
- ①发起异步请求
- ②局部刷新页面
①发起异步请求
②局部刷新页面
- 通过异步请求达到页面的局部刷新效果，从而提高程序执行的效率

XMLHttpRequest详细介绍

概述
- ajax异步请求对象

创建对象

XMLHttpRequest xhr = new XMLHttpRequest();

常用属性
- onreadystatechange
  - 设置监听XMLHttpRequest对象状态改变
- readyState : XMLHttpRequest对象状态
  - 0 : XMLHttpRequest对象还没有完成初始化
  - 1 : XMLHttpRequest对象开始发送请求
  - 2 : XMLHttpRequest对象发送请求完成
  - 3 : XMLHttpRequest对象开始读取响应
  - 4 : XMLHttpRequest对象读取响应完成
- status
  - 服务器的响应状态码
- responseText
  - 服务器的响应正文
常用方法
- open(请求方式,请求路径,flag)
  - 请求方式：get/post
  - 请求路径：请求资源的路径
  - flag : true：异步请求，false：同步请求
- send(请求参数)
  - 请求参数：如果是get请求直接拼接到请求路径，如果是post请求写到send方法
- setRequestHeader(请求头)
  - 设置请求头

AJAX的使用

开发步骤
- ①创建XMLHttpRequest对象
- ②设置监听XMLHttpRequest对象状态改变
- ③打开连接
- ④发送参数
代码实现




    
    AJAX的使用

@WebServlet("/demo01")
public class Demo01Servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        ResultVO resultVO = null;
        if ("root".equals(username) || "oldqiu".equals(username)) {
            //账户已存在
            resultVO = new ResultVO(false, "账户已经存在!", null);
        } else {
            //账户不存在
            resultVO = new ResultVO(true, "账户可以使用!", null);
        }

        //将resultVO转换为json字符串
        String jsonStr = JSONUtils.javaBean2JsonStr(resultVO);
        //将jsonStr作为响应正文返回给浏览器
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write(jsonStr);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

Axios介绍

概述
- 使用原生的Javascript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。
官网
- [axios中文文档|axios中文网 | axios (axios-js.com)](

axios发送普通参数

概述
- 请求参数拼接到url后面。
代码实现




    
    axios发送普通参数

axios发送请求正文

概述
- 请求参数在请求正文。
代码实现




    
    axios发送请求头json

@WebServlet("/demo03")
public class Demo03Servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //考虑使用请求正文，数据量可能比较大，所以，使用流的方式来读取。
        //获取的应该是一个和HttpServletRequest对象相关的输入流，用来读取HttpServletRequest对象中的请求正文（json字符串）
        BufferedReader bufferedReader = req.getReader();
        String content = null;
        StringBuilder sb = new StringBuilder();
        while ((content = bufferedReader.readLine()) != null) {
            sb.append(content);
        }
        String inputJsonStr = sb.toString();
        System.out.println("jsonStr = " + inputJsonStr);
        Map map = JSONUtils.jsonStr2Javabean(inputJsonStr, Map.class);
        String username = (String) map.get("username");
        ResultVO resultVO = null;
        if ("root".equals(username) || "oldqiu".equals(username)) {
            //账户已存在
            resultVO = new ResultVO(false, "账户已经存在!", null);
        } else {
            //账户不存在
            resultVO = new ResultVO(true, "账户可以使用!", null);
        }

        //将resultVO转换为json字符串
        String jsonStr = JSONUtils.javaBean2JsonStr(resultVO);
        //将jsonStr作为响应正文返回给浏览器
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write(jsonStr);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

JSONUtills工具类优化

现有JSonUtils
- ①将java对象转换为json字符串
- ②将json字符串转换为java对象
未来JSonUtils
- ①将java对象转换为json字符串
- ②将json字符串转换为java对象
- ③获取请求正文json，再将json字符串转换为java对象
- ④将java对象转换为json字符串，再将json字符串作为响应正文返回给浏览器
代码实现

public class JSonUtils {


    
    public static String javaBean2JsonStr(Object object) throws JsonProcessingException {
        return new ObjectMapper().writevalueAsString(object);
    }


    
    public static  T jsonStr2Javabean(String jsonStr, Class clazz) throws IOException {
        return new ObjectMapper().readValue(jsonStr, clazz);
    }


    
    public static  T readRequest2Javabean(HttpServletRequest request, Class clazz) throws Exception {
        //1.1，获取请求正文json
        BufferedReader bufferedReader = request.getReader();
        String content = null;
        StringBuilder sb = new StringBuilder();
        while ((content = bufferedReader.readLine()) != null) {
            sb.append(content);
        }
        String inputJsonStr = sb.toString();
        //1.2,将json字符串转换为java对象
        T t = JSONUtils.jsonStr2Javabean(inputJsonStr, clazz);
        return t;
    }


    
    public static void writeJavabean2ResponseText(HttpServletResponse response, Object obj) throws IOException {
        String jsonStr = JSONUtils.javaBean2JsonStr(obj);
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(jsonStr);
    }


}

@WebServlet("/demo04")
public class Demo04Servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.1，获取请求正文json
        try {
            Map map = JSONUtils.readRequest2Javabean(req, Map.class);

            //业务处理
            String username = (String) map.get("username");
            ResultVO resultVO = null;
            if ("root".equals(username) || "oldqiu".equals(username)) {
                resultVO = new ResultVO(false, "账户已经存在!", null);
            } else {
                resultVO = new ResultVO(true, "账户可以使用!", null);
            }

            JSONUtils.writeJavabean2ResponseText(resp, resultVO);

        } catch (Exception e) {
            e.printStackTrace();
        }


    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

axios练习

需求
- 输入框输入员工编号，后台根据相应员工编号以json字符串形式返回响应员工信息给浏览器
代码实现




    
    axios练习



员工编号：

        

查询结果如下：

    查无此人！
    
        编号：

        姓名：

        年龄：

        薪资：

package com.atguigu.controll; 

import com.atguigu.pojo.Employee;
import com.atguigu.pojo.ResultVo;
import com.atguigu.util.JSONUtils;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet( "/demo05")
public class Demo05Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");
        Employee employee=null;
        ResultVo resultVo=null;
        if (id.equals("1")||id.equals("2")||id.equals("3")){
        employee=new Employee(Integer.parseInt(id),
                "张三"+id,
                18+Integer.parseInt(id),
                20000.0+Integer.parseInt(id)*1000);
            resultVo = new ResultVo(true,"查询员工成功！",employee);
        }else {
            //查无此人
            resultVo = new ResultVo(false,"没有该员工！",employee);

        }
        JSONUtils.writeJavabean2ResponseText(response,resultVo);
    }

    @Override
    protected long getLastModified(HttpServletRequest req) {
        return super.getLastModified(req);
    }

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

package com.atguigu.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;


@NoArgsConstructor
@AllArgsConstructor
@Data
public class Employee {
    private Integer employeeId;
    private String employeeName;
    private Integer age;
    private Double salary;
}

javaweb学习笔记day14---JSON、AJAX

Java相关栏目本月热门文章