day22 --> (AJAX、JSON)
AJAX :
概念：ASynchronous JavaScript And XMl 异步的JavaScript 和 XML
1.异步和同步 ： 客户端和服务器端相互通信的基础上
AJAX 是一种无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。传统的网页【不使用Ajax技术】如果需要更新内容，必须加载整个网页页面。
作用：提升用户的体验
2.实现方式【2种】：
1.原生的JS实现方式【较少使用，了解】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义方法
function fun(){
//发送异步请求
//1、创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、建立连接
/*
参数：
1、请求方式：GET、POST
get方式：请求参数在URL后边拼接，send方法为空参
post方式：请求参数在send方法中定义
2、请求的URL路径
3、同步或异步：true（同步），false(异步)
*/
xhttp.open("GET", "ajaxServlet?username=tom", true);
//3、发送请求
xhttp.send();
//4、接收并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后在获取
///当xhttp对象的就绪状态改变时，触发事件onreadystatechange
xhttp.onreadystatechange = function() {
//判断readyState就绪状态是否为4，响应状态码为200
if (this.readyState == 4 && this.status == 200) {
//获取服务器的响应结果
let responseText = xhttp.responseText;
alert(responseText);
}
};
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1、获取请求参数
String username = request.getParameter("username");
//处理业务逻辑，耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
throw new RuntimeException(e);
}
//2、打印username
System.out.println(username);
//3、响应
response.getWriter().write("hello: " + username);
}
2.JQuery实现方式【重点掌握】
1.$.ajax()
语法：$.ajax({键值对})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
//使用$.ajax的方式发送异步请求
//注意：每个键值对用逗号隔开，最后一个不用逗号
$.ajax({
url:"ajaxServlet1", //请求路径
type:"POST", //请求方式，默认GET
//data:"username=jack&age=23", //请求参数 <方式一>
data:{"username":"jack","age":23}, //请求参数<方式二，推荐>
success:function (data) { //data参数：接收服务器响应的值
//响应成功后的回调函数
alert(data);
},
error:function () {
//响应请求出现错误会执行的回调函数
alert("出错了");
},
dataType:"text" //设置接收到的响应数据的格式
});
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>
2.$.get() ：发送get请求
语法：$.get(url,[data],[callback],[type]) ，红色：必须，绿色：可选
参数：
url : 请求路径
data : 请求参数
callback : 回调函数
type : 响应结果类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>
3.$.post()
post的实现方式和get方式极其类似，不同之处仅仅是$.get变为$.post
JSON ：
1.概念：JavaScript Object Notation ：JavaScript对象表示法【用JSON表示对象】
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
----------------------------
var p = {"name":"张三","age":23,"gender":"男"};
json现在多用于存储和交换文本信息的语法
进行数据的传输
json比xml更小、更快，更易解析
2.语法：
1、基本规则
数据名称/值 对中 ：json数据是由键值对构成的
键：用引号【" "、' '】引起来，也可以不使用引号
值的取值类型：
1.数字（整数或者浮点数）
2.字符串（在双引号中）
3.逻辑值（true 或者 false）
4.数组（在方括号中）{"persons":[{ },{ },...]}
5.对象（在花括号中） {"address"{"province":"北京"...}}
数据由逗号分隔：数据：多个键值对用逗号分隔
花括号保存对象：使用 { } 定义 json 格式
方括号保存数据：[ ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1、定义基本格式
var person = {"name":"张三",age:23,'gender':true};
//alert(person);
//获取name的值
//var name = person.name;
var name = person["name"];
//alert(name);
//2.1、嵌套格式 : {} --> []
var persons = {
"persons":[
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":24,"gender":true},
{"name":"王五","age":25,"gender":false}
]};
//alert(person);
//获取对象”王五“姓名
let name1 = persons.persons[2].name;
//alert(name1);
//2.2、嵌套格式 ：[] --> {}
var ps = [
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":24,"gender":true},
{"name":"王五","age":25,"gender":false
}];
//alert(ps);
//获取对象“李四”的值
alert(ps[1].name);
</script>
</head>
<body>
</body>
</html>
2、获取数据
1. json对象.键名
2. json对象["键名"]
3.数组对象[索引]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1、定义基本格式
var person = {"name":"张三",age:23,'gender':true};
//2.2、嵌套格式 ：[] --> {}
var ps = [
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":24,"gender":true},
{"name":"王五","age":25,"gender":false
}];
//获取person对象中所有的键和值
//for in 循环
/*for (var key in person){
alert(key + ":" + person[key]);
}*/
//双层for循环嵌套
for (let i = 0; i < ps.length; i++) {
for (let key in ps[i]){
alert(key + ": " + ps[i][key]);
}
}
</script>
</head>
<body>
</body>
</html>
3、JSON数据和Java对象的相互转换
JSON解析器：
常见的解析器：Jsonlib，Gson，fastjson,jackson【学习】
1.Java对象转为JSON
使用步骤：
1.导入 jackson 相关 jar 包
2.创建Jack核心对象：ObjectMapper
3.调用ObjectMapper的相关方法进行转换
1、转换方法
public class JacksonTest {
//Java对象转为JSON对象
@Test
public void test1() throws Exception {
//1、创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
//2、创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3、转换
/*
转换方法：
writeValue(参数1,obj) :
参数1：
File : 将obj对象转换为JSON对象，并保存到指定的文件中
Writer ：将obj对象转换为JSON对象，并将json数据填充到字符输出流中
OutputStream : 将obj对象准换为JSON字符串，并将json数据填充到字节输出流中
writeValueAsString(obj) : 将对象转为json字符串
*/
String json = mapper.writeValueAsString(p);
//System.out.println(json);
//writeValue,将数据写到d盘homework文件夹下
//mapper.writeValue(new File("d://homework//a.txt"),p);
//writeValue,将数据关联到Writer中
mapper.writeValue(new FileWriter("d://homework//b.txt"),p);
}
}
2、注解：
1.@JsonIgnore : 排除属性
2.@JsonFormat : 属性值的格式化
@Test
public void test2() throws Exception{
//1、创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
//2、转换
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
System.out.println(json);
}
3、复杂Java对象转换
1.List ：数组
@Test
public void test3() throws Exception{
//1、创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
Person p1 = new Person();
p1.setName("张三");
p1.setAge(23);
p1.setGender("男");
p1.setBirthday(new Date());
Person p2 = new Person();
p2.setName("张三");
p2.setAge(23);
p2.setGender("男");
p2.setBirthday(new Date());
//创建List集合
List<Person> ps = new ArrayList<>();
Collections.addAll(ps,p,p1,p2);
/*
[{"name":"张三","age":23,"gender":"男","birthday":"2022-12-02"},
{"name":"张三","age":23,"gender":"男","birthday":"2022-12-02"},
{"name":"张三","age":23,"gender":"男","birthday":"2022-12-02"}]
*/
//2、转换
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(ps);
System.out.println(json);
}
2.Map : 对象格式一致
@Test
public void test4() throws Exception {
//1、创建map对象
Map<String,Object> map = new HashMap<String,Object>();
map.put("name","张三");
map.put("age",23);
map.put("gender","男");
//2、转换
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(map);
System.out.println(json);
/*
{"gender":"男","name":"张三","age":23}
*/
}
2.JSON对象转换为Java对象（较少使用）
1.使用步骤：
1.导入 jackson 相关 jar 包
2.创建Jack核心对象：ObjectMapper
3.调用ObjectMapper的相关方法进行转换
//演示：JSON字符串转换为Java对象
@Test
public void test5() throws Exception{
//1、初始化JSON字符串
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
//2、创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//3、转换为Java对象 【Person】
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
案例：
校验用户名是否存在：
1.服务器响应的数据，在客户端使用时，要想当作json数据格式使用
方式一： $.get(type) : 将最后一个参数 type 指定为 "json"
方式二：在服务器端设置 MIME 类型 --> response.setContentType("application/json;charset=utf-8");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
<input type="text" id="username" placeholder="请输入用户名">
<span id="s_span"></span><br>
<input type="password" placeholder="请输入密码"><br>
<input type="button" value="注册">
</form>
</body>
<script>
//用户名文本框失去焦点
$("#username").blur(function () {
//1、获取username文本框的内容
let username = $(this).val();
//发送ajax异步请求
//期望服务器响应回的数据格式：{"userExist":true,"msg":此用户名太受欢迎，请更换一个"}
// {"userExist":false,"msg":用户名可用}
$.get("findUserServlet",{username:username},function (data) {
//alert(data);
//判断userExist键的值是否是true
let span = $("#s_span");
if (data.userExist){
//用户名存在
span.css("color","red");
span.html(data.msg);
}else {
//用户名不存在
span.css("color","green");
span.html(data.msg);
}
})
})
</script>
</html>
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1、获取用户名
String username = request.getParameter("username");
//2、调用service层来判断用户名是否存在
//期望服务器响应回的数据格式：{"userExist":true,"msg":此用户名太受欢迎，请更换一个"}
// {"userExist":false,"msg":用户名可用}
//设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<>();
//此处模拟数据库中的名字为 tom
if ("tom".equals(username)){
//存在
map.put("userExist",true);
map.put("msg","此用户名太受欢迎，请更换一个");
}else {
//不存在
map.put("userExist",false);
map.put("msg","用户名可用");
}
//将map转为json，并且将其写入到页面上【传递给客户端】
//将map --> json
ObjectMapper mapper = new ObjectMapper();
//传递给客户端
mapper.writeValue(response.getWriter(),map);
}
}
