投稿
  1. 首页
  2. html-js-css

JavaWEB13：Filter、Listener、Ajax、Axios、JSON

慕课网 • 2022-6-12 • html-js-css • 阅读 54

JavaWEB13：Filter、Listener、Ajax、Axios、JSON,第1张

JavaWEB01：MySQL基础——数据库相关概念、MySQL安装和配置、基本的SQL语句
JavaWEB02：MySQL高级——约束、数据库设计、多表查询、事务
JavaWEB03：JDBC
JavaWEB04：Maven
JavaWEB05：Mybatis
JavaWEB06：Mybatis综合练习
JavaWEB07：HTML、CSS
JavaWEB08：JavaScript
JavaWEB09：HTTP、Tomcat、Servlet
JavaWEB10：Request、Response
JavaWEB11：JSP
JavaWEB12：会话技术
JavaWEB13：Filter、Listener、Ajax、axios、JSON

JavaWeb作业

文章目录 1，Filter（了解）1.1 Filter概述1.2 Filter快速入门1.3 Filter拦截路径配置1.4 过滤器链1.4.1 概述1.4.2 代码演示1.4.3 问题 1.5 案例1.5.1 需求1.5.2 分析1.5.3 代码实现 2，Listener（了解）2.1 概述2.2 分类2.3 代码演示 3，Ajax（了解）3.1 概述3.1.1 作用3.1.2 同步和异步 3.2 快速入门3.2.1 服务端实现3.2.2 客户端实现3.2.3 测试 3.3注册案例3.3.1 分析3.3.2 后端实现3.3.3 前端实现 4，Axios（了解）4.1 基本使用4.2 快速入门4.2.1 后端实现4.2.2 前端实现 4.3 请求方法别名 5，JSON（掌握）5.1 概述5.2 JSON 基础语法5.2.1 定义格式5.2.2 代码演示5.2.3 发送异步请求携带参数 5.3 （Fastjson）JSON串和Java对象的相互转换5.3.1 Fastjson 概述5.3.2 Fastjson 使用5.3.3 代码演示 6，案例6.1 需求6.2 环境准备6.2.1 工程结构图6.2.2 数据库6.2.3 配置文件 6.3 前端实现6.4 后端实现com.xxx.mappercom.xxx.pojocom.xxx.servicecom.xxx.utilcom.xxx.web

今日目标：

能够使用 Filter 完成登陆状态校验功能能够使用 axios 发送 ajax 请求熟悉 json 格式，并能使用 Fastjson 完成 java 对象和 json 串的相互转换使用 axios + json 完成综合案例
1，Filter（了解） 1.1 Filter概述

Filter 表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。Servlet 我们之前都已经学习过了，Filter和Listener 我们今天都会进行学习。

浏览器可以访问服务器上的所有的资源（servlet、jsp、html等），而在访问到这些资源之前可以使过滤器拦截来下，也就是说在访问资源之前会先经过 Filter，如下图

Filter过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。

拦截器拦截到后可以做什么功能呢？过滤器一般完成一些通用的 *** 作。比如每个资源都要写一些代码完成某个功能，我们总不能在每个资源中写这样的代码吧，而此时我们可以将这些代码写在过滤器中，因为请求每一个资源都要经过过滤器。

如我们希望实现的效果是：用户如果登陆过了就跳转到品牌数据展示的页面，如果没有登陆就跳转到登陆页面让用户进行登陆。要实现这个效果需要在每一个资源中都写上这段逻辑，而像这种通用的 *** 作，我们就可以放在过滤器中进行实现。这个就是权限控制。过滤器还可以做 统一编码处理、 敏感字符处理 等等…

1.2 Filter快速入门

1.2.1 开发步骤
进行 Filter 开发分成以下三步实现

定义类，实现 Filter接口，并重写其所有方法配置Filter拦截资源的路径：在类上定义 @WebFilter 注解。而注解的 value 属性值 /* 表示拦截所有的资源在doFilter方法中输出内容，并用FilterChain 放行 
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/*")
public class FilterDemo implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("FilterDemo....init...");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("1.放行前：FilterDemo....doFilter...");
        //doFilter放行，不执行就卡在这里不能进入服务器访问资源
        filterChain.doFilter(servletRequest,servletResponse);
        System.out.println("3.放行后：FilterDemo....doFilter...");
    }

    @Override
    public void destroy() {
        System.out.println("FilterDemo....destroy...");
    }
}

上述代码中的 filterChain.doFilter(request,response); 就是放行，也就是让其访问本该访问的资源。
不执行该句话，就不会进入服务器访问资源，被过滤器拦截了

1.2.2 代码演示

pom.xml 配置文件需要servlet：

    <dependencies>
        <dependency>
            <groupId>javax.servletgroupId>
            <artifactId>javax.servlet-apiartifactId>
            <version>3.1.0version>
            <scope>providedscope>
        dependency>
    dependencies>

webaapp下新建页面hello.jsp 页面内容如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>logintitle>
    <link href="css/login.css" rel="stylesheet">
head>

<body>
<h1>hello JSP~h1>
<%
    System.out.println("2.访问资源");
%>
body>
html>

我们现在在浏览器输入 http://localhost/filter-demo/hello.jsp 访问 hello.jsp 页面，这里是可以访问到 hello.jsp 页面内容的，且在 idea 的控制台可以看到如下内容

1.放行前：FilterDemo....doFilter...
2.访问资源
3.放行后：FilterDemo....doFilter...

如上图是使用过滤器的流程，我们通过以下问题来研究过滤器的执行流程：

放行后访问对应资源，资源访问完成后，还会回到Filter中吗？

从上图就可以看出肯定 会 回到Filter中

如果回到Filter中，是重头执行还是执行放行后的逻辑呢？

如果是重头执行的话，就意味着 放行前逻辑 会被执行两次，肯定不会这样设计了；所以访问完资源后，会回到 放行后逻辑，执行该部分代码。

通过上述的说明，我们就可以总结Filter的执行流程如下：

以后我们可以将对请求进行处理的代码放在放行之前进行处理，而如果请求完资源后还要对响应的数据进行处理时可以在放行后进行逻辑处理。

1.3 Filter拦截路径配置

拦截路径表示 Filter 会对请求的哪些资源进行拦截，使用 @WebFilter 注解进行配置。如：@WebFilter("拦截路径")

拦截路径有如下四种配置方式：

拦截具体的资源：/index.jsp：只有访问index.jsp时才会被拦截目录拦截：/user/*：访问/user下的所有资源，都会被拦截后缀名拦截：*.jsp：访问后缀名为jsp的资源，都会被拦截拦截所有：/*：访问所有资源，都会被拦截

拦截路径的配置方式和 Servlet 的请求资源路径配置方式一样，但是表示的含义不同。

1.4 过滤器链 1.4.1 概述

过滤器链是指在一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链。

上图中的过滤器链执行是按照以下流程执行：

执行 Filter1 的放行前逻辑代码执行 Filter1 的放行代码执行 Filter2 的放行前逻辑代码执行 Filter2 的放行代码访问到资源执行 Filter2 的放行后逻辑代码执行 Filter1 的放行后逻辑代码

以上流程串起来就像一条链子，故称之为过滤器链。
注意：注解配置的Filter，优先级按照过滤器类名（字符串）自然排序。 如A开头的优先。

1.4.2 代码演示

编写第一个过滤器 FilterDemo ，配置成拦截所有资源

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

@WebFilter("/*")
public class FilterDemo implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("FilterDemo....init...");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("1.放行前：FilterDemo....doFilter...");
        //doFilter放行，不执行就卡在这里不能进入服务器访问资源
        filterChain.doFilter(servletRequest,servletResponse);

        System.out.println("5.放行后：FilterDemo....doFilter...");


    }

    @Override
    public void destroy() {
        System.out.println("FilterDemo....destroy...");
    }
}

编写第二个过滤器 FilterDemo2 ，配置炒年糕拦截所有资源

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

@WebFilter("/*")
public class FilterDemo2 implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("FilterDemo2....init...");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("2.放行前：FilterDemo2....doFilter...");
        //doFilter放行，不执行就卡在这里不能进入服务器访问资源
        filterChain.doFilter(servletRequest,servletResponse);

        System.out.println("4.放行后：FilterDemo2....doFilter...");


    }

    @Override
    public void destroy() {
        System.out.println("FilterDemo2....destroy...");
    }
}

修改 hello.jsp 页面中脚本的输出语句

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Titletitle>
head>
<body>
    <h1>hello JSP~h1>
    <%
        System.out.println("3.hello jsp");
    %>
body>
html>

启动服务器测试

1.放行前：FilterDemo....doFilter...
2.放行前：FilterDemo2....doFilter...
3.访问资源
4.放行后：FilterDemo2....doFilter...
5.放行后：FilterDemo....doFilter...
1.4.3 问题

上面代码中为什么是先执行 FilterDemo ，后执行 FilterDemo2 呢？

我们现在使用的是注解配置Filter，而这种配置方式的优先级是按照过滤器类名(字符串)的自然排序。

比如有如下两个名称的过滤器 ： BFilterDemo 和 AFilterDemo 。那一定是 AFilterDemo 过滤器先执行。

1.5 案例 1.5.1 需求

访问服务器资源时，需要先进行登录验证，如果没有登录，则自动跳转到登录页面

1.5.2 分析

我们要实现该功能是在每一个资源里加入登陆状态校验的代码吗？显然是不需要的，只需要写一个 Filter ，在该过滤器中进行登陆状态校验即可。而在该 Filter 中逻辑如下：

1.5.3 代码实现

在 doFilter() 方法中编写登陆状态校验的逻辑代码。

我们首先需要从 session 对象中获取用户信息，但是 ServletRequest 类型的 requset 对象没有获取 session 对象的方法，所以此时需要将 request对象强转成 HttpServletRequest 对象。

HttpServletRequest res = (HttpServletRequest) request;

1.是注意doFilter()方法内放行后是还要执行下面的代码。
2.是注意单放行了jsp页面是没有图片以及css和js样式，jsp页面需要的静态资源也需要被放行。 因为过滤器在web服务器之前，而资源都放在web服务器。

然后完成以下逻辑

获取Session对象从Session对象中获取名为 user 的数据判断获取到的数据是否是 null 如果不是，说明已经登陆，放行如果是，说明尚未登陆，将提示信息存储到域对象中并跳转到登陆页面

代码如下：

@WebFilter("/*")
public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest res = (HttpServletRequest) request;//常用封装了HTTP的Servlet,且需要里面的方法
        //定义需要放行的资源，比如前端的js  css等  还有我们的登录注册相关的
        String[] pass = {"/css/", "/imgs/", "register.jsp", "login.jsp", "/loginServlet", "/registerServlet", "/checkCodeServlet"};
        String url = req.getRequestURL().toString(); 
        /*
    	比如当前访问的资源路径是  /brand-demo/login.jsp
    	而字符串 /brand-demo/login.jsp 包含了  字符串 /login.jsp ，所以这个字符串就需要放行
   		 */
        for (String u : pass) {
            if (uri.contains(u)) {//请求的资源包含在允许内
                //放行
                chain.doFilter(request, response);
                return;
                //因为资源访问完后，还会执行放行后的代码，break只能跳出循环，return跳出方法。
            }
        }

        //若没有设置放行的资源，前端页面就没有样式。

        //判断用户是否登录
        HttpSession session = res.getSession();
        Object user = session.getAttribute("user");
        if (user != null) {
            //放行
            chain.doFilter(request, response);
            //这里不需要加return是因为放行后下面没有代码了。
        } else {
            //提示未登录，跳转到登录页面
            request.setAttribute("login_msg", "未登录");
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }
    }

    @Override
    public void destroy() {
    }
}
2，Listener（了解） 2.1 概述

Listener 表示监听器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。

监听器可以监听就是在 application，session，request 三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。

request 和 session 常用，而 application 是 ServletContext 类型的对象。

ServletContext 代表整个web应用，在服务器启动的时候，tomcat会自动创建该对象。在服务器关闭时会自动销毁该对象。

2.2 分类

JavaWeb 提供了8个监听器：


这里面只有 ServletContextListener 这个监听器我们会接触到，ServletContextListener 是用来监听 ServletContext 对象的创建和销毁。

ServletContextListener 接口中有以下两个方法

方法解释
void contextInitialized(ServletContextEvent sce)ServletContext 对象被创建了会自动执行的方法
void contextDestroyed(ServletContextEvent sce)ServletContext 对象被销毁时会自动执行的方法
2.3 代码演示

只演示一下 ServletContextListener 监听器

定义一个类，实现ServletContextListener 接口重写所有的抽象方法使用 @WebListener 进行配置

代码如下：

@WebListener
public class ContextLoaderListener implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent sce) {
        //加载资源
        System.out.println("ContextLoaderListener...contextInitialized...");
    }

    @Override
    public void contextDestroyed(ServletContextEvent sce) {
    	System.out.println("ContextLoaderListener...contextDestroyed...");
        //释放资源
    }
}

启动服务器，并关闭服务器，结果如下：

3，Ajax（了解） 3.1 概述

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

3.1.1 作用

AJAX 作用有以下两方面：

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。

如上图，Servlet 调用完业务逻辑层后将数据存储到域对象中，然后跳转到指定的 jsp 页面，在页面上使用 EL表达式 和 JSTL 标签库进行数据的展示。

学习了AJAX 后，就可以使用AJAX和服务器进行通信，以达到使用 HTML+AJAX来替换JSP页面了。如下图，浏览器发送请求servlet，servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 来进行数据展示。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

上图所示的效果我们经常见到，在我们输入一些关键字（例如 奥运）后就会在下面联想出相关的内容，而联想出来的这部分数据肯定是存储在百度的服务器上，而我们并没有看出页面重新刷新，这就是 更新局部页面 的效果。

我们在用户名的输入框输入用户名，当输入框一失去焦点，如果用户名已经被占用就会在下方展示提示的信息；在这整个过程中也没有页面的刷新，只是在局部展示出了提示信息，这就是 更新局部页面 的效果。

3.1.2 同步和异步 同步发送请求过程如下

​ 浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的 *** 作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的 *** 作。

异步发送请求过程如下

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的 *** 作。

3.2 快速入门 3.2.1 服务端实现

在项目的创建 com.xxx.web ，并在该包下创建名为 AjaxServlet 的servlet

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().write("Hello Ajax!");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}
3.2.2 客户端实现

在 webapp 下创建名为 ajax-demo1.html 的页面，在该页面书写 ajax 代码
建立连接时，不写相对路径的原因是以后都是前后端分离，前后端不在同一个服务器上。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script>
  //1.创建核心对象，不同的浏览器创建的对象是不同的
  var xhttp;
  if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2.建立连接：连接与按自己的来。
  xhttp.open("GET", "http://localhost:8080/ajax-demo/AjaxServlet");
  //3.发送请求
  xhttp.send();
  //4.获取响应
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 通过 this.responseText 可以获取到服务端响应的数据
      alert(this.responseText);
    }
  };
script>
body>
html>
3.2.3 测试

在浏览器地址栏访问ajax-demo1.html 的时候就会发送 ajax 请求，效果如下

我们可以通过 开发者模式 查看发送的 AJAX 请求。在浏览器上按 F12 快捷键

如果我们只是想看异步请求的话，点击上图中 All 旁边的 XHR，会发现只展示 Type 是 xhr 的请求。如下图：

3.3注册案例

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在（服务器模拟数据库存在）

3.3.1 分析 前端完成的逻辑 给用户名输入框绑定光标失去焦点事件 onblur发送 ajax请求，携带username参数处理响应：是否显示提示信息 后端完成的逻辑 接收用户名调用service查询User。此案例是为了演示前后端异步交互，所以此处我们不做业务逻辑处理返回标记

整体流程如下：

3.3.2 后端实现

在 com.xxx.web 包中定义名为 SelectUserServlet 的servlet。代码如下：

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

@WebServlet("/SelectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用户名
        String username = request.getParameter("username");
        //2. 调用service查询User对象
        boolean flag = true;//模拟数据库返回“用户已经存在”为true
        //3. 响应标记
        response.getWriter().write("" + flag);

    }

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

webapp 下创建 register.html 页面的 body 结束标签前编写 script 标签。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册title>
head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册h1>
        <span>已有帐号？span> <a href="login.html">登录a>
    div>
    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>用户名td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="color: red;display: none">用户名已存在span>
                td>

            tr>
            <tr>
                <td>密码td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误span>
                td>
            tr>

            <tr>
                <td>验证码td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清？a>
                td>
            tr>
        table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        div>
        <br class="clear">
    form>
div>
<script>
    //1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur = function () {
        //2. 发送ajax请求,携带username参数
        // 获取用户名的值
        var username = this.value;//this ：给谁绑定的事件，this就代表谁
        //2.1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2. 发送请求,发送的是 GET 请求，所以需要在 URL 后拼接从输入框获取的用户名数据。
        xhttp.open("GET", "http://localhost:8080/ajax-demo/SelectUserServlet?username="+username);
        xhttp.send();
        //2.3. 获取响应，
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {// 条件满足时，说明已经成功响应数据了。
                //alert(this.responseText);
                //判断
                if(this.responseText == "true"){//服务器返回为true
                    //用户名存在，显示提示信息
                    document.getElementById("username_err").style.display = '';
                }else {
                    //用户名不存在 ，清除提示信息
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        };
    }
script>
body>
html>

4，Axios（了解）

Axios 对原生的AJAX进行封装，简化书写。

Axios官网是：https://www.axios-http.cn

4.1 基本使用

Axios 使用是比较简单的，分为以下两步：

第一步：引入 axios 的 js 文件 
<script src="https://unpkg.com/axios/dist/axios.min.js">script>

也可以下载下来后再引入。

第二步：使用axios 发送请求，并获取响应结果

发送 get 请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

发送 post 请求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

Axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

method 属性：用来设置请求方式的。取值为 get 或者 post。url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

4.2 快速入门 4.2.1 后端实现

定义一个用于接收请求的servlet，代码如下：

@WebServlet("/AxiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");

        //1. 接收请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //2. 响应数据
        response.getWriter().write("hello Axios~"+username);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request, response);
    }
}
4.2.2 前端实现 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
    //1. get请求
    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/AxiosServlet?username=zhangsan1"
    }).then(function (resp) {
        alert(resp.data);
    })


    //2. post请求
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/AxiosServlet",
        data:"username=zhangsan2"
    }).then(function (resp) {
        alert(resp.data);
    })
script>
body>
html>

4.3 请求方法别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

get 请求 ： axios.get(url[,config])

delete 请求 ： axios.delete(url[,config])

head 请求 ： axios.head(url[,config])

options 请求 ： axios.option(url[,config])

post 请求：axios.post(url[,data[,config])

put 请求：axios.put(url[,data[,config])

patch 请求：axios.patch(url[,data[,config])

而我们只关注 get 请求和 post 请求。

入门案例中的 get 请求代码可以改为如下：

axios.get("http://localhost:8080/ajax-demo/AxiosServlet?username=zhangsan1").then(function (resp) {
    alert(resp.data);
});

入门案例中的 post 请求代码可以改为如下：

axios.post("http://localhost:8080/ajax-demo/AxiosServlet","username=zhangsan2").then(function (resp) {
    alert(resp.data);
})
5，JSON（掌握） 5.1 概述

概念：JavaScript Object Notation。JavaScript 对象表示法.
如下是 JavaScript 对象的定义格式：

{
	name:"zhangsan",
	age:23,
	city:"北京"
}

接下来我们再看看 JSON 的格式：

{
	"name":"zhangsan",
	"age":23,
	"city":"北京"
}

通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的属性名可以使用引号（可以是单引号，也可以是双引号）；而 json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。

json 格式的作用：由于其语法格式简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

大家还记得 ajax 的概念吗？ 是 异步的 JavaScript 和 xml。这里的 xml就是以前进行数据传递的方式，如下：

<student>
    <name>张三name>
    <age>23age>
    <city>北京city>
student>

再看 json 描述以上数据的写法：

{	
	"name":"张三",
    "age":23,
    "city":"北京"
}

上面两种格式进行对比后就会发现 json 格式数据的简单，以及所占的字节数少等优点。

5.2 JSON 基础语法 5.2.1 定义格式

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。 定义格式如下：

var 变量名 = '{"key":value,"key":value,...}';

JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

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

示例：

var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
5.2.2 代码演示

创建一个页面，在该页面的

保存