AJAX（框架第十四阶段）

最新推荐文章于 2022-08-17 12:02:39 发布

我爱我家7529

最新推荐文章于 2022-08-17 12:02:39 发布

阅读量495

点赞数

分类专栏：后端开发框架

本文链接：https://blog.csdn.net/qq_45427930/article/details/102943330

版权

SSM框架与AJAX框架整合项目

关于服务器端的响应方式

传统的响应方式有：转发、重定向，这2种响应方式基本上都确定了需要向客户端显示某个页面！而**显示页面**的响应方式通常是不推荐的！目前比较流行的是服务器端与客户端分离(前后端分离)的做法，即：服务器端的开发人员不需要关注客户端相关技术，也就不需要关注页面相关的问题！比较推荐的做法是：服务器只向客户端**响应数据**，并不关心数据的显示问题！

在SpringMVC项目中响应数据

创建**Maven Project**，**Group Id**为`cn.tedu`，**Artifact Id**为`ajax`，**Packaging**选择`war`。

生成**web.xml**；添加Tomcat运行环境；复制前序项目中的依赖；复制前序项目中**src/main/resources**下的配置文件；复制前序项目中**web.xml**中的配置。

复制当前项目中的**spring-??.xml**文件，粘贴为**spring-ajax.xml**，并删除**spring-ajax.xml**中现有的配置。

编辑**web.xml**，将加载的文件修改为**spring-ajax.xml**。

目标：假设向`http://localhost:8080/ajax/hello.do`发出请求后，希望响应正文。

在处理请求的方法之前添加`@ResponseBody`注解，即可表示**响应正文**，则方法的返回值会直接响应到客户端，并不会按照转发或重定向的方式进行处理！

**注意：SpringMVC框架默认设置了响应头中的Content-Type，将响应的编码设置为ISO-8859-1，所以，默认情况并不支持中文及中文的标点符号。**

响应数据的格式

由于处理请求的方法最终返回的是1个字符串，假设用户提交的是登录请求，则服务器端可以响应`1`或`0`分别表示成功或失败，但是，如果用户的请求是希望显示用户的个人资料，可能包含用户名、年龄、手机号码、邮箱等多项信息，使用1个字符串来表示时，就需要设置一些格式，否则，直接响应为`"root2513800138001root@tedu.cn"`这样是不便于被客户端处理的！

早期使用XML语法来组织这些数据，例如：

  <user>
        <name>root</name>
        <age>25</age>
        <phone>13800138001</phone>
        <email>root@tedu.cn</email>
    </user>

使用XML语法进行组织之后，响应的正文的长度增加了，但是，客户端使用XML解析技术就可以获取到各个属性的值！

当下比较推荐是使用JSON语法来组织数据，例如：

    {
        "name":"root",
        "age":25,
        "phone":"13800138001",
        "email":"root@tedu.cn",
        "skill":["JavaSE", "JavaOOP", "MySQL"],
        "department": {
            "id":6,
            "name":"软件研发部"
        }
    }

JSON数据格式

JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

整个JSON数据是1个**JSON对象**，**JSON对象**需要使用一对大括号`{}`框住；

每个**JSON对象**都可以有若干项属性的配置，其基本格式是`属性名:属性值`，多项属性配置之间使用逗号`,`分隔；

所有**属性名**都是字符串，应该使用双引号`""`框住，**属性值**是可以是字符串、数值、布尔值类型的，如果是字符串类型，仍需要使用双引号框住，如果是数值、布尔值，则不需要使用特殊符号框住值；

每个属性的值还可以是**数组类型**的，这样的值需要使用中括号`[]`框住，各数组元素之间使用逗号`,`分隔；

每个属性的值还可以是另一个**对象**，则重复以上规则。

解析JSON数据

新建html文档，添加`<script>`标签，在其中声明变量，变量的值就是JSON数据，然后直接获取各属性的值即可：

  let json = {
        "name":"root",
        "age":25,
        "phone":"13800138001",
        "email":"root@tedu.cn",
        "skill":["JavaSE", "JavaOOP", "MySQL"],
        "department": {
            "id":6,
            "name":"软件研发部"
        }
    };
    console.log(json.name);
    console.log(json.age);
    console.log(json.phone);
    console.log(json.email);
    console.log(json.skill.length);
    for (let i = 0; i < json.skill.length; i++) {
        console.log(json.skill[i]);
    }
    console.log(json.department);
    console.log(json.department.id);
    console.log(json.department.name);

在JavaScript中可以直接识别JSON对象，所以，直接调用变量的属性名即可访问！

在实际生产环境中，JSON数据可能来自于服务器端响应的正文，这段正文会是一个字符串格式的数据，而并不是JSON对象！

在JavaScript中，可以通过`JSON.parse(str)`将字符串转换为JSON对象！

服务器向客户端响应JSON格式的数据

首先，需要在**pom.xml**中添加`jackson-databind`依赖：

    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.8</version>
    </dependency>

然后，假设需要向客户端响应用户数据，先创建`User`用户数据类：

   public class User {
    
        private Integer id;
        private String username;
        private String password;
        private Integer age;
        private String phone;
        private String email;

        // SET/GET/toString

    }

然后，将处理请求的方法的返回值修改为`User`类型：

    @RequestMapping("hello.do")
    @ResponseBody
    public User showHello() {
        User user = new User();
        user.setId(11);
        user.setUsername("root");
        user.setPassword("8888");
        user.setAge(27);
        user.setPhone("13900139999");
        user.setEmail("root@163.com");
        return user;
    }

接下来，需要在**spring-ajax.xml**中添加：

    <!-- 注解驱动 -->
    <mvc:annotation-driven />

当访问`hello.do`时，服务器会向客户端响应：

    {"id":11,"username":"root","password":"8888","age":27,"phone":"13900139999","email":"root@163.com"}

这样的响应结果主要是Jackson框架实现的！

在SpringMVC中，如果方法的声明之前添加了`@ResponseBody`注解，表示**响应正文**，SpringMVC框架中有一系列的转换器(Converter)用于处理**如何将方法的返回值转换为响应的正文**，例如方法的返回值是`String`类型，SpringMVC框架就会使用`StringHttpMessageConverter`实现将返回值处理为响应结果，如果是其它已知的类型，也都有对应的转换器，如果是SpringMVC框架不识别的类型(例如自定义的类型)，在添加了Jackson框架的基础之上，就会自动使用Jackson框架中的转换器，而Jackson框架中的转换器的处理方式就是将返回的对象转换为JSON字符串！

当Jackson框架处理响应结果时，不只是将返回对象转换成JSON字符串而已，还设置了响应头(Response Headers)中的**Content-Type**，值为**application/json, charset=utf-8**，也就是**明确的声明了响应结果是JSON数据，且使用utf-8编码**

实现用户注册功能

1. 数据库相关功能

先创建`cn.tedu.ajax.UserMapper`接口，并在接口中定义抽象方法：

    Integer insert(User user);
    User findByUsername(String username);

在**src/main/resources/mappers**下复制得到**UserMapper.xml**，并

最低0.47元/天解锁文章

我爱我家7529

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX（框架第十四阶段）

目录SSM框架与AJAX框架整合项目关于服务器端的响应方式在SpringMVC项目中响应数据响应数据的格式JSON数据格式解析JSON数据服务器向客户端响应JSON格式的数据实现用户注册功能1. 数据库相关功能2. 控制器3. 使用AJAX处理页面提交请求项目结构src/main/javacn.tedu.ajaxHelloControll...
复制链接

扫一扫