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依赖如下: ```xml com.fasterxml.jackson.core jackson-databind 2.9.3 com.fasterxml.jackson.core jackson-core 2.9.3 com.fasterxml.jackson.core jackson-annotations 2.9.3 ``` Controller ```java /** * ResponseBody:用于将ResponseBody方法的返回值作为响应体 * RequestBody:用于将HttpServletRequest的getInputStream()内容绑定到入参 * * @param users * @return */ @ResponseBody @RequestMapping(value = "/getAllUserByAJAX", produces = "application/json;charset=UTF-8") public List getAllUserByAJAX(@ModelAttribute("users") List 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 lists = userService.getUser(null, null, null); model.addAttribute("users", lists); } ``` 1. 通过AJAX获得服务器数据的页面: ```jsp <%@ page import="java.util.Date" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% pageContext.setAttribute("ctp", request.getContextPath()); %> ajax <%=new Date()%>
获取全部用户信息 ``` 测试结果
2. 通过AJAX向服务器发JSON数据,服务器返回JSON数据 ```jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% pageContext.setAttribute("ctp", request.getContextPath()); %> Title
``` 测试结果

留言区

还能输入500个字符