Ajax（异步交互）|学习笔记

1、Ajax（异步交互）

前言：页面跳转的方式有两种，一种是转发，另一种是重定向

转发：forward，页面地址的url不会发生变化，SpringMVC中需要视图解析器的配合

重定向：redirect，页面地址url会发生变化，SpringMVC中不需要视图解析器的配合

Ajax:通俗的来讲就是，在url不刷新的状态下，实现页面的交互（刷新）

Ajax的意义在于：提高用户的体验度，使用户使用起来更加的友好！！！

1.1、简介

• 什么是ajax:ajax用于实现网页的异步交互！
• Ajax的功能：
  • 注册是，输入用户名自动检测用户是否存在
  • 登录时，提示用户名或者密码错误
  • 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据删除成功后，在页面DOM中将数据行也删除

1.2、Ajax的使用（例一）

• 首先新建一个module,并添加web的支持

• 配置web.xml（注册DispatchServlet、绑定配置文件、设置优先级、过滤乱码、配置映射地址）

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
           version="4.0">
  
      <!--1.注册DispatcherServlet：这是SPringMVC的核心，请求分发器，前端的控制器-->
      <servlet>
          <servlet-name>springmvc</servlet-name>
          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
          <!--关联一个springmvc的配置文件:【servlet-name】-servlet.xml
          DispatchServlet必须要绑定Spring的配置文件！！！
          -->
          <init-param>
              <param-name>contextConfigLocation</param-name>
              <param-value>classpath:springmvc-servlet.xml</param-value>
          </init-param>
          <!--启动级别-1  和服务器一块启动-->
          <load-on-startup>1</load-on-startup>
      </servlet>
      <!--/ 匹配所有的请求；（不包括.jsp）-->
      <!--/* 匹配所有的请求；（包括.jsp）-->
      <servlet-mapping>
          <servlet-name>springmvc</servlet-name>
          <url-pattern>/</url-pattern>
      </servlet-mapping>
  
  
      <!--2. 配置SpringMVC的乱码过滤 这个是Spring默认的乱码过滤器-->
      <filter>
          <filter-name>encoding</filter-name>
          <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
          <init-param>
              <param-name>encoding</param-name>
              <param-value>utf-8</param-value>
          </init-param>
      </filter>
      <!--    / 匹配所有的请求；（不包括.jsp）-->
      <!--    /* 匹配所有的请求；（包括.jsp）-->
      <filter-mapping>
          <filter-name>encoding</filter-name>
          <url-pattern>/*</url-pattern>
      </filter-mapping>
  </web-app>
  

• 配置SpringMVC所绑定的配置文件（记得添加Json的乱码过滤）

  <?xml version="1.0" encoding="UTF-8"?>
  <beans xmlns="http://www.springframework.org/schema/beans"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns:context="http://www.springframework.org/schema/context"
         xmlns:mvc="http://www.springframework.org/schema/mvc"
         xsi:schemaLocation="http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans.xsd
         http://www.springframework.org/schema/context
         https://www.springframework.org/schema/context/spring-context.xsd
         http://www.springframework.org/schema/mvc
         https://www.springframework.org/schema/mvc/spring-mvc.xsd">
  
      <!--自动扫描包，让指定包下的注解生效,由IOC容器统一管理 -->
      <context:component-scan base-package="com.qin.controller"/>
      <!--其实，实际的开发中，下面这两个支持注解的开发是不用写的-->
      <mvc:default-servlet-handler />
  <!--    <mvc:annotation-driven />-->
      <!--用来解决JSON乱码问题的解决-->
      <mvc:annotation-driven>
          <mvc:message-converters register-defaults="true">
              <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                  <constructor-arg value="UTF-8"/>
              </bean>
              <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                  <property name="objectMapper">
                      <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                          <property name="failOnEmptyBeans" value="false"/>
                      </bean>
                  </property>
              </bean>
          </mvc:message-converters>
      </mvc:annotation-driven>
  
      <!-- 视图解析器 -->
      <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
            id="internalResourceViewResolver">
          <!-- 前缀 -->
          <property name="prefix" value="/WEB-INF/jsp/" />
          <!-- 后缀 -->
          <property name="suffix" value=".jsp" />
      </bean>
  
  
  
  </beans>
  

• 下载jQuery.js文件jQuery 在官网进行下载【使用的方法如下：两种方式：方式一，在线文档的形式；方式二：下载到本地，进行调用】

• 前端的index.jsp页面

  <%--
    Created by IntelliJ IDEA.
    User: 26287
    Date: 2022/5/20
    Time: 19:24
    To change this template use File | Settings | File Templates.
  --%>
  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <html>
    <head>
      <title>$Title$</title>
  <%--    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
      <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
      <script>
          function a1(){
              $.post({
                  url:"${pageContext.request.contextPath}/a1",
                  data:{"name":$("#name").val()},
                  success:function (data){
                      alert(data);
                  }
                  })
          }
  
      </script>
    </head>
    <body>
  <%--  失去焦点的时候，发起一个请求--%>
    用户名：<input type="text" id="name" οnblur="a1()"/>
    </body>
  
  </html>
  
  

  介绍：当用户名输入框，失去焦点的时候，自动的调用Ajax进行判断

• 后端的AjaxController控制类

  @RequestMapping("/a1")
      public void a1(String name, HttpServletResponse response) throws IOException {
        
        
          System.out.println("name is=="+name);
          if("qin".equals(name)){
        
        
              response.getWriter().println("true");
          }else {
        
        
              response.getWriter().println("false");
          }
      }
  

• 展示的效果如下：

1.3、Ajax的使用（例二，模仿登录界面）

• 前端的login.jsp页面

  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <html>
  <head>
      <title>Title</title>
      <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
      <script>
          function a1(){
              $.post({
                  url:"${pageContext.request.contextPath}/aj3",
                  data:{'name':$("#name").val()},
                  success:function (data) {
                      if (data.toString()=='OK'){
                          $("#userInfo").css("color","green");
                      }else {
                          $("#userInfo").css("color","red");
                      }
                      $("#userInfo").html(data);
                  }
              });
          }
          function a2(){
              $.post({
                  url:"${pageContext.request.contextPath}/aj3",
                  data:{'pwd':$("#pwd").val()},
                  success:function (data) {
                      if (data.toString()=='OK'){
                          $("#pwdInfo").css("color","green");
                      }else {
                          $("#pwdInfo").css("color","red");
                      }
                      $("#pwdInfo").html(data);
                  }
              });
          }
      </script>
  </head>
  <body>
  <p>
      用户名:<input type="text" id="name" οnblur="a1()"/>
      <span id="userInfo"></span>
  </p>
  <p>
      密码:<input type="text" id="pwd" οnblur="a2()"/>
      <span id="pwdInfo"></span>
  </p>
  </body>
  </html>
  

• 前端的AjaxController页面

  package com.qin.controller;
  
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RestController;
  
  import javax.servlet.http.HttpServletResponse;
  import java.io.IOException;
  
  @RestController  // 直接返回字符串,不走这个视图解析器，以json字符串的形式返回
  public class AjaxController {
        
        
  
      @RequestMapping("/t1")
      public  String test(){
        
        
          return "hello";
      }
      @RequestMapping("/a1")
      public void a1(String name, HttpServletResponse response) throws IOException {
        
        
          System.out.println("name is=="+name);
          if("qin".equals(name)){
        
        
              response.getWriter().println("true");
          }else {
        
        
              response.getWriter().println("false");
          }
      }
      @RequestMapping("/aj3")
      public String ajax3(String name,String pwd){
        
        
          String msg =" ";
          // 模拟数据库中存在的数据
          if(name!=null){
        
        
              if("admin".equals(name)){
        
        
                  msg = "OK";
              }else {
        
        
                  msg = "用户名输入错误";
              }
          }
          if (pwd!=null){
        
        
              if("123456".equals(pwd)){
        
        
                  msg = "OK";
              }else {
        
        
                  msg = "密码输入有误";
              }
          }
          return msg;
      }
  }
  

• 展示效果

  • 失败的页面

  

  • 成功的页面

    

1.4、总结

对于前后端分离的项目来说很Ajax还有Json的学习重要，尤其是，对于后端的工作人员，更应该掌握这个Ajax和json的学习！！！