AJAX学习总结+Axios异步框架+Filter拦截器学习+JSON介绍+Listener监听器介绍

本文介绍: AJAX学习总结+Ax ios 异步框架+Filt e r 拦截器学习+JSON介绍+Li stene r 监听器介绍

壹、AJAX

一、AJAX介绍

AJAX（Async h ronous Jav aSc rip t And XML）：异步的Jav aSc rip t和XML

AJAX作用：

1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据。（原先是将Se r v let中的数据存到request域中然后再转发到JSP中进行展示，现在使用了AJAX和服务器进行通信，可以使用HTML+AJAX来替换JSP页面，意思就是Ser v let里的数据通过AJAX可以发送给前端 html中的javascript 即可进行展示）

2. 异步交互：在不重新加载整个页面的情况下，雨服务器交换数据并更新部分网页的技术，例如联想搜索。

三、案例

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在。

先在java–servlet下创建一个SelectUserServlet类，写入如下代码：

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");//1. 接收用户名
        boolean flag = true;//2. 响应标记,假设永远为true
        resp.getWriter().write(""+flag);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doGet(req, resp);
    }
}

<script&gt;
    document.getElementById("username").onblur = function(){ //1. 给用户名输入框绑定，失去焦点事件
        //2.发送ajax请求
        var username = this.value;//获取用户名的值
        //2.1. 创建核心对象xhttp
        var xhttp;
        if(window.XMLHttpRequest){
            xhttp = new XMLHttpRequest();
        }else{
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2. 发送请求
        xhttp.open("GET","http://localhost:8080/filter-demo/selectUserServlet?username="+username); //带有参数要加上参数，同时类名要改
        xhttp.send();
        //2.3. 获取响应
        xhttp.onreadystatechange = function (){
            if(this.readyState == 4 &amp;&amp; this.status == 200){
                if(this.responseText=="true"){ //用户民存在，显示提示信息
                    document.getElementById("username_err").style.display=''; 
                }else{
                    document.getElementById("username_err").style.display='none';//用户名不存在，清除提示信息
                }
            }
        };
    }
</script>

四、Axios异步框架

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

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

axious({ 里面这一部分负责发送请求，指定发送方式和url }).then( ( 这里面定义一个返回参数 resp ){ data是真正返回的结果 } )

赋值 axios的原码粘贴到web app的js 包下，同时创建一个新的html 文件：

第1步：引入 axios 源码文件，在<body>标签里写如下代码：

<script src="js/axios-0.18.0.js"></script>

第2步：分别响应Get和Post请求的数据：

<script>
  //1.get
    /*axios({
      method:"get",
      url:"http://localhost:8080/filter-demo/axiosServlet?username=zhangsan"
    }).then(function(resp){
        alert(resp.data);
    })*/
  axios({
      method:"post",
      url:"http://localhost:8080/filter-demo/axiosServlet",
      data : "username=zhangsan"
  }).then(function(resp){
      alert(resp.data);
  });
  </script>

axios.get("http://localhost:8080/filter-demo/axiosServlet?username=zhangsan").then(function(resp){
      alert(resp.data);
  })
  axios.post("http://localhost:8080/filter-demo/axiosServlet","username=zhangsan").then(function(resp){
      alert(resp.data);
  });

五、JSON

JSON（JavaScript Object Notation）：JavaScript对象表示法。

键必须要加引号。

JSON基础语法：

<body>
  var json{
    "name":"zhangsan",
    "age":23,
    "addr":["北京","上海","西安"]
  };
  <script>
      alert(json.name);
  </script>
</body>

请求数据：JSON字符串转为Java对象

响应数据：Java对象转为JSON字符串

1. 导入坐标

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

2. Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

3. JSON字符串转Java对象

User user = JSOON.parseObject(jsonStr,User.class);

下面是具体实现：

public class FastJsonDemo {
    public static void main(String argv[]) {
        // 1.将Java对象转为Json字符串
        User user = new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPassword("123");
        String jsonString = JSON.toJSONString(user); //toJSONString方法
        System.out.println(jsonString);
        // 2.将JSON字符串转为Java对象
        User u = JSON.parseObject("{"id":1,"password":"123","username":"zhangsan"}", User.class);
        System.out.println(u);
    }
}

六、综合 案例

在service中创建SelectAllServlet类编写如下代码：

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 调用哪个Service查询
        List<Brand> brands = brandService.selectAll();
        //2 将集合转换为JSON数据，序列化
        String jsonString = JSON.toJSONString(brands);
        //3. 响应数据
        resp.setContentType("text/html;charset=utf-8");//处理中文
        resp.getWriter().write(jsonString);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}

注意几个点：1.url必须要填的是web层写的那个selectAllServlet，否则数据可能为空。2.记得要在function里填写 resp。3.记得如果想出现表格必须要加table 标签。

<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<table id="brandTable" border="1" cellspacing="0" width="100%"/>
<script src="js/axios-0.18.0.js"></script>
    <script>
        window.onload = function(){//1. 当页面加载完成后，发送ajax请求
            axios({// 2. 发送ajax请求
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function(resp){//获取数据
                let brands = resp.data;
                let tableData = "<tr>n" +
                    "        <th>序号</th>n" +
                    "        <th>品牌名称</th>n" +
                    "        <th>企业名称</th>n" +
                    "        <th>排序</th>n" +
                    "        <th>品牌介绍</th>n" +
                    "        <th>状态</th>n" +
                    "        <th>操作</th>n" +
                    "    </tr>";
                for(let i=0;i<brands.length;i++){ //遍历一次多一横，主要是为了获取数据
                    let brand = brands[i];
                    tableData +="n" +
                        "        <tr align="center">n"+
                        "        <td>"+(i+1)+"</td>n" +
                        "        <td>"+brand.brandName+"</td>n" +
                        "        <td>"+brand.companyName+"</td>n" +
                        "        <td>"+brand.ordered+"</td>n" +
                        "        <td>"+brand.description+"</td>n" +
                        "        <td>"+brand.status+"</td>n" +
                        "n" +
                        "        <td><a href="#">修改</a> <a href="#">删除</a></td>n" +
                        "    </tr>";
                }
                document.getElementById("brandTable").innerHTML = tableData; //设计表格的数据，展示数据可能
            })
        }
    </script>
</body>

贰、Filter与Listener

二、Filter拦截路径配置&过滤器链

1. 拦截路径配置：写在@WebFilter注解里的路径会被拦截：

2. 过滤器链：配置多个过滤器，都会被执行，像个链条一样：

注意：先执行1，后执行2，返回来后，是先执行2，再执行1，类似堆栈。

输出结果：aaa – ccc – ddd – bbb

执行的顺序：优先级按照过滤器的类名（字符串）的字典序排序。字典序更小的先执行。

三、案例

3.1 查询所有

在java-web下创建LoginFilter类：

@WebFilter("/*")
public class LoginFilter implements Filter {//继承的Filter必须是java.servlet下面的包
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        //首先判断session中是否有user
        HttpServletRequest req = (HttpServletRequest) request;
        HttpSession session = req.getSession();
        Object user = session.getAttribute("user");
        if(user != null){//判断user是否为null，不为null用户登录过
            chain.doFilter(request, response);//放行 
        }else{//没登录，拦截跳转到登录页面
            req.setAttribute("login_msg","您尚未登录！");
            req.getRequestDispatcher("/login.jsp").forward(req,response);
        }
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void destroy() {
    }
}

出现问题：将css 样式都给拦截了：

因此要将登陆和注册的资源全部放行：

//判断访问的资源路径是否和登录注册相关
String[] urls = {"/login.jsp","/imgs/","/css/","loginServlet","register.jsp","regiserServlet","checkCodeServlet"};
String url = req.getRequestURL().toString();//获取当前访问的资源路径
for(String u : urls){
     if(url.contains(u)) { //如果访问的url包含上面
         chain.doFilter(request, response);//放行
     return; //退出
  }
}

3.2 新增 品牌

在java-web下创建addServlet写入如下代码：

注意：resp.getWriter().write(“success“);这里的success会确实返回 ajax用以判断，要注意接收的数据是JSON格式，要转化为Java对象。

@WebServlet("/addServlet")
public class addServlet extends HttpServlet {
    private BrandService brandService = new BrandService();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收数据
        BufferedReader br = req.getReader();
        String Params = br.readLine();
        //将JSON字符转化为Java对象
        Brand brand = JSON.parseObject(Params, Brand.class);
        //调用service添加
        brandService.add(brand);
        //响应成功标识
        resp.getWriter().write("success");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

在addBrand.html 中写入如下代码：

注意：let status = document.getElementsByName(“status”);这段和前面的有些差别是通过Name来获取元素。查看状态时是看是否有checked 标识，再通过 value来判断选项。resp是web端返回的信息，用于判断。存疑：formData又是如何给到前端更新的？

<script src="js/axios-0.18.0.js"></script>
<script>

    //1.给按钮绑定一个单机事件
    document.getElementById("btn").onclick = function() {
        //将表单的数据转化为json
        var formData={
            brandName:"",
            companyName:"",
            ordered:"",
            description:"",
            status:"",
        };

        //获取表单数据
        let brandName = document.getElementById("brandName").value;
        formData.brandName = brandName;
        let companyName = document.getElementById("companyName").value;
        formData.companyName = companyName;
        let ordered = document.getElementById("ordered").value;
        formData.ordered = ordered;
        let description = document.getElementById("description").value;
        formData.description = description;

        let status = document.getElementsByName("status");
        for(let i=0;i<status.length;i++)
        {
            if(status[i].checked){ //被选中的checked属性为true
                formData.status = status[i].value; //value 0是禁用 1是启用
            }
        }
        console.log(formData);

        //2.发送ajax请求
        axios({
            method: "post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:formData
        }).then(function(resp){
            //判断响应数据是否为success
            if(resp.data =="success"){
                location.href="http://localhost:8080/brand-demo/brand.html";
            }
        })
    }
</script>

四、Listener

Listener表示监听器，是JavaWeb三大组件之一。

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

在java-web-listener下创建ContextLoaderListener，写入如下代码即可：

@WebListener
public class ContextLoaderListener implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent sce) {
        System.out.println("ContextLoaderListener...");
    }
    @Override
    public void contextDestroyed(ServletContextEvent sce) {
    }
}

叁、学习总结

一、学习复盘

1. 查询数据原理：BrandMapper和BrandMapper.xml其实是在同一个目录下。mybatis–config.xml主要负责链接数据库。在BrandMapper里写了SQL语句，主要提供同数据库的交互，会将查询结果返回。在Service层中通过SqlSessionFactory获取SqlSession对象，然后再获得BrandMapper的对象，就可以直接通过对象来调用查询方法返回结果。web层创建了service的对象，于是可以直接通过调用方法来获取结果。