Ajax概念
1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML。
2. 同步和异步:客户端和服务器端相互通信的基础上
客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
提升用户的体验
1.同步异步图解
Ajax实现方式
1. 原生的JS实现方式
原生的JS实现方式代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
/*
参数:
1. 请求方式:GET、POST
* get方式,请求参数在URL后边拼接。send方法为空参
* post方式,请求参数在send方法中定义
2. 请求的URL:
3. 同步或异步请求:true(异步)或 false(同步)
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 :xmlhttp.responseText
//什么时候获取?当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>
2. JQeury实现方式
2.1 $.ajax()
$.ajax()代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun() {
//发送异步请求
$.ajax({
url: "ajaxServlet1",//请求地址
type: "POST",//请求方式
//data:"username=疾风剑豪&age23", 请求参数
data: {"username": "疾风剑豪", "age": 23},
success: function (data) {
alert(data);
},//响应成功执行的回调函数
error: function () {
alert("请求失败");
},//请求响应错误执行的回调函数
dataType: "text"//设置接受到的响应数据的格式
});
}
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
AjaxServlet1
@WebServlet("/ajaxServlet1")
public class AjaxServlet1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String age = request.getParameter("age");
//System.out.println(username);
//System.out.println(age);
//设置响应格式
response.setContentType("text/html;charset=utf-8");
//响应
response.getWriter().write(username+":"+age);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
2.2 $.get():发送get请求
语法:$.get(url, [data], [callback], [type])
参数:
url:请求路径
data:请求参数
callback:回调函数
type:响应结果的类型
默认就是异步请求,不能转换为同步。
$.get():发送get请求代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
$.get(
"ajaxServlet1",
{"username": "影流之主", "age": "24"},
function (data) {
alert(data);
},
"text"
);
}
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
AjaxServlet1
@WebServlet("/ajaxServlet1")
public class AjaxServlet1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String age = request.getParameter("age");
//获取请求方式
String method = request.getMethod();
System.out.println(method);//GET
//设置响应格式
response.setContentType("text/html;charset=utf-8");
//响应
response.getWriter().write(username+":"+age);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
2.3 $.post():发送post请求
语法:$.post(url, [data], [callback], [type])
参数:
url:请求路径
data:请求参数
callback:回调函数
type:响应结果的类型
默认就是异步请求,不能转换为同步。
$.post():发送post请求代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
$.post(
"ajaxServlet1",
{"username": "刀锋之影", "age": "25"},
function (data) {
alert(data);
},
"text"
);
}
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
AjaxServlet1
@WebServlet("/ajaxServlet1")
public class AjaxServlet1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String age = request.getParameter("age");
//获取请求方式
String method = request.getMethod();
System.out.println(method);//POST
//设置响应格式
response.setContentType("text/html;charset=utf-8");
//响应
response.getWriter().write(username+":"+age);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
JSON概念
1.概念: JavaScript Object Notation JavaScript对象表示法
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
var p = {"name":"张三","age":23,"gender":"男"};
json现在多用于存储和交换文本信息的语法。
进行数据的传输。
JSON 比 XML 更小、更快,更易解析。
JSON语法
1.基本规则
数据在名称/值对中:json数据是由键值对构成的
键用引号(单双都行)引起来,也可以不使用引号。
值得取值类型:
1. 数字(整数或浮点数)
2. 字符串(在双引号中)
3. 逻辑值(true 或 false)
4. 数组(在方括号中) {"persons":[{},{}]}
5. 对象(在花括号中) {"address":{"province":"陕西"....}}
6. null
数据由逗号分隔:多个键值对由逗号分隔。
花括号保存对象:使用{}定义json 格式。
方括号保存数组:[]。
2. 获取数据
2.1 json对象.键名
2.2 json对象[“键名”]
2.3 数组对象[索引]
获取数据代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.基本格式
var person1 = {"name": "疾风剑豪", "age": "23", "gender": true};
//能弹出object说明json定义正确。
//alert(person1);//Object
//获取方式1
alert(person1.name);//疾风剑豪
//获取方式2
alert(person1["name"]);//疾风剑豪
//2.嵌套函数 {}->[]
var person2 = {
"person": [
{"name": "疾风剑豪", "age": "23", "gender": true},
{"name": "影流之主", "age": "24", "gender": true},
{"name": "刀锋之影", "age": "25", "gender": true}
]
};
/*
如果person中只有一个对象,就不用写[]。
var person2 = {
"person": {"name": "疾风剑豪", "age": "23", "gender": true}
};
*/
//获取方式1
alert(person2["person"][0]["name"]);//疾风剑豪
//获取方式2
alert(person2.person[1].name);//影流之主
//3.嵌套函数 []->{}
var person3 = [
{"name": "机械先驱", "age": "22", "gender": true},
{"name": "关辉女郎", "age": "18", "gender": false},
{"name": "诡术妖姬", "age": "26", "gender": false}
];
//获取方式1
alert(person3[0].name);//机械先驱
//获取方式2
alert(person3[1]["name"]);//关辉女郎
</script>
<body>
</body>
</html>
2.4 遍历
遍历代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.基本格式
var person1 = {"name": "疾风剑豪", "age": "23", "gender": true};
//3.嵌套函数 []->{}
var person3 = [
{"name": "机械先驱", "age": "22", "gender": true},
{"name": "关辉女郎", "age": "18", "gender": false},
{"name": "诡术妖姬", "age": "26", "gender": false}
];
//获取person1值
for (var key in person1) {
//获取键
//alert(key);
//获取值
//alert(person1.key); //因为key是字符串,person1."name",所以获取不到。
//alert(person1[key]);
}
//获取person3的值
for (var i = 0; i < person3.length; i++) {
var per = person3[i];
for(var key in per){
alert(per[key]);
}
}
</script>
<body>
</body>
</html>
3. JSON数据和Java对象的相互转换
3.1 JSON解析器
常见的解析器:Jsonlib,Gson,fastjson,jackson(这个解析器是spring自带的,所以学习该解析器。)
3.2 JSON转为Java对象步骤
3.2.1 导入jackson的相关jar包
3.2.2 创建Jackson核心对象 ObjectMapper
3.2.3 调用ObjectMapper的相关方法进行转换
readValue(json字符串数据,Class)
3.3 Java对象转换JSON步骤
3.3.1 导入jackson的相关jar包
3.3.2 创建Jackson核心对象 ObjectMapper
3.3.3 调用ObjectMapper的相关方法进行转换
3.3.3.1 转换方法
writeValue(参数1,obj)
参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中。
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中。
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中。
writeValueAsString(obj):将对象转为json字符串。
转换方法代码演示
public class TestJackson {
@Test
//Java对象转为JSON字符串
public void test1() throws IOException {
//1.创建Person对象
Person p = new Person();
p.setName("疾风剑豪");
p.setAge(23);
p.setGender("男");
//2.创建jackson核心对象
ObjectMapper om = new ObjectMapper();
/*
转换方法:
writeValue(参数1,obj):
参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
writeValueAsString(obj):将对象转为json字符串
*/
//将对象转化为JSON字符串,并保存到指定到文件中。
//om.writeValue(new File("a.txt"),p);//{"name":"疾风剑豪","age":23,"gender":"男"}
//将对象转化为JSON字符串,并保存到指定到文件中。
//om.writeValue(new FileWriter("b.txt"), p);//{"name":"疾风剑豪","age":23,"gender":"男"}
//将对象转化为JSON字符串,并保存到一个字节输出流中
FileOutputStream fis = new FileOutputStream(new File("c.txt"));
//om.writeValue(fis, p);//{"name":"疾风剑豪","age":23,"gender":"男"}
//将对象转为json字符串
String s = om.writeValueAsString(p);
System.out.println(s);//{"name":"疾风剑豪","age":23,"gender":"男"}
}
}
3.3.3.2 注解
1. @JsonIgnore:排除属性。
2. @JsonFormat:属性值得格式化
@JsonFormat(pattern = "yyyy-MM-dd")
Person类
public class Person {
private String name;
private int age;
private String gender;
//@JsonIgnore //清除属性注解
@JsonFormat(pattern = "yyyy-MM-dd") //格式化属性注解
private Date birthday;
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 getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
@Override
public String toString() {
return "Person{" +
"name='" + name + '\'' +
", age=" + age +
", gender='" + gender + '\'' +
", birthday='" + birthday + '\'' +
'}';
}
}
注解代码演示
public class TestJackson {
@Test
public void test2() throws JsonProcessingException {
//1.创建Person对象
Person p = new Person();
p.setName("影流之主");
p.setAge(25);
p.setGender("男");
p.setBirthday(new Date());
//2.创建jackson核心对象
ObjectMapper om = new ObjectMapper();
//3.将对象转化为JSON字符串
String s = om.writeValueAsString(p);
System.out.println(s);
//没有添加清除属性注解结果:{"name":"影流之主","age":25,"gender":"男","birthday":1589082853426};
//添加清除属性注解结果:{"name":"影流之主","age":25,"gender":"男"};
//添加格式化属性注解结果:{"name":"影流之主","age":25,"gender":"男","birthday":"2020-05-10"}
}
}
3.3.3.3 复杂java对象转换
1. List:数组
2. Map:对象格式一致
复杂java对象转换
public class TestJackson {
@Test
public void test3() throws JsonProcessingException {
//1.创建Person对象
Person p1 = new Person();
p1.setName("疾风剑豪");
p1.setAge(23);
p1.setGender("男");
Person p2 = new Person();
p2.setName("影流之主");
p2.setAge(24);
p2.setGender("男");
Person p3 = new Person();
p3.setName("刀锋之影");
p3.setAge(25);
p3.setGender("男");
//2.创建集合
List list = new ArrayList<Object>();
list.add(p1);
list.add(p2);
list.add(p3);
//3.创建jackson核心对象
ObjectMapper om = new ObjectMapper();
//4.将对象转化为JSON字符串
String s = om.writeValueAsString(list);
System.out.println(s);
/*
[
{"name":"疾风剑豪","age":23,"gender":"男"},
{"name":"影流之主","age":24,"gender":"男"},
{"name":"刀锋之影","age":25,"gender":"男"}
]
*/
}
@Test
public void test4() throws JsonProcessingException {
//1.创建Person对象
Person p1 = new Person();
p1.setName("疾风剑豪");
p1.setAge(23);
p1.setGender("男");
Person p2 = new Person();
p2.setName("影流之主");
p2.setAge(24);
p2.setGender("男");
Person p3 = new Person();
p3.setName("刀锋之影");
p3.setAge(25);
p3.setGender("男");
//2.创建一个Map集合
Map<String, Object> map = new HashMap<String, Object>();
map.put("001", p1);
map.put("002", p2);
map.put("003", p3);
//3.创建jackson核心对象
ObjectMapper om = new ObjectMapper();
//4.将对象转化为JSON字符串
String s = om.writeValueAsString(map);
System.out.println(s);
/*
{
"001":{"name":"疾风剑豪","age":23,"gender":"男"},
"002":{"name":"影流之主","age":24,"gender":"男"},
"003":{"name":"刀锋之影","age":25,"gender":"男"}
}
*/
}
}
案例:校验用户名是否存在
1. 服务器响应的数据,在客户端使用时,要想当做json数据格式使用。有两种解决方案:
1. 客户端解决方案:$.get(type):将最后一个参数type指定为"json"
2. 服务器端:在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8");
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//为文本框绑定一个离焦事件
$("#username").blur(function () {
//获取文本输入的值
var username = $("#username").val();
//发送异步请求
$.post("checkUsername", {"username": username}, function (data) {
//获取span元素
var $span = $("#u_span");
//判断用户是否存在
if (data.userExsit) {
//设置字体样式
$span.css("color","red");
$span.html(data.message);
} else {
$span.css("color","green");
$span.html(data.message);
}
}/*, "json"*/
);
});
});
</script>
<body>
<form>
用户:<input id="username" type="text"><span id="u_span"></span ><br>
密码:<input type="text"><br>
<input type="button" value="提交">
</form>
</body>
</html>
checkUsername代码演示
@WebServlet("/checkUsername")
public class CheckUsername extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求参数
String username = request.getParameter("username");
//创建一个map集合用于存储数据
Map<String, Object> map = new HashMap<String, Object>();
//这里我就不去查数据库了,只要用户名和ginger相同就认为用户名重复。
if ("ginger".equalsIgnoreCase(username)) {
map.put("userExsit", true);
map.put("message", "此用户名太受欢迎,请更换一个");
} else {
map.put("userExsit", false);
map.put("message", "该用户名可用");
}
//通知响应格式
//application/json文本格式是json
response.setContentType("application/json;charset=utf-8");
//创建jackson核心对象
ObjectMapper om = new ObjectMapper();
om.writeValue(response.getWriter(), map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}