Ajax概念
Ajax:异步JavaScript和XML技术，是一种综合应用的技术
使用Ajax可以开发出异步发送请求和响应，可以在页面不刷新的情况下与服务器进行交互，从而实现页面内容的局部改变（局部刷新）。
Ajax优点
- 可以提升用户体验
可以提升响应效率
提升了页面的响应效率就是提升了用户体验
Spring Web MVC+Ajax处理流程
上图中体现了Spring Web MVC和Ajax结合使用的整体处理流程。Spring Web MVC的处理流程已经很熟悉了，主要是三大组件的使用，和Ajax技术结合使用之后，处理方式有些改变。
传统的Spring Web MVC的处理流程和与Ajax异步传输技术结合之后的处理流程主要是在响应这一部分有区别。
传统Spring Web MVC流程中Controller业务组件处理相关请求之后，会返回一个String类型或者ModelAndView类型传递给ViewResolver组件寻找到生成响应信息的视图页面，然后后将页面信息返回给浏览器。而和Ajax应用结合之后，为了达到局面刷新的效果，传递数据不再需要刷新整个页面，所以业务控制器Controller返回的不再是视图组件相关的信息，而是返回页面局部的数据信息，Ajax数据传输格式使用JSON格式，JSON是一种格式简单，易于处理的数据格式。
Spring Web MVC为了实现JSON数据响应，提供了一系列的jackson.jar架包，这些架包的主要作用是将业务组件Controller返回的数据结果生成JSON字符串，浏览器前端的页面可以接收JSON字符串加以简单处理生成完整的页面信息。
Ajax使用案例—服务器端实现
1. 配置好Spring Web MVC的环境（不需要再配置ViewRes）
主要是加入jackson相关架包,使用Maven依赖
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.5</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.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.0</version>
</dependency>2. Controller组件的编写
package com.hnust.testajax.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class TestAjaxController {
@RequestMapping("/demo1.do")
@ResponseBody//将User对象的集合转化为JSON字符串信息
public List<User> execute(){
List<User> lu=new ArrayList<User>();
User user1 = new User();
user1.setId(1);
user1.setName("tom");
user1.setTelephone("15200340738");
user1.setEmail("[email protected]");
User user2 = new User();
user2.setId(2);
user2.setName("rose");
user2.setTelephone("15200340739");
user2.setEmail("[email protected]");
lu.add(user1);
lu.add(user2);
return lu;
}
}
采用JSON响应，这里的Controller可以返回任何类型的信息，@ResponseBody//将User对象的集合转化为JSON字符串信息，这是SpringMVC和Ajax结合使用最关键的点，在业务处理方法之前加入@ResponseBody，如果发现该标记，就会引用jackson架包将return的数据类型转化为JSON格式的字符串信息。
3. 阶段性测试
直接运行程序，在浏览器中发出demo1.do请求，响应结果如下。
可以看到浏览器中接收到后台传递的JSON数据字符串，可以看看JSON的数据格式,key-value形式，非常简单。
Ajax使用案例—客户端实现
前面只介绍了服务器端将任意类型的数据转化为JSON字符串格式返回给客户端。还没有涉及Ajax的应用，传统的前端请求方式一般使用表单请求，请求经过处理后，前端接收到数据之后需要进行整个页面刷新，现在使用Ajax技术可以实现局部刷新。
具体请求方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- 引入tablestyle.css样式 -->
<link rel="stylesheet" type="text/css" href="css/tablestyle.css" />
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="loadBtn" value="Ajax测试"/>
<table class="imagetable" id="tr">
</table>
<script>
$("#loadBtn").click(function(){
//发送ajax请求
$.ajax({
url:"demo1.do",//请求的url
type:"post",//请求方式
/*如果有需要提交的数据
data{
}
*/
dataType:"json",//服务器处理完返回数据的类型
success:function(data){//成功回调函数，data就是返回的json数据
var msg = "";
msg += "<tr>"+"<th>"+"序号"+"</th>"+"<th>"+"用户名"+"</th>"+"<th>"+"邮箱" + "</th>"+"</tr>";
for ( var i = 0; i < data.length; i++) {//循环json对象，拼接tr,td的html
msg += "<tr>";
msg += "<td>" + data[i].id + "</td>";
msg += "<td>" + data[i].name+ "</td>";
msg += "<td>" + data[i].email + "</td>";
msg += "</tr>";
}
$("#tr").html(msg);//通过jquery方式获取table，并把tr,td的html输出到table中
},
error:function(){//失败回调函数，提示请求失败
alert("数据加载错误");
}
});
});
</script>
</body>
</html>核心在于$.ajax（…）部分，这里使用jquery前端框架简化一些js操作。
测试结果：
总结
在完成该应用时，Ajax和JSON方面的知识挺容易理解的，反而是在使用JS，jquery和css前端部分知识的时候查找了大量的资料，遇到了很多问题，如HTML页面代码加载的顺序， < table >表单的优化，前端代码的调试。收获还是挺多的。