Ajax百度百科定义
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
关于服务器向客户端的响应方式
传统的做法中，服务器端的控制器在处理完数据之后，可以选择转发，或重定向，最终，向客户端进行响应！
但是，这种做法存在比较明显的缺陷：服务器端始终向客户端响应某个页面(不同的业务处理响应不同的页面)，页面中的源代码的长度决定了页面文件的数据量，且HTML页面中可能还引用了图片、CSS、JavaScript文件，这些文件也都会响应到客户端，就可能导致响应的数据较多，进而引发流量消耗较大的问题，还有用户体验略差的问题，另外，页面也不一定适用于多种不同类型的客户端！也不便于实现前后端分离！
目前推荐的做法是：服务器端的控制器在处理完数据之后，向客户端响应正文，即一段字符串，这个字符串中，只包含需要响应给客户端的数据部分，而不关心数据如何显示的问题。
服务器响应的正文
在SpringMVC项目中，可以将处理请求的方法的返回值类型设置为String，表示需要响应的正文，然后，在方法之前添加@ResponseBody注解，表示本次响应将不再是转发或重定向，而是直接将方法的返回值响应给客户端，其它配置或操作与一般的SpringMVC项目完全相同：
@Controller
public class HelloController {
@RequestMapping("hello.do")
@ResponseBody
public String showHello() {
System.out.println("HelloController.showHello()");
return "success";
}
}
由于默认的响应头中设置的Content-Type值为text/html; charset=ISO-8859-1，所以，默认情况下，如果直接返回中文，在浏览器中看到的会是乱码！
服务器向客户端响应正文
当服务器端响应正文，其正文中应该包括服务器端处理的结果，例如处理用户登录后将得到成功或失败的结果之一，或者需要包括服务器端需要响应给客户端的数据，例如用户查看个人资料时，服务器端需要将该用户的资料响应给客户端，所以，响应的正文可能包括操作结果、相关数据等！
假设用户提交的请求是查看个人资料，且服务器端通过多种验证后决定将该用户的资料响应给客户端，但是，响应的正文只是1个字符串，用户的信息可能比较丰富，包括id、用户名、密码、年龄等一系列数据！那么，如何使用1个字符串表示这么项数据呢？显然不可能直接将数据没有规则拼接在一起：
[email protected]
所以，应该将需要响应的数据使用某种规则组织起来，例如使用XML语法来组织：
<user>
<id>1</id>
<username>john</username>
<password>123456</password>
<age>23</age>
<phone>13800138001</phone>
<email>[email protected]</email>
</user>
实际上，更加推荐使用JSON格式的数据：
{
"id":1,
"username":"john",
"password":"123456",
"age":23,
"phone":"13800138001",
"email":"[email protected]"
}
相比之下，JSON格式的数据对比XML格式的数据来说，优点有：
语法更加简洁，使用的字符数量更少，进而导致流量消耗更小，用户体验更好；
解析简单。
JSON数据格式
JSON数据的语法有：
使用大括号{}表示1个对象，整个JSON数据就是一个对象；
在某个对象中，可以有若干项属性的配置，各属性的配置之间，使用逗号,进行分隔；
每个属性的名称都是字符串类型的，需要使用双引号框住(也可以使用单引号，甚至一些对效率要求特别极致的应用场景中根本就不使用任何引号)，其对应的值将根据数据类型可能不添加双引号，例如数值型、布尔型，而字符串类型的值应该添加双引号，属性与值之间使用冒号:进行分隔；
属性的值的类型还可以是数组，值使用中括号[]框架即可；
属性的值的类型还可以是另一个对象，值使用大括号{}框住即可。
例如：
{
"id":1,
"username":"john",
"password":"123456",
"age":23,
"phone":"13800138001",
"email":"[email protected]",
"skill":["Java OOP", "MySQL", "SpringMVC"],
"department": {
"id":7,
"name":"软件研发部"
}
}
另外，如果客户端在JavaScript中需要处理的JSON数据是由服务器响应过来的，经过网络传输的数据都是字符串类型的，在JavaScript中，可以通过JSON.parse(str)将字符串转换为JSON对象！
服务器向客户端响应JSON格式的数据
在服务器端创建cn.tedu.ajax.User类，在类中声明属性：
public class User {
private Integer id;
private String username;
private String password;
private Integer age;
private String phone;
private String email;
}
然后，在项目中添加jackson依赖：
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.8</version>
</dependency>
还需要Spring的配置文件中添加配置：
<!-- 注解驱动 -->
<mvc:annotation-driven />
以上添加的jackson依赖可以自动将处理请求的方法返回的对象组织为JSON数据格式。
当SpringMVC框架向客户端响应正文时，框架内部需要使用Converter(转换器)将方法的返回值转换为字符串响应给客户端，如果返回值的类型是String类型，会使用StringHttpMessageConverter转换器，如果返回值的类型是SpringMVC框架默认不可识别的类型(例如开发者自定义的数据类型)，将会自动使用Jackson框架内部的转换器，Jackson框架内部的转换器会自动将对象转换为JSON格式的字符串，并且，在响应头(Response Headers)中，将Content-Type值设置为application/json;charset=utf-8，所以，响应的数据中是可以包含中文的！
小结：当服务器需要向客户端响应JSON格式的数据时，应该自定义某个数据类型，把要响应的属性设计为该类的属性，然后，在控件器处理请求的方法中，返回该类型的对象即可！
练习：客户端可以向服务器端提交登录请求，服务器端对客户端提交的用户名、密码进行判断，最终响应给客户端某个JSON字符串，可能是：
{"state":1}：表示通过登录验证，是登录成功的；
{"state":2}：表示登录失败，用户名错误；
{"state":3}：表示登录失败，密码错误。
首先，应该自定义某个类，可以封装将要体现在JSON字符串中的属性，则创建cn.tedu.ajax.JsonResult类：
public class JsonResult {
private Integer state;
}
以上类型将是控制器处理请求的方法的返回值类型！
然后，假设root/1234是正确的用户名和密码，则创建控制器来处理请求：
@Controller
public class UserController {
@RequestMapping("login.do")
@ResponseBody
public JsonResult login(String username, String password) {
// 假设root/1234是正确的用户名和密码
JsonResult jsonResult = new JsonResult();
if ("root".equals(username)) {
if ("1234".equals(password)) {
jsonResult.setState(1);
} else {
jsonResult.setState(3);
}
} else {
jsonResult.setState(2);
}
return jsonResult;
}
}
AJAX
Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
Ajax的本质是在浏览器中使用子线程实现与服务器的交互。
通常，在实现AJAX时，会使用jQuery中的$.ajax()函数来实现！
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function login() {
// $.ajax()函数用于发出异步请求，并获取响应结果
// 该函数的参数是一个JSON对象
// 参数对象中至少应该指定5个属性
// url：将请求提交到哪里去
// data：请求参数
// type：请求类型，取值为get或post等
// dataType：服务器响应的结果的类型，取值为text/xml/json等，取决于响应头(Response Headers)中的Content-Type
// success：服务器成功响应(HTTP响应码是2xx)时的回调函数，函数中的参数就是服务器端响应的JSON数据的对象
$.ajax({
"url":"login.do",
"data":$("#form-login").serialize(),
"type":"post",
"dataType":"json",
"success":function(json) {
if(json.state == 1) {
alert("登录成功！");
} else if (json.state == 2) {
alert("登录失败！用户名错误！");
} else if (json.state == 3) {
alert("登录失败！密码错误！");
}
}
});
}
</script>
最后，可以通过http://localhost:8080/AJAX/xxx.do?username=root&password=1234进行测试。
