【愚公系列】2023年06月 Java教学课程 139-Spring MVC框架的前后端数据交互

一、异步调用

异步调用是指在不阻塞当前线程的情况下，开始一个调用的执行。当异步调用开始时，调用方可以继续执行其他任务，而不必等待调用完成。当调用完成时，被调用的代码可以通过回调函数或其他机制通知调用方。这种方式可以提高程序的效率和响应性。

1.1 发送异步请求

1、ajax请求数据

<a href="javascript:void(0);" id="testAjax">访问controller</a>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#testAjax").click(function(){
//发送异步调用
$.ajax({
//请求方式：POST请求
type:"POST",
//请求的地址
url:"ajaxController",
//请求参数（也就是请求内容）
data:'ajax message',
//响应正文类型
dataType:"text",
//请求正文的MIME类型
contentType:"application/text",
});
});

//为id="testAjaxPojo"的组件绑定点击事件
$("#testAjaxPojo").click(function(){
$.ajax({
type:"POST",
url:"ajaxPojoToController",
data:'{"name":"Jock","age":39}',
dataType:"text",
contentType:"application/json",
});
});

//为id="testAjaxList"的组件绑定点击事件
$("#testAjaxList").click(function(){
$.ajax({
type:"POST",
url:"ajaxListToController",
data:'[{"name":"Jock","age":39},{"name":"Jockme","age":40}]',
dataType:"text",
contentType:"application/json",
});
});

//为id="testAjaxReturnString"的组件绑定点击事件
$("#testAjaxReturnString").click(function(){
//发送异步调用
$.ajax({
type:"POST",
url:"ajaxReturnString",
//回调函数
success:function(data){
//打印返回结果
alert(data);
}
});
});

//为id="testAjaxReturnJson"的组件绑定点击事件
$("#testAjaxReturnJson").click(function(){
//发送异步调用
$.ajax({
type:"POST",
url:"ajaxReturnJson",
//回调函数
success:function(data){
alert(data);
alert(data['name']+" , "+data['age']);
}
});
});

//为id="testAjaxReturnJsonList"的组件绑定点击事件
$("#testAjaxReturnJsonList").click(function(){
//发送异步调用
$.ajax({
type:"POST",
url:"ajaxReturnJsonList",
//回调函数
success:function(data){
alert(data);
alert(data.length);
alert(data[0]["name"]);
alert(data[1]["age"]);
}
});
});
});
</script>

2、响应数据

• 名称： @RequestBody

• 类型： 形参注解

• 位置：处理器类中的方法形参前方

• 作用：将异步提交数据组织成标准请求参数格式，并赋值给形参

@RequestMapping("/ajaxController")
//使用@RequestBody注解，可以将请求体内容封装到指定参数中
public String ajaxController(@RequestBody String message){
System.out.println("ajax request is running..."+message);
return "page.jsp";
}

@RequestMapping("/ajaxPojoToController")
//如果处理参数是POJO，且页面发送的请求数据格式与POJO中的属性对应，@RequestBody注解可以自动映射对应请求数据到POJO中
//注意：POJO中的属性如果请求数据中没有，属性值为null，POJO中没有的属性如果请求数据中有，不进行映射
public String ajaxPojoToController(@RequestBody User user){
System.out.println("controller pojo :"+user);
return "page.jsp";
}

@RequestMapping("/ajaxListToController")
//如果处理参数是List集合且封装了POJO，且页面发送的数据是JSON格式的对象数组，数据将自动映射到集合参数中
public String ajaxListToController(@RequestBody List<User> userList){
System.out.println("controller list :"+userList);
return "page.jsp";
}

//使用注解@ResponseBody可以将返回的页面不进行解析，直接返回字符串，该注解可以添加到方法上方或返回值前面
@RequestMapping("/ajaxReturnString")
// @ResponseBody
public @ResponseBody String ajaxReturnString(){
System.out.println("controller return string ...");
return "page.jsp";
}


@RequestMapping("/ajaxReturnJson")
@ResponseBody
//基于jackon技术，使用@ResponseBody注解可以将返回的POJO对象转成json格式数据
public User ajaxReturnJson(){
System.out.println("controller return json pojo...");
User user = new User();
user.setName("Jockme");
user.setAge(39);
return user;
}

@RequestMapping("/ajaxReturnJsonList")
@ResponseBody
//基于jackon技术，使用@ResponseBody注解可以将返回的保存POJO对象的集合转成json数组格式数据
public List ajaxReturnJsonList(){
System.out.println("controller return json list...");
User user1 = new User();
user1.setName("Tom");
user1.setAge(3);

User user2 = new User();
user2.setName("Jerry");
user2.setAge(5);

ArrayList al = new ArrayList();
al.add(user1);
al.add(user2);

return al;
}

二、异步请求-跨域访问

跨域请求是指在一个域下的网页请求另一个域下的资源时，浏览器会阻止这种行为。相应的解决方案包括JSONP、CORS和代理。

1.1 跨域访问介绍

• 当通过域名A下的操作访问域名B下的资源时，称为跨域访问

• 跨域访问时，会出现无法访问的现象

1.2 跨域环境搭建

• 为当前主机添加备用域名

– 修改windows安装目录中的host文件

– 格式： ip 域名

• 动态刷新DNS

– 命令： ipconfig /displaydns

– 命令： ipconfig /flushdns

1.3 跨域访问支持

• 名称： @CrossOrigin

• 类型： 方法注解 、 类注解

• 位置：处理器类中的方法上方 或 类上方

• 作用：设置当前处理器方法/处理器类中所有方法支持跨域访问

• 范例：

@RequestMapping("/cross")
@ResponseBody
//使用@CrossOrigin开启跨域访问
//标注在处理器方法上方表示该方法支持跨域访问
//标注在处理器类上方表示该处理器类中的所有处理器方法均支持跨域访问
@CrossOrigin
public User cross(HttpServletRequest request){
System.out.println("controller cross..."+request.getRequestURL());
User user = new User();
user.setName("Jockme");
user.setAge(39);
return user;
}