Json与Ajax

 

服务器响应的正文格式--JSON格式

       JSON是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
        通常，服务器向客户端响应的数据可能不只是1个数据，以登录操作为例，也许可以响应为1表示登录成功，使用2表示登录失败且是因为用户名错误，使用3表示密码错误，则客户端就可以通过对这个值的判断，得知当前操作结果，但是，其它操作可能会需要更多的数据，例如“客户端尝试获取当前登录的用户信息”，需要响应的数据可能包括：用户名、手机号码、电子邮箱、年龄等一系列数据，由于响应结果只是1个字符串，就需要把这些数据很好的组织起来，才可以方便客户端从这1个字符串中获取其中某部分的数据，否则，如果只是响应为"root13800138001root@163.com26"这样，客户端就无法处理这个响应结果。
        早期会使用XML语法来组织这些数据，如：

<user>
    <username>Tom</username>
    <age>26</age>
    <address>BieJing</address>
    <email>root@qq.com</email>
</user>

使用XML会存在的问题：
1.解析难度较大      2.数据量略大，传输略慢，响应略慢，流量消耗略大，用户体验略差。

目前推荐使用组织数据的格式为【Json】格式，那么以上数据表示形式变为：

{
    "username":"Tom",
    "age":26,
    "address":"BeiJing",
    "email":"root@qq.com"
    "skill":["Java","JS","JQ","SSM"],//加入数组
    "department":{//加入Json对象
        "id":"304",
        "deptname":"HR",    
    }
}

Json是JavaScript默认识别的对象，可以直接得到其属性

var json = {
	"username":"Tom",
	"age":26,
	"address":"BeiJing",
	"skill":["JAVA","JS","JQ","SSM"]
}
console.log(json.address);//BeiJing
console.log(json.skill[2]);//JQ

Json的格式

• 使用{ }表示对象，整个JSON数据就是1个对象；

• 所有的属性名都是【字符串】类型的，在JavaScript中，可以使用单引号或者双引号包含，因为Json数据可能在多种不同的编程语言中都出现，一般推荐使用双引号，属性值如果是字符串，也需要使用双引号包含，如果是数值或者布尔值，则可以不用双引号框柱，属性名和属性值使用【冒号】分隔，多个属性的配置之间使用【逗号】分隔；

• 属性值的类型还可以是数组，使用中括号[]框柱数组的各元素，各元素之间使用逗号,分隔，在JavaScript中处理时，使用例如【json.skill】就可以获取到整个数组，使用【json.skill.length】就可以获取数组的长度，使用【json.skill[0]】就可以获取数组中下标为0的元素，也可以使用循环语法进行循环；

• 属性值的类型还可以是另一个对象，使用{ }表示对象。

       如果在JavaScript中，得到是一个使用Json语法组织的字符串，而不是Json对象，可以调用【JSON.parse(str)】函数，将字符串转换为JSON对象。

var js = '{"username":"Tom"}';
console.log(js.username);//undefined
var jsn = JSON.parse(js);
console.log(jsn.username);//Tom

服务端如何实现响应Json格式数据

1.添加【jackson】依赖

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

2.自定义响应结果类

public class JsonResult {

    private Integer state;
    private String message;

    public Integer getState() {
        return state;
    }

    public void setState(Integer state) {
        this.state = state;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

}

3.修改返回值方法,返回上述自定义响应类型

@RequestMapping("login.do")
@ResponseBody
public JsonResult login(
    @RequestParam("username") String username,
    @RequestParam("password") String password) {
    Integer state;
    String message = null;

    if ("root".equals(username)) {
        if ("1234".equals(password)) {
            state = 1;
        } else {
            state = 3;
            message = "密码错误！";
        }
    } else {
        state = 2;
        message = "用户名不存在！";
    }

    JsonResult jsonResult = new JsonResult();
    jsonResult.setState(state);
    jsonResult.setMessage(message);
    return jsonResult;
}

如果直接运行，会提示406错误：

HTTP Status 406 – Not Acceptable

需要在spring.xml中添加配置：

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

   然后，控制器中处理请求的方法响应的正文就是Json格式的字符串了。
    在控制器中响应正文时，需要添加【@ResponseBody】注解，SpringMVC框架内置了一系列的【转换器Converter】，用于将方法的返回值转换为响应的正文，在这一系列的转换器中，SpringMVC设计了对应关系和优先级，例如，当方法的返回值类型是【String】时，就会自动调用【StringHttpMessageConverter】，当项目中添加了【jackson-databind】依赖时，如果方法的返回值类型是SpringMVC默认不识别的，就会自动使用Jackson依赖中的转换器！Jackson依赖还会将响应头(Response Headers)中的【Content-Type】设置为【application/json,charset=utf-8】。

    另外，介绍一个注解【@JsonInclude(value=Include.NON_NULL)】，针对响应的json字符串中包括许多为【null】的属性，可以在ui应的抒情之前添加该注解，则当属性值为null时，该属性不会被序列化到Json字符串中，也可以将该注解添加在类的声明之前，则该类中所有属性均有对应的效果，如果希望项目中所有序列化json的过程都有这样的效果，则可以在配置文件【application.properties】中添加如下配置：

spring.jackson.default-property-inclusion = NON_NULL

AJAX

       AJAX = Asynchronous JavaScript and XML（异步的JavaScript和XML）。AJAX不是新的编程语言，而是一种使用现有标准的新方法。AJAX是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下，实现局部数据刷新，如更换页面验证码。在不重新加载整个页面的情况下，重置登录数据等。

       在实际实现时，通常是基于jQuery框架实现AJAX访问，主要是因为原生技术的代码比较繁琐，且存在浏览器的兼容性问题，在jQuery中，定义了【$ajax()】函数，用于处理AJAX请求，调用该函数即可实现异步访问：

<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#btn-login").click(function(){
    // $.ajax()函数的参数是1个JSON对象
    // url：请求提交到哪里
    // data：需要提交的请求参数
    // type：请求类型
    // dataType：服务器端响应的数据类型，可以是text/xml/json，取值取决于Response Headers中的Content-Type
    // success：服务器端HTTP响应码是2xx时的回调(callback)函数，函数的参数就是服务器端响应的正文结果
    $.ajax({
        "url":"user/login.do",
        "data":$("#form-login").serialize(),
        "type":"post",
        "dataType":"json",
        "success":function(result) {
            if (result.state == 1) {
                alert("登录成功！");
            } else {
                alert(result.message);
            }
        }
    });
});
</script>

       $("#form-login").serialize()方法要求，form表单中，各个提交的参数，名字要与服务器端保持一致，如input框的【name】属性，服务器端要求传入参数【username】，则name属性也必须为【name = “username”】。