Spring Web MVC之Ajax应用

刺骨的言语ヽ痛彻心扉 2022-05-18 08:57 226阅读 0赞

### Ajax概念 ###

Ajax:异步JavaScript和XML技术，是一种综合应用的技术  
使用Ajax可以开发出异步发送请求和响应，可以在页面不刷新的情况下与服务器进行交互，从而实现页面内容的局部改变（局部刷新）。

### Ajax优点 ###

*  可以提升用户体验
 *  可以提升响应效率
    
    提升了页面的响应效率就是提升了用户体验

### Spring Web MVC+Ajax处理流程 ###

![这里写图片描述][70]

上图中体现了Spring Web MVC和Ajax结合使用的整体处理流程。Spring Web MVC的处理流程已经很熟悉了，主要是三大组件的使用，和Ajax技术结合使用之后，处理方式有些改变。  
传统的Spring Web MVC的处理流程和与Ajax异步传输技术结合之后的处理流程主要是在响应这一部分有区别。  
传统Spring Web MVC流程中Controller业务组件处理相关请求之后，会返回一个String类型或者ModelAndView类型传递给ViewResolver组件寻找到生成响应信息的视图页面，然后后将页面信息返回给浏览器。而和Ajax应用结合之后，为了达到局面刷新的效果，传递数据不再需要刷新整个页面，所以业务控制器Controller返回的不再是视图组件相关的信息，而是返回页面局部的数据信息，Ajax数据传输格式使用JSON格式，JSON是一种格式简单，易于处理的数据格式。  
Spring Web MVC为了实现JSON数据响应，提供了一系列的jackson.jar架包，这些架包的主要作用是将业务组件Controller返回的数据结果生成JSON字符串，浏览器前端的页面可以接收JSON字符串加以简单处理生成完整的页面信息。

### Ajax使用案例—服务器端实现 ###

**1. 配置好Spring Web MVC的环境**（不需要再配置ViewRes）  
主要是加入jackson相关架包,使用Maven依赖

<dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.9.5</version>
            </dependency>
            
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-core</artifactId>
                <version>2.9.5</version>
            </dependency>
            <dependency>
              <groupId>com.fasterxml.jackson.core</groupId>
              <artifactId>jackson-annotations</artifactId>
              <version>2.9.0</version>
            </dependency>

**2. Controller组件的编写**

package com.hnust.testajax.controller;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    public class TestAjaxController {
        @RequestMapping("/demo1.do")
        @ResponseBody//将User对象的集合转化为JSON字符串信息
        public List<User> execute(){
            List<User> lu=new ArrayList<User>();
            User user1 = new User();
            user1.setId(1);
            user1.setName("tom");
            user1.setTelephone("15200340738");
            user1.setEmail("tom@gmail.com");
            User user2 = new User();
            user2.setId(2);
            user2.setName("rose");
            user2.setTelephone("15200340739");
            user2.setEmail("rose@gmail.com");
            lu.add(user1);
            lu.add(user2);
            return lu;
        }
    }

采用JSON响应，这里的Controller可以返回任何类型的信息，@ResponseBody//将User对象的集合转化为JSON字符串信息，这是SpringMVC和Ajax结合使用最关键的点，在业务处理方法之前加入@ResponseBody，如果发现该标记，就会引用jackson架包将return的数据类型转化为JSON格式的字符串信息。  
**3. 阶段性测试**  
直接运行程序，在浏览器中发出demo1.do请求，响应结果如下。  
![这里写图片描述][70 1]  
可以看到浏览器中接收到后台传递的JSON数据字符串，可以看看JSON的数据格式,key-value形式，非常简单。

### Ajax使用案例—客户端实现 ###

前面只介绍了服务器端将任意类型的数据转化为JSON字符串格式返回给客户端。还没有涉及Ajax的应用，传统的前端请求方式一般使用表单请求，请求经过处理后，前端接收到数据之后需要进行整个页面刷新，现在使用Ajax技术可以实现局部刷新。  
具体请求方式如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    
    <link rel="stylesheet" type="text/css" href="css/tablestyle.css" />
    <script src="js/jquery-3.3.1.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="button" id="loadBtn" value="Ajax测试"/>
        <table class="imagetable" id="tr">
        </table>
        <script>
            $("#loadBtn").click(function(){
         
                //发送ajax请求
                $.ajax({
                    url:"demo1.do",//请求的url
                    type:"post",//请求方式
                    /*如果有需要提交的数据
                    data{
    
                    }
                    */
                    dataType:"json",//服务器处理完返回数据的类型
                    success:function(data){
         //成功回调函数，data就是返回的json数据
                        var msg = "";
                        msg += "<tr>"+"<th>"+"序号"+"</th>"+"<th>"+"用户名"+"</th>"+"<th>"+"邮箱" + "</th>"+"</tr>";
                        for ( var i = 0; i < data.length; i++) {
        //循环json对象，拼接tr,td的html
                            msg += "<tr>";
                            msg += "<td>" + data[i].id + "</td>";
                            msg += "<td>" + data[i].name+ "</td>";
                            msg += "<td>" + data[i].email + "</td>";
                            msg += "</tr>";
                        }
                        $("#tr").html(msg);//通过jquery方式获取table，并把tr,td的html输出到table中
                    },
                    error:function(){
         //失败回调函数，提示请求失败
                        alert("数据加载错误");
                    }
                });
            });
        </script>
    </body>
    </html>

核心在于$.ajax（…）部分，这里使用jquery前端框架简化一些js操作。  
**测试结果：**  
![这里写图片描述][70 2]

### 总结 ###

在完成该应用时，Ajax和JSON方面的知识挺容易理解的，反而是在使用JS，jquery和css前端部分知识的时候查找了大量的资料，遇到了很多问题，如HTML页面代码加载的顺序， < table >表单的优化，前端代码的调试。收获还是挺多的。

### 案例代码 ###

[https://github.com/yangsuperxiaolong/TestAjax][https_github.com_yangsuperxiaolong_TestAjax]

[70]: /images/20220518/82a56131fbdc4225a5618a2f25d795d3.png
[70 1]: /images/20220518/1e71db1b13494942a1678840aa0ace62.png
[70 2]: /images/20220518/4aec009f3a9c487bb0867528d220eba0.png
[https_github.com_yangsuperxiaolong_TestAjax]: https://github.com/yangsuperxiaolong/TestAjax