【Filter】【JSON】【AJAX】【学习笔记】javaweb寒假学习之旅FINAL-CSDN博客

本文链接：https://blog.csdn.net/flzjcsg3/article/details/123435761

不知不觉，我赖来赖去的javaweb寒假系列马上就要结束了，😭😭😭😭😭，我承认，这个系列都是摆的内容，根本学不到什么东西，还要动不动看👴发各种单调的emoj，还没有没皮用的效图，各种🤗🤗🤗🤗,但这一切的一切都成为了美好的回忆-----新学期开始了，加油开摆🤗🤗🤗🤗

文章目录

Filter
尚硅谷书城项目第八阶段
JSON
AJAX

Filter

1、Filter 过滤器它是JavaWeb的三大组件之一。三大组件分别是: Servlet 程序、Listener 监听器、Filter 过滤器
2、Filter 过滤器它是JavaEE的规范。也就是接口
3、Filter 过滤器它的作用是: 拦截请求，过滤响应。

拦截请求常见的应用场景有:
1、权限检查
2、日记操作
3、事务管理

1、Filter初入

工作原理

在这里插入图片描述

实现

在这里插入图片描述

为了方便测试，我们在src/main/webapp/admin下创建3个文件a.html、a.jsp 、acP.jpg ,再写一个Filter，判断，如果没有账号登入，就不能访问admin文件夹下的这三个资源，并跳转到登入界面。

src/main/java/com/flzj/filter/AdminFilter.java ，实现Filter接口，下面init()方法和destory()方法，自动生成的代码，会让服务器启动失败😭 （评论区：生成filter文件时候。会自动把声明周期的方法全生成的，过滤器的生命周期里面的init和destroy方法都要删掉方法里面的代码，不然显示服务器报错启动不了）

public class AdminFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        //Filter.super.init(filterConfig);  这个自动生成的代码，会导致服务器启动就失败
    }

    /***
     * doFilter方法，专门用于拦截请求。可以做权限检查
     * @param servletRequest
     * @param servletResponse
     * @param filterChain
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
        HttpSession session = httpServletRequest.getSession();
        Object user = session.getAttribute("user");
        // 如果user等于null,说明还没有登入
        if(user == null){
            servletRequest.getRequestDispatcher("/login.jsp").forward(servletRequest,servletResponse);
            return;
        }else{
            // 让程序继续往下访问
            filterChain.doFilter(servletRequest,servletResponse);
        }
    }

    @Override
    public void destroy() {
    //    Filter.super.destroy(); 这个自动生成的代码，会导致服务器启动就失败
    }
}

到web.xml下配置刚刚我们写的filter

<!-- filter标签用于配置一个Filter过滤器   -->
<filter>
    <!-- 给filter起一个别名 -->
    <filter-name>AdminFilter</filter-name>
    <!-- 配置filter的全类名 -->
    <filter-class>com.flzj.filter.AdminFilter</filter-class>
</filter>
<!-- filter-mapping配置Filter过滤器的拦截路径 -->
<filter-mapping>
    <!-- filter-name表示当前的拦截路径给哪个filter使用 -->
    <filter-name>AdminFilter</filter-name>
    <!-- url-pattern配置拦截路径
            / 表示请求地址为: http://ip:port/工程路径/ 映射到IDEA的webapp路径
            /admin/* 表示请求地址为:   http://ip:port/工程路径/admin/*
          -->
    <url-pattern>/admin/*</url-pattern>
</filter-mapping>

效果图

在这里插入图片描述

2、完善用户登入权限检查

在这里插入图片描述

这里我们演示，第一故意登入失败，看看能不能访问admin下的文件，第二次才是登入成功，访问

完善login.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入界面</title>
</head>
<body>
    这里是登入界面<br/>
    <form action="http://localhost:8080/Filter_Test/loginServlet" method="get">
        用户名: <input type="text" name="username"/> <br/>
        密码: <input type="password" name="pwd"> <br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

完成LoginServlet

public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        /**
         *  这里我们登入账号密码写死
         *  账号 admin
         *  密码 admin
         */
        String username = req.getParameter("username");
        String password =req.getParameter("pwd");
        if("admin".equals(username) && "admin".equals(password)) {
            // 登入成功
            req.getSession().setAttribute("user",username);
            resp.getWriter().write("登入成功!!!");

        }else{
            req.getRequestDispatcher("/login.jsp").forward(req,resp);
        }
    }
}

<servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.flzj.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/loginServlet</url-pattern>
</servlet-mapping>

3、Filter的生命周期

1、构造器方法
2、init 初始化方法
第1，2步，在web工程启动的时候执行( Filter已经创建)

在这里插入图片描述

3、doFilte 过滤方法
第3步，每次拦截到请求，就会执行

在这里插入图片描述

4、destroy销毁
第4步，停止web工程的时候，就会执行(停正web工程，也会销毁Filter过滤器)

在这里插入图片描述

测试代码

    public AdminFilter(){
        System.out.println("1、Filter的构造器方法执行了");
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("2、Filter的init方法执行了");
        
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("3、Filter的doFilter方法执行了");
		...
    }

    @Override
    public void destroy() {
        System.out.println("4、Filter的destroy方法执行了");
    }

4、FilterConfig 类

FilterConfig类见名知义，它是Filter过滤器的配置文件类。
Tomcat每次创建Filter的时候，也会同时创建一个 FilterConfig类，这里包含了Filter 配置文件的配置信息。
FilterConfig类的作用是获取filter过滤器的配置内容

1、获取Filter的名称filter-name 的内容

2、获取在Filter中配置的init- param初始化参数

3、获取ServletContext对象

在这里插入图片描述

所用代码

@Override
public void init(FilterConfig filterConfig) throws ServletException {
    System.out.println("2、Filter的init方法执行了");
    //        1、获取Filter的名称filter-name的内容
    System.out.println("filter-name是:" + filterConfig.getFilterName());
    //        2、获取在Filter中配置的init-param初始化参数
    System.out.println("username是 :" + filterConfig.getInitParameter("username"));
    System.out.println("url是:" + filterConfig.getInitParameter("url"));
    //        3、获取ServletContext对象
    System.out.println(filterConfig.getServletContext());
}

<filter>
    <filter-name>AdminFilter</filter-name>
    <filter-class>com.flzj.filter.AdminFilter</filter-class>
    <init-param>
        <param-name>username</param-name>
        <param-value>root</param-value>
    </init-param>
    <init-param>
        <param-name>url</param-name>
        <param-value>jdbc:mysql://localhost3306/test</param-value>
    </init-param>
</filter>

5、FilterChain多个过滤器

图解

在这里插入图片描述

代码实现

在这里插入图片描述

首先，我们要写两个Filter，并配置好，让后我们访问webapp下的target.jsp ,看看效果

public class Filter1 implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("前置代码1");
        filterChain.doFilter(servletRequest,servletResponse);
        System.out.println("后置代码1");
    }
    @Override
    public void destroy() {

    }
}

<filter>
    <filter-name>Filter1</filter-name>
    <filter-class>com.flzj.filter.Filter1</filter-class>
</filter>
<filter-mapping>
    <filter-name>Filter1</filter-name>
    <url-pattern>/target.jsp</url-pattern>
</filter-mapping>

public class Filter2 implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("前置代码2");
        filterChain.doFilter(servletRequest,servletResponse);
        System.out.println("后置代码2");
    }

    @Override
    public void destroy() {

    }
}

<filter>
    <filter-name>Filter2</filter-name>
    <filter-class>com.flzj.filter.Filter2</filter-class>
</filter>
<filter-mapping>
    <filter-name>Filter2</filter-name>
    <url-pattern>/target.jsp</url-pattern>
</filter-mapping>

证明

多个Filter执行顺序，按web.xml的顺序

这里我们改变web.xml里的filter顺序，我们让filter2 在 filter1 的前面

<filter>
    <filter-name>Filter2</filter-name>
    <filter-class>com.flzj.filter.Filter2</filter-class>
</filter>
<filter-mapping>
    <filter-name>Filter2</filter-name>
    <url-pattern>/target.jsp</url-pattern>
</filter-mapping>
<filter>
    <filter-name>Filter1</filter-name>
    <filter-class>com.flzj.filter.Filter1</filter-class>
</filter>
<filter-mapping>
    <filter-name>Filter1</filter-name>
    <url-pattern>/target.jsp</url-pattern>
</filter-mapping>

再访问看看

在这里插入图片描述

多个Filter在同一个线程

我们在 Filter1、 Filter2 的doFilter()方法，小改1下

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println(Thread.currentThread().getName());
        filterChain.doFilter(servletRequest,servletResponse);
    }

在这里插入图片描述

用同一个Request对象

我们在Filter1中的request域中存k1，然后在Filter2 中取k1

在这里插入图片描述

6、Filter拦截路径的三种方式

精准匹配

<url-pattern>/target.jsp</url-pattern>

以上配置的路径，表示请求地址必须为: http://ip:port/工程路径/target.jsp

目录匹配

<url-pattern>/admin/*</url-pattern>

以上配置的路径，表示请求地址必须为:http://ip:port/工程路径/admin/*

后缀名匹配

<url-pattern>*.html</url-pattern>

以上配置的路径，表示请求地址必须以.html结尾才会拦截到

<url-pattern>*.do</url-pattern>

以上配置的路径，表示请求地址必须以.do结尾才会拦截到

这后缀可以随便乱写，Filter过滤器它只关心请求的地址是否匹配，不关心请求的资源是否存在!

尚硅谷书城项目第八阶段

这个阶段，主要是对之前的内容进行总结

1、Filter实战

1、使用Filter过滤器拦截/pages/manager/所有内容，实现权限检查

在这里插入图片描述

那就勉为其难的写1个ManagerFilter

public class ManagerFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
        Object user = httpServletRequest.getSession().getAttribute("user");
        if(user == null){
            // 如果没有登入
            httpServletRequest.getRequestDispatcher("/pages/user/login.jsp").forward(servletRequest,servletResponse);

        }else{
            // 如果登入了
            filterChain.doFilter(servletRequest,servletResponse);
        }

    }

    @Override
    public void destroy() {

    }
}

<filter>
    <filter-name>ManagerFilter</filter-name>
    <filter-class>com.flzj.filter.ManagerFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>ManagerFilter</filter-name>
    <url-pattern>/pages/manager/*</url-pattern>
    <url-pattern>/manager/bookServlet</url-pattern>
</filter-mapping>

这里注意，后台资源的页面也需要拦截，避免一些天资过人的人，通过servlet路径范文后台

2、ThreadLocal

ThreadLocal的作用，它可以解决多线程的数据安全问题。
ThreadLocal它可以给当前线程关联一个数据(可以是普通变量，可以是对象，也可以是数组，集合)

2.1、先用Map代码模拟ThreadLocal

这里先用Map来模拟，我们会发现，这一层层的存取，都不影响

在这里插入图片描述

Test

public class ThreadLocalTest {

    public  static Map<String,Object> date = new Hashtable<String,Object>();
    private static Random random = new Random();
    public static class Task implements Runnable{
        @Override
        public void run() {
            //在Run方法中，随机生成一个变量 (线程要关联的数据)，然后以当前线程名为key保存到map中
            Integer i = random.nextInt(1000);   // 0 ~ 999
            // 获取当前线程名
            String name = Thread.currentThread().getName();
            System.out.println("线程【"+ name + "】生成的随机数是:" + i);
            date.put(name,i);
            try {
                Thread.sleep(3000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            // 加强测试
            new OrderService().createOrder();
            //在Run方法结束之前，以当前线程名获取出数据并打印。查看是否可以取出操作
            Object o = date.get(name);
            System.out.println("在线程【"+ name + "】快结束时，取出关联数据:" + o);
        }
    }

    public static void main(String[] args) {
        for (int i = 0; i < 3; i++) {
            new Thread(new Task()).start();
        }
    }
}

Service层

public class OrderService {
    public void createOrder(){
        String name = Thread.currentThread().getName();
        System.out.println("OrderService 当前线程【"+ name +"】中保存的值时" + ThreadLocalTest.date.get(name));
        // 调用Dao层
        new OrderDao().saveDao();
    }
}

Dao层

public class OrderDao {
    public void saveDao(){
        String name = Thread.currentThread().getName();
        System.out.println("OrderDao 当前线程【"+ name +"】中保存的值时" + ThreadLocalTest.date.get(name));
    }
}

2.2、改为ThreadLocal

在这里插入图片描述

ThreadLocalTest类 , 重点看存取的方法改变

public class ThreadLocalTest {

//    public  static Map<String,Object> date = new Hashtable<String,Object>();
    public final static ThreadLocal<Object> threadLocal = new ThreadLocal<Object>();
    private static Random random = new Random();
    public static class Task implements Runnable{
        @Override
        public void run() {
            //在Run方法中，随机生成一个变量 (线程要关联的数据)，然后以当前线程名为key保存到map中
            Integer i = random.nextInt(1000);   // 0 ~ 999
            // 获取当前线程名
            String name = Thread.currentThread().getName();
            System.out.println("线程【"+ name + "】生成的随机数是:" + i);
            // 存     put(name,i);
            threadLocal.set(i);
            try {
                Thread.sleep(3000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            // 加强测试
            new OrderService().createOrder();

            //在Run方法结束之前，以当前线程名获取出数据并打印。查看是否可以取出操作
            // 取    Object o = date.get(name);
            Object o = threadLocal.get();
            System.out.println("在线程【"+ name + "】快结束时，取出关联数据:" + o);
        }
    }

    public static void main(String[] args) {
        for (int i = 0; i < 3; i++) {
            new Thread(new Task()).start();
        }
    }
}

Serveice层

public class OrderService {
    public void createOrder(){
        String name = Thread.currentThread().getName();
        // System.out.println("OrderService 当前线程【"+ name +"】中保存的值时" + ThreadLocalTest.date.get(name));
        System.out.println("OrderService 当前线程【"+ name +"】中保存的值时" + ThreadLocalTest.threadLocal.get());
        // 调用Dao层
        new OrderDao().saveDao();
    }
}

Dao 层

public class OrderDao {
    public void saveDao(){
        String name = Thread.currentThread().getName();
        // System.out.println("OrderDao 当前线程【"+ name +"】中保存的值时" + ThreadLocalTest.date.get(name));
        System.out.println("OrderDao 当前线程【"+ name +"】中保存的值时" + ThreadLocalTest.threadLocal.get());
    }
}

2.3、ThreadLocal的特点:

1、ThreadLocal可以为当前线程关联一个数据。(它可以像 Map一样存取数据，key 为当前线程)

2、每一个Threadlocal对象，只能为当前线程关联一个数据，如果要为当前线程关联多个数据，就需要使用多个
ThreadLocal对象实例。

3、每个Threadlocal对象实例定义的时候，一般都是static类型

4、ThreadLocal 中保存数据，在线程销毁后。会由JVM虛拟自动释放。

2.4、使用Filter和ThreadLocal组合管理事务

问题引入

我们这里，故意在订单OrderServiceImpl 类，加上一条错误信息，分割保存订单，和保存订单项

...
// 保存订单
orderDao.saveOrder(order);

int i = 12 / 0;		// 故意写的错误

// 遍历购物车中每一个商品项转换成为订单项保存到数据库
....

因为这个错误，会导致，订单生成了，但是订单项没有生成，这时候，我们就要使用事务

图解

在这里插入图片描述

首先，我们要确保，所有操作都使用同一个Connection连接对象，为此😄，我们要去调用的他的方法都加上

System.out.println("XXXX程序在["+Thread.currentThread().getName()+"】");

来查看他们是不是使用同一个Connection对象，OrderServlet.java 、OrderServiceImpl 、OrderDaoImpl、BaseDao、OrderItemDaoImpl、BookDaoImpl , 下图成功证明

在这里插入图片描述

现在我们来到src/main/java/com/flzj/utils/JdbcUtils.java ,使用创建ThreadLocal 对象

private static ThreadLocal<Connection> conns = new ThreadLocal<Connection>();

修改getConnection() 方法，并添加commitAndClose()方法和rollbackAndClose() 方法，来执行事务提交和回滚

public static Connection getConnection(){
    Connection conn = conns.get();
    if(conn == null){
        try {
            conn = dataSource.getConnection();
            conns.set(conn);    // 保存到ThreadLocal对象中，供后面的JDBC操作
            conn.setAutoCommit(false);      // 设置手动管理事务
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    return conn;
}
/**
     * 提交事务，并关闭释放连接
     */
public static void commitAndClose(){
    Connection connection = conns.get();
    if(connection != null){ // 如果使用过连接，操作过数据库
        try {
            connection.commit();    // 提交事务
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                connection.close();     // 关闭连接，释放资源
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    // 一定要执行remove操作,因为Tomcat底层使用了线程池
    conns.remove();
}
/**
     * 回滚事务，并关闭释放连接
     */
public static void rollbackAndClose(){
    Connection connection = conns.get();
    if(connection != null){ // 如果使用过连接，操作过数据库
        try {
            connection.rollback();    // 提交事务
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                connection.close();     // 关闭连接，释放资源
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    // 一定要执行remove操作,因为Tomcat底层使用了线程池
    conns.remove();
}

来到BaseDao ，也需要修改，把关闭连接数据库给删除 和异常抛出

// 删除关闭数据库
finally {
            JdbcUtils.close(connection);
        }

// 抛异常
catch (SQLException e) {
            e.printStackTrace();
            throw  new RuntimeException(e);
        }

然后，在OrderServlet ，对异常进行处理

...
// 调用OrderService.createOrder(Cart,UserId) 生成订单
String orderId = null;
try {
    orderId = orderService.createOrder(cart,userId);
    JdbcUtils.commitAndClose();		// 提交事务
} catch (Exception e) {
    JdbcUtils.rollbackAndClose();
    e.printStackTrace();			// 回滚事务
}
...

这时候，我们写的int i = 12 / 0的bug出现，会回滚

在这里插入图片描述

3、使用Filter过滤器，统一给所有的service方法，都加上try-catch，实现管理

我们会发现，在service里面一个个加，是很麻烦的，这时候就可以用Fliter 来实现统一的管理 😍

图解

在这里插入图片描述

实现

TransactionFilter 类代码实现

public class TransactionFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        try {
            filterChain.doFilter(servletRequest,servletResponse);
            JdbcUtils.commitAndClose();
        } catch (Exception e) {
            JdbcUtils.rollbackAndClose();
            e.printStackTrace();
        } 
    }

    @Override
    public void destroy() {

    }
}

<filter>
    <filter-name>TransactionFilter</filter-name>
    <filter-class>com.flzj.filter.TransactionFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>TransactionFilter</filter-name>
    <!-- 表示当前工程下的所有请求 -->
    <url-pattern>/*</url-pattern>
</filter-mapping>

我们要去BaseDao，把异常抛出，不能捕获

try {
    // 获取action业务鉴别字符串，获取相应的业务 方法反射对象
    Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);
    // 调用目标业务 方法
    method.invoke(this,request,response);

} catch (Exception e) {
    e.printStackTrace();
    throw new RuntimeException(e);	// 把异常抛出
}

4、使用Tomcat统一异常管理，展示友好的错误页面

刚刚出现的异常，页面会出现非常不友好的白页

在这里插入图片描述

解决方案

在 web.xml 中我们可以通过错误页面配置进行管理

实现

erro500.jsp 的创建，erro404.jsp同

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>错误500友好页面</title>
</head>
<body>
    出现500错误！！！马上就好 <br/>
    <a href="index.jsp">点击跳转回首页</a>
</body>
</html>

web.xml 下配置

<!--  error-page 标签配置，服务器出错之后，自动跳转的页面  -->
<error-page>
    <!--  error-code 是错误类型  -->
    <error-code>500</error-code>
    <!--  location 标签表示，要跳转去的页面路径 -->
    <location>/pages/error/erro500.jsp</location>
</error-page>
<error-page>
    <error-code>404</error-code>
    <location>/pages/error/erro404.jsp</location>
</error-page>

同时记得TransactionFilter类，也要向服务器抛出异常

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    try {
        filterChain.doFilter(servletRequest,servletResponse);
        JdbcUtils.commitAndClose();
    } catch (Exception e) {
        JdbcUtils.rollbackAndClose();
        e.printStackTrace();
        throw new RuntimeException(e);  // 把异常抛给Tomcat统一展示友好的错误页面
    }
}

效果图

500

在这里插入图片描述

404

在这里插入图片描述

JSON

JSON (JavaSer ipt 0bject Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对json 的支持(包括C, C+t, C#, Java,JavaSeript, Perl, Python等)。

这样就使得JSON成为理想的数据交换格式。

json是一种轻量级的数据交换格式。轻量级指的是跟xml做比较。

数据交换指的是客户端和服务器之间业务数据的传递格式。

1、JSON 在 JavaScript 中的使用

1.1、JSON的定义

json是由键值对组成，并且由花括号(大括号)包围。每个键由引号引起来，键和值之间使用冒号进行分隔，
多组键值对之间进行逗号进行分隔。

var jsonObj = {
	"k1" : 12,
	"k2" : true,
	"k3" : [11,false,"abc"],
    "k4" : {
        "kk1" : 1,
        "kk2" : 2
    }
}

基本的语法罢了，对象数组什么的都可以

1.2、JSON的取

用 . + k 来取 v

json本身是一个对象。
json中的key我们可以理解为是对象中的一个属性
json中的key访问就跟访问对象的属性一样: json 对象.key

jsonObj.k1

1.3、json的两个常用方法

json的存在有两种形式。

一种是:对象的形式存在，我们叫它json对象。
一种是:字符串的形式存在，我们叫它json字符串。

一般我们要操作json中的数据的时候，需要json对象的格式。
一般我们 要在客户端和服务器之间进行数据交换的时候，使用json字符串。

JSON.stringify() 把json对象转换成为json字符串
JSON.parse() 把json字符串转换成为json对象

2、JSON在java的使用

要在java中操作JSON，就得导包，这里我们导谷歌的gson

2.1、javaBean 和 json 的互换

方法	作用
toJson() 方法	可以把java对象转为json字符串
fromJson()方法	可以把json字符串转为java对象

代码实践

先写个Person 类

public class Person {
    private Integer id;
    private String name;
// construct、toString、getXxx、setXxx省略
}

再写个方法来测试

@Test
public void Test1(){
    Person person = new Person(1,"haha");
    // 创建Gson 对象实例
    Gson gson = new Gson();
    // 使用toJson()方法
    String s = gson.toJson(person);
    System.out.println(s);
    // 使用formJson()方法
    Person person1 = gson.fromJson(s, Person.class);
    System.out.println(person1);
}

效果展示

在这里插入图片描述

2.2、List 和json 的互换

同样调用那两个方法进行互相抓换

这里使用fromJson()方法的时候，例如我们需要转换一个List，我们要去再写一个类，去继承官方写好的TypeToken类

在这里插入图片描述

然后把我们需要的泛型放入<>中,如下图，我们需要ArrayList<Person>

在这里插入图片描述

调用fromJson()方法的时候，传入形参，需要传入类型，我们，可以是TypeToken类已经写好的getType()方法

代码实践

终点在使用fromJson()方法

@Test
public void Test2() {
    ArrayList<Person> personArrayList = new ArrayList<>();
    personArrayList.add(new Person(1,"aaa"));
    personArrayList.add(new Person(2,"bbb"));
    Gson gson = new Gson();
    // 使用toJson()方法
    String s = gson.toJson(personArrayList);
    System.out.println(s);
    // 使用formJson()方法
    ArrayList<Person> arrayList = gson.fromJson(s,new PersonListType().getType());	// 注意看这行
    System.out.println(arrayList);
}

public class PersonListType extends TypeToken<ArrayList<Person>> {

}

效果展示

在这里插入图片描述

2.3、map 和 json 的互换

还是用那两个方法。。。。

我们这里发现，每次都要写一个类去继承TypeToken类，然后在fromJson()方法中调用，非常的NT，纯纯NT了😁，不如，我们直接在写个匿名内部类

代码实践

@Test
public void test3(){
    HashMap<Integer, Person> personMap = new HashMap<>();
    personMap.put(1,new Person(1,"aaa"));
    personMap.put(2,new Person(2,"bbb"));
    Gson gson = new Gson();
    // 使用toJson()方法
    String s = gson.toJson(personMap);
    System.out.println(s);
    // 使用formJson()方法  使用匿名内部类
    HashMap<Integer, Person> personMap2 = gson.fromJson(s, new TypeToken<HashMap<Integer, Person>>() {}.getType());
    System.out.println(personMap2);
}

效果展示

在这里插入图片描述

AJAX

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。

1、原生JS的AJAX请求示例

在这里插入图片描述

我们需要，先去创建一个AjaxServlet类继承，我们在book模块的BaseServlet类(偷个懒)，然后写一个javaScriptAjax()方法，来完成浏览器发起的请求

public class AjaxServlet extends BaseServlet{

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求发送过来了");

        Gson gson = new Gson();
        String s = gson.toJson(new Person(1, "aa"));

        resp.getWriter().write(s);
    }
}

同时页面，也发起请求

<script type="text/javascript">
    // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
    function ajaxRequest() {
    // 				1、我们首先要创建XMLHttpRequest 
    var xmlhttprequest = new XMLHttpRequest();
    // 				2、调用open方法设置请求参数
    xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
    // 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
    xmlhttprequest.onreadystatechange = function(){
        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
            alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
            var jsonObj = JSON.parse(xmlhttprequest.responseText);
            // 把响应的数据显示在页面上
            document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
        }
    }
    // 				3、调用send方法发送请求
    xmlhttprequest.send();
}
	<body>
		<div id="div01">
		</div>
	....

2、jQuery的Ajax方法

2.1、$.ajax方法

参数	作用
url	表示请求的地址
type	表示请求的类型GET或POST请求
data	表示发送给服务器数据（1、name=value&name=value 2、{key:value}）
success	请求响应，响应的回调函数
dataType	响应的数据类型(text、xml、json)

代码实现

    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jQuery == 调用了");

        Gson gson = new Gson();
        String s = gson.toJson(new Person(1, "aa"));

        resp.getWriter().write(s);
    }

// ajax请求
$("#ajaxBtn").click(function(){
    $.ajax({
        url:"http://localhost:8080/json_ajax_i18n/ajaxServlet",
        // data:"action=jQueryAjax",
        data:{action:"jQueryAjax"},
        type:"GET",
        success:function (data) {
            // alert("服务器返回的数据是：" + data);
            // var jsonObj = JSON.parse(data);
            $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
        },
        dataType : "json"
    });
});

效果图

在这里插入图片描述

2.2、`$.get`方法和 `$.post`

封装了$.ajax方法🤗

参数	作用
url	表示请求的地址
data	表示发送给服务器数据（1、name=value&name=value 2、{key:value}）
callback	发送成功时回调函数
type	返回内容格式(xml、html、script、json、text)

代码实践

protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("jQueryGET == 调用了");

    Gson gson = new Gson();
    String s = gson.toJson(new Person(1, "aa"));

    resp.getWriter().write(s);
}
protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("jQueryPOST == 调用了");

    Gson gson = new Gson();
    String s = gson.toJson(new Person(1, "aa"));

    resp.getWriter().write(s);
}

// ajax--get请求
$("#getBtn").click(function(){

    $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
        $("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
    },"json");

});

// ajax--post请求
$("#postBtn").click(function(){
    // post请求
    $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
        $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
    },"json");

});

效果展示

在这里插入图片描述

2.3、getJson方法

参数	作用
url	表示请求的地址
data	表示发送给服务器数据（1、name=value&name=value 2、{key:value}）
callback	发送成功时回调函数

代码实现

protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("jQueryGetJSON == 调用了");

    Gson gson = new Gson();
    String s = gson.toJson(new Person(1, "aa"));

    resp.getWriter().write(s);
}

// ajax--getJson请求
$("#getJSONBtn").click(function(){
    $.getJSON("http://localhost:8080/json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
        $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
    });
});

效果展示

在这里插入图片描述

2.4、表单序列化

serialize()方法

serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接。

代码实现

protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("jQuerySerialize == 调用了");
    System.out.println("用户名" + req.getParameter("username"));
    System.out.println("密码" + req.getParameter("password"));
    Gson gson = new Gson();
    String s = gson.toJson(new Person(1, "aa"));

    resp.getWriter().write(s);
}

记得加上&

// ajax请求
$("#submit").click(function(){
    // 把参数序列化
    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
    });
});