SpringMVC：Ajax和Json
1. 什么是Json
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。
前后端分离，数据交互异常重要，json才是王者。
1.1 json的语法要求
任何JS支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。要求和语法格式如下：
- 对象表示为键值对
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值，具体格式为：
{"name": "钢铁侠"} {"age": "48"} {"sex": "男"} {"role","hero"}json本质上是一个字符串，它使用文本表示一个JS对象的信息；总的来说，json本质是一个表示js对象的字符串。
1.2 JSON和JS之间的转换
要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是：{a: 'Hello', b: 'World'}要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'代码实现两者转换：
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //编写一个对象 var user = { name:"啊侠", age:20, sex:"男" }; //输出一下这个对象 console.log(user); //将js对象转换为json字符串； var str = JSON.stringify(user); console.log(str) var obj = JSON.parse(str); console.log(obj); </script> </body> </html>
1.3 使用Controller实现返回JSON数据
json解析工具中有一个最受欢迎的就是jackson，要使用Jackson，就需要使用它的jar包：在maven的pom.xml文件中的dependencies标签中输入以下代码自动导入相关jar包：
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.8</version> </dependency>编写user类并根据其编写controller
user类：
package com.david.pojo; public class User { private String name; private int age; private String sex; public User() { } public User(String name, int age, String sex) { this.name = name; this.age = age; this.sex = sex; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } @Override public String toString() { return "User{" + "name='" + name + '\'' + ", age=" + age + ", sex='" + sex + '\'' + '}'; } }controller：（这部分内容我们顺便展示有关时间的处理方法）
package com.david.controller; import com.david.pojo.User; import com.david.utils.Util; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.SerializationFeature; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.List; @Controller public class UserController { //有关user的controller实现 @RequestMapping(value = "/json1",produces = "application/json;charset=utf-8")//乱码问题：给@RequestMapping加一个属性 @ResponseBody //@ResponseBody作用：该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。 public String json1() throws JsonProcessingException { //User user = new User("李",1,"man"); //ObjectMapper mapper = new ObjectMapper(); //String s = mapper.writeValueAsString(user);将Java对象转换为json字符串； //return s; //以上代码简化如下 return new ObjectMapper().writeValueAsString(new User("爱心觉罗侠",21,"男")); } @RequestMapping(value = "/json2") @ResponseBody public String json2() throws JsonProcessingException { List<User> list = new ArrayList<>(); User user1 = new User("啊侠",20,"男"); User user2 = new User("啊豪",21,"男"); User user3 = new User("啊美",18,"女"); User user4 = new User("啊萌",19,"女"); list.add(user1); list.add(user2); list.add(user3); list.add(user4); return new ObjectMapper().writeValueAsString(list); } //我们创建一个时间日期的对象试试，看看能不能转换成功 //有关时间的controller实现 //发现问题：时间默认返回的json字符串变成了时间戳的格式 //为了不让时间显示时间戳形式，我们进行以下操作 @RequestMapping(value = "/time") @ResponseBody public String time() throws JsonProcessingException { ObjectMapper om = new ObjectMapper(); //1.所以我们要关闭它的时间戳功能 om.configure (SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false); //2.自定日期格式对象； SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); //3.让mapper指定时间日期格式为simpleDateFormat； om.setDateFormat(sdf); //创建日期对象 Date date = new Date(); String str = om.writeValueAsString(date); return str;//由于@ResponseBody注解，这里会将str转成json格式返回；十分方便 } //由于发现再次进行类似处理时候可以使用同样的代码， //于是处于java的精髓为此段代码编写工具类，将其封装起来 //建立util类以后调用util类方法来实现时间在网页的显示 @RequestMapping(value = "/time2") @ResponseBody public String time2() { return Util.getJson(new Date()); } }有关时间的内容的util类：
package com.david.utils; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.SerializationFeature; import java.text.SimpleDateFormat; public class Util { public static String getJson(Object object) { return getJson(object,"yyyy-MM-dd HH:mm:ss"); } public static String getJson(Object object,String dateFormat){ ObjectMapper mapper = new ObjectMapper(); mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false); SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat); mapper.setDateFormat(simpleDateFormat); try { return mapper.writeValueAsString(object); } catch (JsonProcessingException e) { e.printStackTrace(); } return null; } }
编写完这三个类，配置好tomcat我们就可以在网页中简单测试了。
上面处理问题的过程中我们都在尽量的体现封装的思想，所以这里介绍一种一劳永逸的json处理乱码的方法：可以通过Spring配置统一指定，这样就不用每次都去处理了！
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="objectMapper">
<bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
<property name="failOnEmptyBeans" value="false"/>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>至此，我们简单了解了如何将json转换为js，也了解了一些将时间戳转换为时间格式的方法，顺便回顾了封装的思想。
上面代码中都是用的是@ResponseBody注解，它就是把后台的对象转换成json对象，返回到页面 ， 和它对应的当然就是@RequestBody，一般用来负责接收前台的json数据，把json数据自动封装到pojo中；下面用Ajax来测试这一块，这两个注解一般都会在异步获取数据中使用到；。
2. Ajax
2.1 AJAX简单介绍
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在以前的网页中还有现在少部分网站会出现，登录如果失败，需要刷新才能登录；或者不点击刷新就不知道自己的信息是否正确（web1.0时代）。而现在大多数网站都是局部刷新，不更新网页的情况下，实现局部信息更新（即为web2.0时代）。
- 一定要注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
- 利用AJAX可以做：
- 注册时，输入用户名自动检测用户是否已经存在。
- 登陆时，提示用户名密码错误
- 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
2.2 利用前端的一个标签来伪造ajax:(iframe标签)
建立HTML文件并进行以下代码操作：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>david</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
};
function LoadPage(){
var targetUrl = document.getElementById('url').value;
console.log(targetUrl);
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址：（格式要正确，如：https://www.baidu.com/或https://www.sogou.com/）</p>
<p>为方便观察，当前时间戳为：<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value=""/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置：</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>2.3jQuery.Ajax
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
为了避免重复的代码，我们直接学习jQuery提供的Ajax；jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，就能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或 JSON–同时您能够把这些外部数据直接载入网页的被选元素中。
我们来简单看一下这些让人方便却又让刚接触的人头痛的方法：
jQuery.get(...)
参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
dataType: 返回内容格式，xml, json, script, text, htmljQuery.post(...)
所有参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数
success: 载入成功时回调函数
dataType: 返回内容格式，xml, json, script, text, htmljQuery.getScript(...)
所有参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。jQuery.getJSON(...)
所有参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。jQuery.ajax(...)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
使用ajax实现注册提示
编写controller：
@RequestMapping("/a") @ResponseBody public String ajax(String name,String pwd){ String msg = ""; //模拟数据库中存在数据 if (name!=null){ if ("admin".equals(name)){ msg = "OK"; }else { msg = "用户名输入错误"; } } if (pwd!=null){ if ("123456".equals(pwd)){ msg = "OK"; }else { msg = "密码输入有误"; } } return msg; //由于@ResponseBody注解，将list转成json格式返回 }编写前端页面，进行异步处理：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/ajax/a3", data:{'name':$("#name").val()}, success:function (data) { if (data.toString()=='OK'){ //学习链接：https://www.w3school.com.cn/jquery/css_css.asp $("#userInfo").css("color","green"); }else { $("#userInfo").css("color","red"); } $("#userInfo").html(data); } }); } function a2(){ $.post({ url:"${pageContext.request.contextPath}/ajax/a3", data:{'pwd':$("#pwd").val()}, success:function (data) { if (data.toString()=='OK'){ $("#pwdInfo").css("color","green"); }else { $("#pwdInfo").css("color","red"); } $("#pwdInfo").html(data); } }); } </script> </head> <body> <p> 用户名:<input type="text" id="name" onblur="a1()"/> <span id="userInfo"></span> </p> <p> 密码:<input type="text" id="pwd" onblur="a2()"/> <span id="pwdInfo"></span> </p> </body> </html>
以上代码即可实现动态请求响应，局部刷新的效果。
乱谈阿贾克斯（纯属娱乐）
- 我们介绍的是编程过程中的Ajax，不要到百度上胡乱搜索！AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- 如果去网页上直接搜索阿贾克斯，会出现好多不是这个层面的知识，如下：
- 地理知识：
- 神话知识：
- 电影知识：
- 体育知识：
无论是什么方面的知识，多知道一些总是没错的。其实随意搜索是会出现很多生活彩蛋的。
- 地理知识：