前言
🎄：CSDN的小伙伴们大家好，今天跟大家分享一个我们在web开发中常用的前后台数据交互的两款工具AJax和JSON。如果这篇文章对你有用，麻烦给我点个小赞以示鼓励吧🎄
🏡：博客主页：空山新雨后的java知识图书馆
☀️：今天天气晴朗，春天的温度。
📝: 生活不是苦难，也不是享乐，而是我们应当为之奋斗并坚持到底的事业。
——托克维尔📝
📖上一篇文章：JQuery基础学习📖
👏欢迎大家一起学习，进步。加油👊
文章目录
一、Ajax相关概念
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
异步与同步的概念
在客户端和服务器端相互通信的基础上，
同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
那么Ajax作为异步的JavaScript和xml，就意味着，可以在不重新加载网页的资源的情况下，对部分网页内容进行更新。
就比如我们在搜索百度或者其他平台进行搜索的时候，当你搜索的时候，会出现一个联想的框，这个框就是Ajax技术实现的，在不重新加载资源的情况下，对部分内容进行更新的操作。
二、AJax的实现方式
2.1、JavaScript原生的实现方式
这种实现方式一般用的很少，可不用记忆
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生的js实现异步请求</title>
</head>
<script>
function fun() {
//创建Ajax对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//建立连接
/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
//异步
// xhttp.open("get","../ajaxServlet?username=tom",true);
//同步
xhttp.open("get", "../ajaxServlet?username=tom", true);
//发送请求
xhttp.send()
//接收响应并处理
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
//接收响应数据并弹出
var responseText = xhttp.responseText;
alert(responseText)
}
};
}
//
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
2.2、JQuery的实现方式
2.2.1、方式一：$.ajax
语法：$.ajax({键值对});
代码演示
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery的方式实现异步请求</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
$.ajax({
url: "../ajaxServlet",
//方式一
// date:"username=zhangsan&age=16"
// 方式二
data: {"username": "zhangsan", "age": 13},
type: "post",//默认为get
success: function (date) {
//该date为服务器响应的数据
alert(date);
},
error: function () {
alert("出现错误")
},
dataType: "text"//设置接受到的响应数据的格式
});
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
效果演示
2.2.2、方式二：$.get()：发送get请求
语法：$.get(url, [data], [callback], [type])
- 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
代码演示
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery的方式实现异步请求2,get方式</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
* $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
* */
function fun() {
$.get("../ajaxServlet", {username: "lisa", age: 13}, function (data) {
alert(data);
}, "text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
效果演示
2.2.3、方式三：$.post()：发送post请求
语法：$.post(url, [data], [callback], [type])
- 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
*type：响应结果的类型
代码演示
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery的方式实现异步请求2,post方式</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
* $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
* */
function fun() {
$.post("../ajaxServlet", {username: "peter", age: 13}, function (data) {
alert(data);
}, "text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
效果演示
三、JSON相关概念
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON与xml的区别
xml表示
<?xml version="1.0" encoding="utf-8"?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<cities>
<city>哈尔滨</city>
<city>大庆</city>
</cities>
</province>
<province>
<name>广东</name>
<cities>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>乌鲁木齐</city>
</cities>
</province>
</country>
JSON表示
{
"name": "中国",
"province": [{
"name": "黑龙江",
"cities": {
"city": ["哈尔滨", "大庆"]
}
}, {
"name": "广东",
"cities": {
"city": ["广州", "深圳", "珠海"]
}
}, {
"name": "台湾",
"cities": {
"city": ["台北", "高雄"]
}
}, {
"name": "新疆",
"cities": {
"city": ["乌鲁木齐"]
}
}]
}
四、JSON的语法规则
4.1、基本的语法规则
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中
数据由逗号分隔，多个数据（键值对）之间由逗号分开
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象
JSON的数据都是由键值对构成的，JSON的书写格式：key：value
JSON的键可以是用引号引上，单引号双引号都可以。
值的取值类型为以下类型
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中） {“persons”:[{},{}]}
- 对象（在花括号中） {“address”:{“province”：“陕西”…}}
- null
JSON获取数据的方式
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
代码演示
<!--
*@packageName
*@className Json
*@author wang
*@date 2022/3/25 15:05
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Json</title>
</head>
<script>
//Json的基本定义格式
var person ={"name":"张三","age":23,"gender":true};
// alert(person);
//Json的取值格式
/*
* 1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]*/
//1. json对象.键名
var age = person.age;
var name = person.name;
// alert(name +":" + age);//张三：23
//JSON的嵌套定义格式 {} ->[]
var persons = {"persons":[{"name":"张三","age":23,"gender":true},
{"name":"李四","age":25,"gender":true},
{"name":"王五","age":26,"gender":true}
]
};// alert(persons);
// JSON获取值的格式2. json对象["键名"]
var name1 = persons["persons"][1].name;
// alert(name1)//李四
//JSON的嵌套定义格式的第二种[]->{}
var persons2 = [{"name":"张三","age":23,"gender":true},
{"name":"张三","age":23,"gender":true},
{"name":"王五","age":23,"gender":true}
];
// alert(persons2);
// JSON获取值的格式3. 数组对象[索引]*/
var name2 = persons2[2].name;
alert(name2);//王五
</script>
<body>
</body>
</html>
JSON实现遍历的方式
<!--
*@packageName
*@className Json
*@author wang
*@date 2022/3/25 15:05
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Json2遍历</title>
</head>
<script>
//Json的基本定义格式
var person = {"name": "张三", "age": 23, "gender": true};
//JSON的嵌套定义格式的第二种[]->{}
var persons2 = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 23, "gender": true},
{"name": "王五", "age": 23, "gender": true}
];
//Json的遍历格式
for (var key in person) {
//通过key获取值的方式，JSON对象[key],因为获取的key字符串形式的，所以可以用这种方式获取值，
//而如果直接这样Json对象.key，则相当于Json."key"，当然是无法获取到值的。
//alert(key+":" + person.key);//gender:undefined.....
//注意，key本身就是字符串形式，因此不需要加引号了
// alert(key + ":" + person[key]);//gender:true.....
}
//Json 遍历数组
for (var i = 0; i < persons2.length; i++) {
var p = persons2[i];
for (var key in p) {
alert(key + ":" + p[key]);//name:张三....name:李四........
}
}
</script>
<body>
</body>
</html>
# 五、JSON对象与java对象的相互转换
要实现JSON与java的互相转换，我们首先就得采用一些解析器，常见的解析器有Jsonlib，Gson，fastjson，jackson，今天我们使用Jackson，首先就需要导入Jackson的相关jar包，大家可以在CSDN搜索或者去官网下载。
5.1、JSON转为Java对象
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
- readValue(json字符串数据,Class)
5.2、Java对象转换JSON
使用步骤：
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
1. 转换方法：
1、 writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
*2、writeValueAsString(obj):将对象转为json字符串
2. 注解：
1. @JsonIgnore：排除属性。
2. @JsonFormat：属性值得格式化
* @JsonFormat(pattern = “yyyy-MM-dd”)
注解是为了将一些无法转换的数据类型改变为我们期望的样式，
注解的位置应该在实体类的属性上方，或者相应的get方法上面
3. 复杂java对象转换
1. List：类似数组
2. Map：转换之后与java对象格式一致
代码演示
package com.study.test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.study.domain.Person;
import org.junit.Test;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
/**
* @author wang
* @version 1.0
* @packageName com.study.test
* @className JsonTransferTest
* @date 2022/3/25 16:15
* @Description JSON与java对象的转换测试类
*/
public class JsonTransferTest {
@Test
public void testJsonChangeTOJava() throws IOException {
Person zhangSan = new Person("张三", 22, "男");
Person lisi = new Person("李四", 29, "男");
//将java对象转换为JSON对象的方式一：
/*1. 转换方法：
1、* writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
2、* writeValueAsString(obj):将对象转为json字符串
*/
// 2. 创建Jackson核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
String json = null;
// 先使用第二种方式进行转换
try {
json = mapper.writeValueAsString(zhangSan);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
System.out.println(json);//{"name":"张三","age":22,"gender":"男"}
File file = new File("E:\\javaPractice\\WebProject2\\Ajax&JSON\\src\\com\\study\\files\\a.txt");
//第二种方式，写进文件里面
mapper.writeValue(file, zhangSan);
FileWriter file2 = new FileWriter("E:\\javaPractice\\WebProject2\\Ajax&JSON\\src\\com\\study\\files\\b.txt");
mapper.writeValue(file2, lisi);
}
@Test
public void testJsonChangeTOJava2() throws Exception {
Person zhangSan = new Person("张三", 22, "男", new Date());
Person lisi = new Person("李四", 29, "男", new Date());
//注解来获取对应的转换之后的JSON对象
ObjectMapper mapper = new ObjectMapper();
String z = mapper.writeValueAsString(zhangSan);
System.out.println(z);
//没有转换之前的输出：{"name":"张三","age":22,"gender":"男","date":1648197658090}格式不好看
//使用@JsonIgnore注解之后：{"name":"张三","age":22,"gender":"男"}，对于某些需求来说也不够好
//使用@JsonFormat(pattern = "yyyy-MM-dd")注解之后：{"name":"张三","age":22,"gender":"男","date":"2022-03-25"}
//就可以达到我们想要的不同的结果了。
}
/**
* @Date 2022/3/25 16:58
* @Param
* @Return void
* @MetodName testJsonChangeTOJava3
* @Author wang
* @Description list集合的转换
*/
@Test
public void testJsonChangeTOJava3() throws Exception {
Person zhangSan = new Person("张三", 22, "男", new Date());
Person lisi = new Person("李四", 29, "男", new Date());
Person wangwu = new Person("王五", 35, "男", new Date());
//注解来获取对应的转换之后的JSON对象
ArrayList<Person> people = new ArrayList<>();
people.add(zhangSan);
people.add(lisi);
people.add(wangwu);
ObjectMapper mapper = new ObjectMapper();
String z = mapper.writeValueAsString(people);
System.out.println(z);
//[{"name":"张三","age":22,"gender":"男","date":"2022-03-25"},
// {"name":"李四","age":29,"gender":"男","date":"2022-03-25"},
// {"name":"王五","age":35,"gender":"男","date":"2022-03-25"}]
}
/**
* @Date 2022/3/25 17:01
* @Param
* @Return void
* @MetodName testJsonChangeToJava4
* @Author wang
* @Description map集合转换为JSON对象
*/
@Test
public void testJsonChangeToJava4() throws Exception {
HashMap<String, Object> map = new HashMap<>();
map.put("name", "张三");
map.put("age", 12);
map.put("gender", "男");
//创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//转换
String s = mapper.writeValueAsString(map);
System.out.println(s);//{"gender":"男","name":"张三","age":12}
}
/**
* @Date 2022/3/25 17:21
* @Param
* @Return void
* @MetodName testJsonChangeToJava5
* @Author wang
* @Description JSON转java对象
*/
@Test
public void testJsonChangeToJava5() throws Exception {
String json = "{\"name\":\"王五\",\"age\":35,\"gender\":\"男\",\"date\":\"2022-03-25\"}";
ObjectMapper mapper = new ObjectMapper();
Person person = mapper.readValue(json, Person.class);
System.out.println(person);//Person{name='王五', age=35, gender='男'}
}
}
# 六、案例练习：校验用户名是否存在
案例描述：在我们注册一个网站的用户时，网站会对用户名进行一个去重的做法，也就是不能重复注册相同的名字，因此需要实现这个功能。
解决思路
1、首先可以在注册的页面给用户名标签绑定一个离焦事件，当用户输入完成时就发送Ajax请求，将用户名发送到服务器端的Servlet中。
2、Servlet在数据库中操作，查询有没有与该用户相同的名字，如果有，就可以存一个map集合，集合中方两对数据，类似下方代码
HashMap<String, Object> map = new HashMap<>();
//说明存在相同的名字
if (flag) {
//存储对应的数据
// System.out.println("相同的我来了");
map.put("userExist", true);
map.put("msg", "用户名太受欢迎了，请换一个用户名");
} else {
map.put("userExist", false);
map.put("msg", "用户名可用");
}
3、将map集合转换为JSON对象，响应回客户端浏览器
4、当浏览器获取到服务器响应回来的数据之后，对userExist进行判断即可，分别显示想要的结果。
Servlet代码展示：
package com.study.web.Servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.study.service.UserService;
import com.study.service.UserServiceImpl;
import org.omg.CORBA.OBJECT_NOT_EXIST;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
/**
* @author wang
* @version 1.0
* @packageName ${PACKAGE_NAME}
* @className ${NAME}
* @date 2022/3/25 19:36
* @Description ${description}
*/
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
//解决服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
//1. $.get(type):将最后一个参数type指定为"json"
// 2. 在服务器端设置MIME类型
//也就是显示不了的问题
//第二种方式就是设置mime类型
response.setContentType("application/json;charset=utf-8");
// response.setContentType("text/html;charset=utf-8");
//获取username
String username = request.getParameter("username");
//调用service层判断用户是否存在
UserService service = new UserServiceImpl();
boolean flag = service.checkUser(username);
HashMap<String, Object> map = new HashMap<>();
//说明存在相同的名字
if (flag) {
//存储对应的数据
// System.out.println("相同的我来了");
map.put("userExist", true);
map.put("msg", "用户名太受欢迎了，请换一个用户名");
} else {
map.put("userExist", false);
map.put("msg", "用户名可用");
}
// System.out.println(map.toString());
//将封装了数据的map集合转换成JSON对象
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(), map);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
HTML页面
<!--
*@packageName
*@className case
*@author wang
*@date 2022/3/25 19:12
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户名校验</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//入口函数
$(function () {
//给username绑定一个鼠标离焦事件
$("input[name=username]").blur(function () {
//获取username输入框的值
var username = $(this).val();
//发送Ajax请求，
/*期望服务器返回的格式：如果名字相同的存在的情况：{"userExist":true,"msg","用户名太受欢迎了，请换一个用户名"}
如果名字不同的情况存在：{"userExist":false,"msg","用户名可用"}
* */
$.get("/findUserServlet", {username: username}, function (data) {
//获取span标签对象
var span = $("#username_check");
//判断响应会来的数据的userExist值是否为true
// alert(data.userExist);
// alert(data.msg);
if (data.userExist) {
//为true,代表存在相同的名字
span.css("color", "red");
span.html(data.msg);
} else {
//为false，则代表不存在相同的名字
span.css("color", "green");
span.html(data.msg);
}
});
})
});
</script>
</head>
<body>
<input type="text" name="username" placeholder="请输入用户名">
<span id="username_check"></span><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="提交注册">
</body>
</html>
