SpringMVC对Ajax异步请求的支持

1、Ajax异步请求概念

1.1 AJAX: Ansyc Javascript And Xml (异步请求)

       异步是指基于Ajax的应用与服务器通信的方法。对于传统的Web应用,每次用户发送请求或向服务器请求获得新数据时,浏览器都会完全丢弃当前页面,而等待重新加载的页面。在服务器完全响应之前,用户浏览器将是一片空白,用户的动作必须中断。异步是指用户发送请求后,完全无须等待,请求在后台发送,不会阻塞用户的当前活动,用户无须等待第一次请求得到完全响应,就可以立即发送第二次请求。简单的说,异步请求不会刷新当前html页面。
异步指的是服务器端响应数据的获取方式。

同步:

异步:

1.2 异步&同步的区别

1.同步请求:

请求的过程:浏览器(当前的html页面会丢弃) —> http协议 —> Web服务器(tomcat)
响应的过程:Web服务器(tomcat) —> http协议 –> 返回一个新html页面.

2.异步请求:

请求的过程:浏览器(当前的html页面不会丢弃) —> Ajax引擎(http协议) —> Web服务器(tomcat)
响应的过程:Web服务器(tomcat) —> 准备部分数据 –> Ajax引擎(http协议) –> DOM编程.
总而言之,异步请求只是局部刷新页面,同步请求会全部刷新当前的页面

2、jQuery框架的异步请求和处理

1.$.ajax([settings]) —jQuery核心处理异步请求的方法:
语法:

$.ajax([settings])

最简单的情况下,$.ajax() 可以不带任何参数直接使用。具体语法格式都有哪些参数的参照:https://www.w3school.com.cn/jquery/ajax_ajax.asp

2.$.post()
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:

$.post(url, data, function(data, status){
// status(状态码): success 、error
// data : 响应数据
}, dataType);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 function 参数是请求成功后所执行的函数名,其中data是响应的数据,status是状态码
可选的dataType参数是服务器响应返回的数据

3.$.get()
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(url, data, function(data, status){
// status(状态码): success 、error
// data : 响应数据
}, dataType);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 function 参数是请求成功后所执行的函数名,其中data是响应的数据,status是状态码
可选的dataType参数是服务器响应返回的数据

3、SpringMVC支持ajax异步请求和处理返回json数据

3.1 数据绑定@RequestBody/@ResponseBody
  • @RequestBody
        功能 :用于将HttpServletRequest的getInputStream()的内容绑定到方法入参
    例如:

@RequestMapping(value = “/hello”)
public String handleRequest(@RequestBody String body){
//body参数就被请求参数自动绑定
}

  • @ResponseBody
        功能:被ResponseBody修饰的方法的返回值会被作为响应体

@RequestMapping(value = “/hello”)
@ResponseBody
public User handleRequest(Ueser user){

return User; //返回值会被作为响应体,而且如果返回值是对象时SpringMVC会自动转换成JSON给页面
}

3.2 使用@RequestBody/@ResponseBody来支持Ajax

可以使用@RequestBody来自动获取Ajax上传的数据,同时也可以使用@ResponseBody,把要返回的对象自动拼成JSON的格式返回。当然,需要加入几个jackson的包,这里加入了:
jackson-core-2.9.3.jar、jackson-annotations-2.9.3.jar、jackson-databind-2.9.3.jar,Maven依赖如下:

 <!--jackson的三个依赖包-->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.9.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-core</artifactId>
	<version>2.9.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-annotations</artifactId>
	<version>2.9.3</version>
</dependency>

Controller


  /**
 * ResponseBody:用于将ResponseBody方法的返回值作为响应体
 * RequestBody:用于将HttpServletRequest的getInputStream()内容绑定到入参
 *
 * @param users
 * @return
 */
@ResponseBody
@RequestMapping(value = "/getAllUserByAJAX", produces = "application/json;charset=UTF-8")
public List<User> getAllUserByAJAX(@ModelAttribute("users") List<User> users) {
	return users;
}


/**
 * RequestBody:将请求体的数据绑定到入参
 *
 * @param user
 * @return
 */
@ResponseBody
@RequestMapping("/testRequestBody")
public User testRequestBody(@RequestBody User user, Model model) {
	System.out.println("请求的数据:"+user);
	model.addAttribute("requestInfo", user);
	return user;
}

/**
 * 提前把全部信息查询好放在隐含模型中
 * @param model
 */
@ModelAttribute("users")
public void getAll(Model model) {
	IUserService userService = new IUserServiceImpl();
	List<User> lists = userService.getUser(null, null, null);
	model.addAttribute("users", lists);
}
  1. 通过AJAX获得服务器数据的页面:
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
  pageContext.setAttribute("ctp", request.getContextPath());
%>

<html>
<head>
<title>ajax</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	$().ready(function () {
		$("#first").click(function () {
			alert("adacd");
			$.ajax({
				url: "${ctp}/getAllUserByAJAX",
				type: "GET",
				success: function (data) {
					//console.log(data)
					$.each(data, function () {
						var userInfo = this.name + "---" + this.age + "---" + this.email;
						$("#user").append(userInfo + "<br/>");
					})
				}
			});
			return false;
		});
	});

</script>
</head>
<body>

<%=new Date()%>
<div id="user">

</div>
<a id="first" href="${ctp}/getAllUserByAJAX">获取全部用户信息</a>
</body>
</html>

测试结果

  1. 通过AJAX向服务器发JSON数据,服务器返回JSON数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
   pageContext.setAttribute("ctp", request.getContextPath());
%>

<html>
<head>
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function () {
	$("#first").click(function () {
		//点击发送JSON数据给服务器
		$.ajax({
			url: "${ctp}/testRequestBody",
			type: "POST",
			contentType:"application/json",     //请求的文本格式:json
			data: JSON.stringify({name: $("#username").val(), age: $("#userage").val(), email: $("#userEmail").val()}),  //给服务器提交的数据
			dataType: "json",     //服务器返回的数据类型
			success: function (data) {
				var userInfo = data.name + "---" + data.age + "---" + data.email;
				$("#users").append(userInfo + "<br/>");
			}
		});
		return false;
	});
});
</script>
</head>
<body>
<form action="${ctp}/testRequestBody" method="post">
<input id="username" name="username" type="text"/>
<input id="userage" name="age" type="text"/>
<input id="userEmail" name="enail" type="email"/>
</form>
<button type="button"><a id="first" href="${ctp}/testRequestBody">AJAX发送JSON数据给服务器</a></button>
<div id="users">

</div>
</body>
</html>

测试结果

留言区

还能输入500个字符