Ajax
1、概念
Asynchronous JavaScript And XML: 异步的JavaScript和XML
1、异步和同步:客户端和服务器通信的基础上
同步:客户端必须等服务器的响应,在等待的时间内不可以做其它的操作
异步:客户端不需要等待服务器的响应,在服务器处理请求的过程中可以干其它的事情
Ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术
通过与后台服务器少量数据交换,Ajax可以使网页实现异步更新,这意味着可以不在重新加载整个网页的情况下,对网站的某部分进行更新
传统的网页(不使用Ajax)如果需要更新内容,则需要加载整个页面
提升用户的体验
2、实现方式
1、原生的js实现方式 (了解)
2、JQuery实现方式
1、$.ajax
语法:$.ajax({键值对});
//使用$.ajax()的方式发送异步请求
$.ajax({
url:"ajaxServlet",//请求地址
type:"POST",//请求方式
//data:"username=admin&age=12",//请求参数
data:{"username":"admin","age":"12"},
success:function (data) {//data表示是变量,会去接收服务器响应的值
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...");
},//响应出错执行的回调函数
dataType:"text"//设置响应的数据格式
})
2、$.get
语法:$.get(url,[data],[callback],[type])
参数:
url:请求路径
data:请求参数
callback:回调函数
type:响应结果的类型
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
function fun() {
$.get("ajaxServlet",{username:"xiao"},function (aaa) {
alert(aaa);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
3、$.post
语法:$.post(url,[data],[callback],[type])
参数:
url:请求路径
data:请求参数
callback:回调函数
type:响应结果的类型
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
function fun() {
$.post("ajaxServlet",{username:"xiao"},function (aaa) {
alert(aaa);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
JSON
1、概念
JavaScript Object Notation 翻译:JavaScript对象表示法
JSON多用于存储和交换信息的语法
进行数据的传输,类似于xml,但是比xml速度更快,更易解析
2、语法
1、基本规则
数据在名称/值对中:json数据是由键值对构成的
键用引号(单双都行)引起来,也可以不使用引号
值的取值类型:
1、数字(整数或浮点数)
2、字符串(在双引号中)
3、逻辑值(true或false)
4、数组(在方括号中){“persons”:[{},{}]}
5、对象(在花括号中){“address”:{“province”:“陕西”},…}
6、null
数据由逗号分隔:多个键值对由逗号分隔
花括号保存对象:使用{ }定义json格式
方括号保存数组:[ ]
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":13};
//获取数据,获取name属性的值
var name=person.name;
var name1=person["name"];
//alert(person)
//2、嵌套格式 {}--->[]
var persons={
"persons":[
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":22,"gender":true},
{"name":"王五","age":21,"gender":false}
]
};
//alert(persons)
//获取王五 对象名.键名.属性
var name2=persons.persons[2].name;
//3、嵌套格式 []--->{}
var ps=[
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":22,"gender":true},
{"name":"王五","age":21,"gender":false}
];
alert(ps)
//获取李四
var name3=ps[1].name;
</script>
</head>
<body>
</body>
</html>
JSON数据和Java对象的相互转换
JSON解析器
常见的解析器:Jsonlib,Gson,fastjson,,jackson(springmvc框架内置解析器)
JSON转为Java对象
使用步骤
1、导入Jackson相关架包
2、 创建Jackson核心对象 ObjectMapper
3、使用ObjectMapper相关方法进行转换
//JSON对象转换为Java对象
@Test
public void test5() throws Exception {
//1、创建json字符串
String json="{\"manger\":\"男\",\"name\":\"张三\",\"age\":20}";
//2、创建Jackson对象
ObjectMapper mapper=new ObjectMapper();
//3、转换
Person person=mapper.readValue(json,Person.class);
System.out.println(person);
}
Java对象转为JSON
使用步骤
1、导入Jackson相关架包
2、 创建Jackson核心对象 ObjectMapper
3、使用ObjectMapper相关方法进行转换
package com.project.test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.project.entity.Person;
import org.junit.Test;
import java.io.File;
import java.io.FileWriter;
public class JacksonTest {
//java对象转为JSON
@Test
public void test1() throws Exception {
//1、新建person对象
Person p=new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
//2、创建Jackson核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3、转换
/*
转换方法:
writeValue(参数1,obj)
参数1:
File:将obj对象转换为JSON字符串,并保存到指定文件中
write:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
*/
//将Java数据转换成json字符串输出到控制台
String s=mapper.writeValueAsString(p);
//{"name":"张三","age":20,"manger":"男"}
System.out.println(s);//{"name":"张三","age":20,"manger":"男"}
//将数据写道指定文件中(d://a.txt)
//mapper.writeValue(new File("d://a.txt"),p);
//将数据关联到write中
mapper.writeValue(new FileWriter("d://b.txt"),p);
}
}
4、注解
(1)@JsonIgnore:排除该属性
(2)@JsonFormat:属性值的格式化
5、复杂对象转换
(1)list:数组
//复杂对象的转换,list
@Test
public void test3() throws Exception {
//1、新建person对象
Person p = new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
Person p1 = new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
Person p2 = new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
List<Person> list = new ArrayList<Person>();
list.add(p);
list.add(p1);
list.add(p2);
//2、创建Jackson对象
ObjectMapper mapper=new ObjectMapper();
//转换
String s=mapper.writeValueAsString(list);
System.out.println(s);
}
(2)map:对象格式一致
//复杂对象的转换,map
@Test
public void test4() throws Exception {
//1、创建map对象
Map<String,Object> map=new HashMap<String,Object>();
map.put("name","张三");
map.put("age",20);
map.put("sex","男");
//2、创建Jackson对象
ObjectMapper mapper=new ObjectMapper();
//转换
String s=mapper.writeValueAsString(map);
System.out.println(s);
}
注意:
1、服务器响应的数据,在客户端使用时,要想当作json格式来使用
(1) $.get(type):将最后一个参数类型type指定为 “json”
(2) 在服务端设置MIME类型
//表示指定服务器返回的类型为json
response.setContentType("application/json");