【Ajax学习】处理后端传回的json数据（基于SSM框架）

一、什么是异步请求

异步请求，用户在浏览器发送请求，浏览器会把请求交给代理对象–XMLHttpRequest，由代理对象向服务器发起请求，并接受和解析服务器响应的数据，并把数据更新到浏览器指定的控件上，从而实现页面数据的局部刷新。与其相对的同步请求，则是浏览器会立即发送请求到服务器，服务器处理请求的过程，浏览器会处于等待的状态，服务器处理完请求后把数据响应给浏览器并覆盖浏览器内存中原有的数据，浏览器会刷新重新加载整个页面以展示新的数据。

例子：百度搜索框，输入关键字，搜索框下面的词条响应数据。
（通过js监听键盘的按下，发送异步请求）

二、什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。JSON建构于： “名称/值”对的集合。按照最简单的形式，可以用下面这样的 JSON 表示 “名称 / 值对” ：{ “name”: “datou” }。

三、为什么要使用异步请求

简单概括一下：

1. 前后端分离
2. 快速响应页面数据、提升用户体验
3. 高可伸缩性，避免线程堵塞
   …
   其他博主的文章：为什么需要异步？

四、Ajax实现异步请求

1.后端返回json数据（基于SSM框架）

首先声明了一个封装数据返回数据的结果集类，以及一个person实体类，在TestController类中，声明了一个getJsonData()的方法，其路径为"/getJsonData"，用于初始化person对象数据，最后返回person对象。需要注意的是：这里使用了@ResponseBody注解，其作用是将java对象转为json格式的数据。

封装返回数据的结果集类：

public class ResultInfo {
   


    /**
     * 操作的状态码：
     * 成功为1，失败为0，成功但警告为3
     */
    private Integer status;

    /**
     * 返回的结果集
     */
    private Object data;

    /**
     * 返回的相关信息
     */
    private String message;


    public ResultInfo(Integer status, Object data, String message) {
   
        this.status = status;
        this.data = data;
        this.message = message;
    }


    public static ResultInfo successInfo() {
   
        return successInfo(null, null);
    }

    public static ResultInfo successInfo(String message) {
   
        return successInfo(message, null);
    }

    public static ResultInfo successInfo(String message, Object data) {
   
        return new ResultInfo(1, data, message);
    }

    public static ResultInfo failInfo() {
   
        return failInfo(null, null);
    }

    public static ResultInfo