SpringMVC---Ajax具体说明加详细例子-白红宇

SpringMVC---Ajax具体说明加详细例子

阅读量：4131 次

发布时间：2019-05-25

本文共 6223 字，大约阅读时间需要 20 分钟。

17 AJAX

17.1 AJAX介绍

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

AJAX 只是在无需加载整个网页的情况下，更新部分网页的技术。它不是一种新的编程语言，只是一种用于创建更好更快的以及交互性更好的的WEB应用程序技术。

历史：

在2005年，谷歌通过Google Suggest的自动搜索让AJAX流行起来，当用户在搜索框中输入关键字的时候，会自动出现可选的建议列在搜索框下方，也就是类似于百度一样的。

在这里插入图片描述

传统的网页（不使用AJAX技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。

使用Ajax技术，只需要在后台服务器进行少量的数据交换，就可以实现异步局部更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更动态的Web用户界面。

17.2 搭建使用AJAX的环境

17.2.1 配置pom.xml导入需要的包。


   
       
            
     
      SpringMVC-study
             
     
      com.swrici
             
     
      1.0-SNAPSHOT
         
        
    
     4.0.0
        
    
     springmvc-06-ajax
        
            
                 
      
       org.projectlombok
                  
      
       lombok
                  
      
       1.18.16

17.2.2. 配置web.xml

1. 配置DispatchServlet，确保接受分发所有请求。2. 配置默认字符集，避免乱码。


   
          
        
            
     
      springmvc
             
     
      org.springframework.web.servlet.DispatcherServlet
             
                 
      
       contextConfigLocation
                  
      
       classpath:applicationContext.xml
              
             
     
      1
         
        
            
     
      springmvc
             
     
      /
         
       
        
            
     
      Encoding
             
     
      org.springframework.web.filter.CharacterEncodingFilter
             
                 
      
       encoding
                  
      
       utf-8
              
         
        
            
     
      Encoding
             
     
      /*

17.2.3. 配置对应的xml文件

1. 配置扫描包， 包下所有注解类交由Spring管理。2. 配置注解驱动，自动注册默认处理请求，参数和返回值的类,Json乱码问题配置避免后台返回前端界面的Json字符串乱码。3. 视图解析器注入。

17.2.4. 导入lombok包，编写pojo类。

package com.swrici.pojo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;@Data@NoArgsConstructor@AllArgsConstructorpublic class User {
       private String name;    private int age;    private String sex;}

17.2.5. 编写Controller，具体业务逻辑功能。

package com.swrici.controller;import com.fasterxml.jackson.core.JsonProcessingException;import com.fasterxml.jackson.databind.ObjectMapper;import com.swrici.pojo.User;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.ArrayList;import java.util.List;@RestController //自动返回字符串(RestController=Controller+responsebody)public class AjaxController {
   	//t1用来查看是否连接上    @RequestMapping("/t1")    public String test(Model model){
           model.addAttribute("msg","你好呀，springmvc");        return "redirect:/hello";    }	//失去焦点时出发的事件    @RequestMapping("/loseFocus")    public void loseFocus(String name, HttpServletResponse response) throws IOException {
           System.out.println("loseFocus：=>"+name);        if("swrici".equals(name)){
               response.getWriter().println("true");        }else {
               response.getWriter().println("false");        }    }    	//让前端接受list对象并列表展示出来    @RequestMapping("/returnList")    public List
   
     returnList() throws JsonProcessingException {
           List
    
      userList = new ArrayList
     
      ();        //添加数据        userList.add(new User("swrici",1,"男"));        userList.add(new User("boy",2,"男"));        userList.add(new User("girl",3,"女"));        ObjectMapper mapper = new ObjectMapper();        //return mapper.writeValueAsString(userList);        return  userList;    }		//name栏失去焦点的时候的判断    @RequestMapping("/loginAjaxName")    public String loginAjaxName( String name){
           String msg = new String();        if (name!=null){
               if("admin".equals(name)){
                   msg = "成功";            }            else {
                   msg = "用户名有误";            }        }       return msg;    }        //password失去焦点的ajax交互    @RequestMapping("/loginAjaxPassword")    public String loginAjaxPassword( String password){
           String msg = new String();        if (password!=null){
               if("123456".equals(password)){
                   msg = "成功";            }            else {
                   msg = "密码有误";            }        }        return  msg;    }}

别忘记编写对应的jsp页面。

Spring 3.0.x中使用了mvc:annotation-driven后，默认会帮我们注册默认处理请求，参数和返回值的类，其中最主要的两个类：DefaultAnnotationHandlerMapping 和 AnnotationMethodHandlerAdapter ，分别为HandlerMapping的实现类和HandlerAdapter的实现类。

从3.1.x版本开始对应实现类改为了RequestMappingHandlerMapping和RequestMappingHandlerAdapter。

HandlerMapping的实现类的作用

实现类RequestMappingHandlerMapping，它会处理@RequestMapping 注解，并将其注册到请求映射表中。

HandlerAdapter的实现类的作用

实现类RequestMappingHandlerAdapter，则是处理请求的适配器，确定调用哪个类的哪个方法，并且构造方法参数，返回值。

当配置了mvc:annotation-driven/后，Spring就知道了我们启用注解驱动。然后Spring通过context:component-scan/标签的配置，会自动为我们将扫描到的 @Component ，@Controller，@Service，@Repository等注解标记的组件注册到工厂中，来处理我们的请求。

Ajax的核心就是XMLHttpRequest对象，XHR向服务器发送请求和解析服务器相应提供了接口，能够以异步的方式获得从服务器获取新数据。

17.3 ajax具体实现方式之JQuery

JQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

举个例子，具体需求如下：

当用户输入完毕时进行判断，判断内容为文本框中输入值是否等于后台中的值，条件是无点击提交按钮，只是输入文本的组件失去焦点，并后台判定结果返回到前端显示（这里要按f12在consolo中查看）。

具体代码如下：

<%--  Created by IntelliJ IDEA.  User: Administrator  Date: 2020/11/3  Time: 16:18  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %>      $Title$      <%--  失去焦点的时候发送一个请求到后台--%>

后台代码

//这里就是ajax中访问的业务逻辑@RequestMapping("/loseFocus")public void loseFocus(String name, HttpServletResponse response) throws IOException {
   	//写了一个对传入的值进行判断返回的方法    System.out.println("loseFocus：=>"+name);    if("swrici".equals(name)){
           response.getWriter().println("true");    }else {
           response.getWriter().println("false");    }}

转载地址：http://vbdvi.baihongyu.com/

你可能感兴趣的文章