Ajax实现异步请求Demo

文章目录

1、JSON
2、Ajax
3、@ResponseBody注解
4、@RequestBody注解
5、Demo1
6、Demo2

1、JSON

1、Json字符串的两种格式：

JSON对象字符串格式：’{“key1”:“value1”,“key2”:“value2”}’

JSON数组字符串格式：’[value1,value2,value3,…]’

2、JSON 与 JS 对象的关系：

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

//这是一个对象，注意键名也是可以使用引号包裹的
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
var obj = {a: 'Hello' , b: 'World'};
//这是一个 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"} ;

3、JSON 与 JS 之间的互换：

要实现从JS对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

//结果是 '{"a": "Hello", "b": "World"}'
var json = JSON.stringify({a: 'Hello', b: 'World'});

要实现从 JSON 转换为JS对象，使用 JSON.parse() 方法：

//结果是 {a: 'Hello', b: 'World'}
var obj = JSON.parse('{"a": "Hello", "b": "World"}');

2、Ajax

Ajax实现异步请求，通过触发时间发送请求，而不是通过url:

同步的概念应该来自操作系统中同步的概念，不同进程为协同某项工作，而在先后次序上调整（通过阻塞，唤醒的方式）。同步强调顺序性，谁先谁后，异步不存在这种顺序性。

同步：浏览器访问服务器的请求，用户看得到浏览器页面的刷新。当页面提交请求后，整个页面是不能点击的，只有等服务器处理完请求并响应给浏览器，用户才能继续点击页面，进行下一步操作。
浏览器访问服务器请求，用户正常操作，等请求完，用户看不到页面刷新，也能出现新内容。当通过ajax提交请求后，整个页面还是可以点击的，进行下一步操作。

3、@ResponseBody注解

将方法的返回值，以特定的格式写入到response的body区域，进而将数据返回给客户端。如果返回值是字符串，那么直接将字符串写到客户端；如果是一个对象，将对象转化为json串，写到客户端。当方法上面没有写ResponseBody,底层会将方法的返回值封装为ModelAndView对象，走视图解析器。

注意：在使用 @RequestMapping后，返回值通常解析为跳转路径，但是加上 @ResponseBody 后返回结果不会被解析为跳转路径，而是直接写入 HTTP response body 中。比如异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。@RequestBody 将 HTTP 请求正文插入方法中，使用适合的 HttpMessageConverter 将请求体写入某个对象。

4、@RequestBody注解

该注解用于读取Request请求的body部分数据，使用系统默认配置的HttpMessageConverter进行解析，然后把相应的数据绑定到要返回的对象上；再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

5、Demo1

1、pojo类：

public class Customer {
    private String username;
    private String password;
}

2、Ajax提交数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
    <form>
        用户名：<input type="text" name="username" id="username"/><br>
        密码：<input type="text" name="password" id="password" /><br>
        <input type="button" value="测试json交互" onclick="testjson()"/>
    </form>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script>
        // 触发点击事件
        function testjson() {
            //通过id选择器，获取用户输入的用户名和密码：
            var username = $("#username").val();
            var password = $("#password").val();

            $.ajax({
                //请求路径
                url:"/community/alpha/ajax1",
                //请求方式，因为需要提交数据，肯定是post请求
                type:"post",
                // data:{"username":username,"password":password},
                //将js对象转换为json字符串
                data:JSON.stringify({username:username,password:password}),
                //发送请求的数据格式为json字符串
                contentType:"application/json; charset=UTF-8",
                //定义回调响应的数据格式为Json字符串，该属性可以省略
                dataType:"json",
                //成功响应的结果，data是个js对象
                success:function (data) {
                    if(data!=null){
                        console.log(typeof (data));
                        console.log(data);
                    }
                },
                error:function (data) {
                    alert(data);
                }
            });
        }
    </script>
</body>
</html>

3、处理请求，返回 json 格式的数据，返回到页面是一个json格式的数据

@RequestBody用于将请求中的Json格式的数据绑定到形参Customer上：

@ResponseBody注解直接返回Customer对象（当返回pojo时，默认转换为json格式数据进行响应）

@Controller
@RequestMapping("/alpha")
public class AlphaController {
    @RequestMapping(path="/ajax1")
    @ResponseBody
    public Customer testJson(@RequestBody Customer customer){
        //接收的Json格式数据
        System.out.println(customer);//Customer{username='zhangsan', password='123'}
        //返回Json格式的响应
        return customer;
    }
}

4、结果：可以看到最终得到json数据，但是是一个json对象：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDiwSrOz-1588918769542)(C:\Users\hh\Desktop\秋招面试准备\assets\image-20200508134737762.png)]$

6、Demo2

1、Ajax提交数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
    <form>
        用户名：<input type="text" name="username" id="username"/><br>
        密码：<input type="text" name="password" id="password" /><br>
        <input type="button" value="测试json交互" onclick="send()"/>
    </form>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script>
        function send() {
            var username = $("#username").val();
            var password = $("#password").val();
            $.post(
                "/community/alpha/ajax",
                {"username":username,"password":password},
                function(data) {
                    console.log(typeof(data));
                    console.log(data);

                    //将字符串转换为Js对象
                    data = $.parseJSON(data);
                    console.log(typeof(data));
                    //调用js对象的属性
                    console.log(data.username);
                    console.log(data.password);
                }
            );
        }
    </script>
</body>
</html>

2、处理请求：

@Controller
@RequestMapping("/alpha")
public class AlphaController {
    @RequestMapping(path = "/ajax", method = RequestMethod.POST)
    @ResponseBody
    public String testAjax(String username, int password) {
        JSONObject json = new JSONObject();
        json.put("username",username);
        json.put("password",password);
        //将json对象转换为json字符串
        return json.toJSONString();
    }
}

3、结果：最终得到的就是一个json字符串，而不是一个js对象

在这里插入图片描述
Spring首先根据请求头或响应头的Accept属性选择匹配的HttpMessageConverter，进而根据参数类型和泛型类型的过滤得到匹配的HttpMessageConverter

@RequestBody：
该注解用于读取Request请求的body部分数据，使用系统默认配置的HttpMessageConverter进行解析，然后把相应的数据绑定到要返回的对象上；
再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

@RequestBody注解时：根据Request对象header部分的Content-Type类型，逐一匹配合适的HttpMessageConverter来读取数据

@ResponseBody：
该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。
返回的数据不是html标签的页面，而是其他某种格式的数据时（如json、xml等）使用；

@ResponseBody注解时：根据Request对象header部分的Accept属性（逗号分隔），逐一按accept中的类型，去遍历找到能处理的HttpMessageConverter；

MappingJacksonHttpMessageConverter 调用了 objectMapper.writeValue(OutputStream stream, Object)方法，使用@ResponseBody注解返回的对象就传入Object参数内。

追风筝的人～

原创文章 723 获赞 153 访问量 18万+

关注他的留言板