AJAX和JSON笔记

### 1. 响应正文
 
传统的处理请求时，响应的方式有转发或重定向，无论是哪种，最终都会直接呈现某个页面给客户端，这样做的缺点在于：
 
1. 用户体验可能不好，例如：用户注册时，提交的用户名被占用，出现错误，转发到错误页面，而用户操作时就必须从错误页面返回注册页，可能丢失原输入的内容，需要重新输入；
2. 流量消耗可能较大，例如：用户注册时，客户端所需的只是“1-成功；2-失败”等类似的结果即可，并不一定需要整个页面，同时，流量消耗较大也会对用户体验有不好的影响；
3. 可能不太适合多种不同的客户端，例如网页端、Android手机端、Android平板电脑端、iOS手机端、iOS平板电脑端。
 
所以，解决以上问题的方案就是：服务器端只提供服务，不处理界面，当客户端提交某种请求后，服务器端只响应相关数据，而不再响应页面，至于页面的处理，就交给各个客户端去处理。
 
假设：某用户提交了登录请求到`http://localhost:8080/项目/user/handle_login.do`，同时，还提交了参数`username`和`password`表示用户名和密码，服务器端对用户名和密码进行了判断，需要给出直接的响应结果，而不再转发或重定向：
 
    @RequestMapping("/handle_login.do")
    @ResponseBody
    public String handleLogin(
            String username, String password) {
        return "OK";
    }
 
当添加了`@ResponseBody`后，处理请求的方法的返回值就是**响应正文**，而不再表示转发或重定向。
 
假设：验证登录的规则是：仅`root/1234`这组用户名和密码可以登录，登录成功时提示信息，登录失败时也提示出错的原因。
 
 
 
### 2. JSON数据格式
 
为了更好的实现“服务器端向客户端响应数据”，能够满足各种不同的数据格式要求，应该将服务器端响应的内容有规则的组织起来，例如，可以使用XML语法来组织数据：
 
    <result>
        <state>1</state>
        <message>登录成功</message>
    </result>
 
或：
 
    <result>
        <state>2</state>
        <message>您输入的用户名XXX不存在！</message>
    </result>
 
或：
 
    <result>
        <state>1</state>
        <data>
            <user>
                <id>1</id>
                <username>Mike</username>
                <password>1234</password>
            </user>
            <user>
                <id>2</id>
                <username>Jack</username>
                <password>1234</password>
            </user>
            <user>
                <id>3</id>
                <username>Lucy</username>
                <password>1234</password>
            </user>
        </data>
    </result>
 
但是，使用XML来组织数据也存在一定的问题：
1. 解析难度略大；
2. 节点产生的不必要数据太多。
 
当前，主流的解决方案是使用JSON格式来组织数据：
 
    {
        "state":1,
        "message":"登录成功"
    }
 
或：
 
    {
        "state":2,
        "message":"您输入的用户名XXX不存在！"
    }
 
或：
 
    {
        "state":1,
        "data":[
            {
                "id":1,
                "username":"Mike",
                "password":"1234"
            },
            {
                "id":2,
                "username":"Jack",
                "password":"1234"
            },
            {
                "id":3,
                "username":"Lucy",
                "password":"1234"
            }
        ]
    }
 
可以看到，JSON的基本语法格式是：
1. 整个JSON数据使用一对大括号框住；
2. 可以有若干个属性与值的配置，属性与值之间使用冒号分隔，多个属性的配置之间使用逗号分隔，属性名应该使用双引号框住，属性的值如果是数值或布尔值可以直接写，如果是字符串则需要使用双引号框住。
3. JSON中也可以有数据，使用`[]`框住数组数据，数组中的各元素之间使用逗号进行分隔；
4. JSON中也可以有对象，甚至整个JSON数据就是一个对象，所有对象都应该使用`{}`框住，各属性的配置之间使用逗号分隔；
5. 以上各种不同的配置之间可以组合，例如数组的元素可以是对象，而对象中某属性的值也可以是数组。
 
### 3. 服务器响应JSON数据
 
通常，服务器向客户端响应的数据都会包括几项内容：
1. 状态码：服务器与客户端约定某个数值表示某种意义，例如约定1表示操作成功，0表示操作失败，或其它数字表示某种意义；
2. 消息：通常是对操作失败时的错误的描述，用于被客户端用于提示用户；
3. 数据：某些请求的目标只是希望得到操作成功与否的结果，例如登录、注册等，而某些请求的目标是希望获取数据的，例如显示用户列表等，对于获取数据的请求，则应该专门给予数据；
 
为了设计一个通用的响应的类型，可以：
 
    public class ResponseResult<E> {
        private Integer state;
        private String message;
        private E data;
        // SET/GET，Serialiazable
    }
 
然后，添加Jackson依赖：
 
    <!-- Jackson -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.8</version>
    </dependency>
 
最后，将处理请求的方法的返回值类型修改为`ResponseResult`类型，并且，在方法体中，根据不同的登录结果，为`ResponseResult`中的属性赋予不同的值即可：
 
    @RequestMapping("/handle_login.do")
    @ResponseBody
    public ResponseResult<Void> handleLogin(
            String username, String password) {
        ResponseResult<Void> rr
            = new ResponseResult<Void>();
        if ("root".equals(username)) {
            if ("1234".equals(password)) {
                // 登录成功
                rr.setState(1);
                rr.setMessage("登录成功");
            } else {
                // 密码错
                rr.setState(2);
                rr.setMessage("密码错");
            }
        } else {
            // 用户名错
            rr.setState(3);
            rr.setMessage("用户名错");
        }
        return rr;
    }
 
在SpringMVC框架中，当响应正文时（方法添加了`@ResponseBody`时），框架会根据方法的返回值类型寻找匹配的转换器，框架本身支持多款转换器，所以，会一一尝试，直到找到匹配的，例如返回String类型，就会使用内置的字符串的转换器（`StringHttpMessageConverter`），当把返回值声明为自定义的`ResponseResult`时，SpringMVC框架默认并没有内置相关的转换器，就会自动Jackson（Jackson中包括支持任何类型的转换器），而Jackson中的转换器的工作模式就是将响应的对象转换为JSON格式的字符串，并且，在响应头（Response Headers）中设置响应内容为`application/json,charset=utf8`。
 
### 4. 在Javascript中访问JSON数据
 
Javascript是默认直接识别JSON数据的，不需要编写特殊的解析程序。
 
假设存在：
 
    var json = {  
        "state":1,  
        "message":"登录成功！",  
        "data": [
            {
                "id":31,
                "username":"Jack",
                "password":"123456"
            },  
            {
                "id":35,
                "username":"Lucy",
                "password":"888888"
            },  
            {
                "id":36,
                "username":"Mike",
                "password":"654321"
            }
        ]
    };
 
通过`json.state`即可以访问到`"state"`属性的值，同理，通过`json.message`就可以访问到`"message"`属性的值，由于`"data"`属性的值的类型是数组，直接访问时，会显示为数组元素的输出，应该通过例如`json.data[1]`访问其中的某个元素，当然，该数组中的元素都是JSON对象，可以继续向下访问其中的某个属性，例如`json.data[1].username`即可获取到`"Lucy"`值。
 
在JSON中的数组也是可以循环或遍历的：
 
    for (var i = 0; i < json.data.length; i++) {
        console.log(json.data[i].id);
        console.log(json.data[i].username);
        console.log(json.data[i].password);
        console.log("");
    }
 
但是，在绝大部分情况下，获取到的JSON数据可能并不是一个JSON对象，而只是符合JSON语法的字符串而已，所以，还需要通过`JSON.parse()`函数将字符串转换为JSON对象：
 
    var json = JSON.parse(str);
 
### 5. AJAX
 
AJAX用于提交异步请求。
    //$("#username-hint")：或取当前元素对象。
    // 为按钮绑定单击事件
    $("#btn-login").click(function() {
        $("#username-hint").empty();
        $("#password-hint").empty();
        // 发出异步请求，获取响应
        // 调用$.ajax()函数即可发出请求并处理响应结果
        // $.ajax()函数的参数是JSON对象
        // url：把请求提交到哪里，相当于<form>中的action
        // data：提交到服务器端的数据，格式：param1=value1&param2=value2
        // type：提交方式，取值为POST或GET
        // dataType：服务器端响应的数据的类型，可以是text、json、xml，取决于服务器响应时的响应头中例如"application/json"
        // success：服务器端成功响应时的回调函数，函数的参数就是服务器端响应的数据，并且已经转换为指定的格式
        var u = $("#username").val();
        var p = $("#password").val();
        $.ajax({
            "url":"user/handle_login.do",
            "data":"username=" + u + "&password=" + p,
            "type":"POST",
            "dataType":"json",
            "success":function(json) {
                if (json.state == 1) {
                    alert("登录成功！");
                } else if (json.state == 2) {
                    $("#password-hint").html(json.message);
                } else if (json.state == 3) {
                    $("#username-hint").html(json.message);
                } else {
                    alert("发生未知错误！");
                }
            }
        });
    });
    </script>

参考链接：https://www.cnblogs.com/package-java/p/10385788.html