目录
1、Ajax
1.1、什么是Ajax？
Ajax（ASynchronous JavaScript And XML） 异步的JavaScript 和 XML。
Ajax 是一种异步刷新技术，用来在当前页面内响应不同的请求内容。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax是前端的技术，由浏览器进行解析执行。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的 情况下，对网页的某部分进行更新。
1.2、Ajax的作用
在页面不刷新的情况下和服务器进行交互。获取服务器中的响应的数据。
1.3、同步和异步
异步：请求服务器 --- 等待服务器回应，但是在等待过程中后面如果有内容继续操作 -- 处理完毕
同步：请求服务器 --- 等待服务器回应，如果没有回应会一直等待（回应的期间，客户端不能干任何事件）
1.5、传统服务器交互和Ajax交互的区别
传统服务器交互，是由前端页面发送form表单请求到后台servlet层，再由service层、dao层进行获取数据返回至servlet层后显示到页面，而Ajax请求可以通过绑定js事件来发送请求，达到异步请求的效果，例如：在注册时在用户名框加入一个离焦事件，发送Ajax请求，查询数据库中是否存在相同用户名。
2、原生JS方式发送Ajax请求
2.1、获取XMLHttRequest对象
XMLHttprequest对象是所有浏览器内置的对象。这个对象负责和服务器之间进行数据的交互。我们在JS代码中，先得到XMLhttprequest对象，然后通过这个对象的向服务器发送数据，同时还要使用这个对象接收服务器的响应数据，在获取到响应数据之后，使用JS和解析技术，把数据添加到当前的页面上。
在html页面中加入form表单，模拟注册时候验证用户名是否存在
<form action="RegisterServlet">
用户名：<input type="text" onblur="check_user();" name="username" id="username">
密码：<input type="password" name="password" id="pwd">
<input type="submit" value="注册">
<span id="msg" style="color: red"></span>
</form>书写js代码，创建函数createXmlHttp函数，并创建check_user函数发送get请求
<script>
function createXmlHttp() {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function check_user() {
var xmlhttp = createXmlHttp();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("msg").innerHTML=xmlhttp.responseText;
}
}
//获取用户输入的用户名
var value= document.getElementById("username").value;
//get方式
xmlhttp.open("get","RegisterServlet?username="+value,true);
xmlhttp.send();
}
</script>发送post请求
<script>
function check_user() {
var xmlhttp = createXmlHttp();
//获取服务器的响应结果
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("msg").innerHTML=xmlhttp.responseText;
}
}
var value= document.getElementById("username").value;
//post方式
xmlhttp.open("post","RegisterServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username="+value);
}
</script>servlet类
这里我为了方便就直接让username判断是否为itssl
@WebServlet(urlPatterns = "/RegisterServlet")
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
//模拟数据库信息，指定用户名
if ("itssl".equals(username)) {
response.getWriter().println("用户已注册");
return;
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("get");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if ("itssl".equals(username)) {
response.getWriter().println("用户已存在");
return;
}
}
}访问register.html页面
输入itssl，离开焦点，可以看出已经提示用户已存在
3、Jquery方式发送Ajax请求
以上用JS方式进行发送Ajax请求可以看出非常的麻烦，但是Jquery方式会简化发送Ajax请求。
Jquery-3.4.1包
链接：https://pan.baidu.com/s/1K0-FKGrpbtQpIVUvEUReDQ
提取码：g3uo
3.1、$.ajax()
$.ajax({ 键名: 值, ..... 键名: 值 });
| 键名 | 描述 |
|---|---|
| url | 请求路径 |
| type | 请求方式 |
| data | 请求参数{"username":"jack","age":23} |
| success | 响应成功，处理数据。需要定义回调函数 |
| error | 响应错误。需要定义回调函数 |
| dataType | 设置接受响应数据的格式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="600" cellpadding="10px" cellspacing="0" border="1px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
<th>家庭地址</th>
<th>出生日期</th>
</tr>
</thead>
<tbody id="body_box">
</tbody>
</table>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$.ajax({
type: "get",
url: "ListServlet",
dataType: "json",
success: function (data) {
var str = "";
//使用反引号进行引用data数据
str += `
<tr>
<td>${data.id}</td>
<td>${data.name}</td>
<td>${data.age}</td>
<td>${data.phone}</td>
<td>${data.address}</td>
<td>${data.birthday}</td>
</tr>
`;
$("#body_box").append(str);
}
});
</script>@WebServlet(urlPatterns = "/ListServlet")
public class ListServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
User user = new User();
user.setId(1);
user.setName("李四");
user.setAge(21);
user.setAddress("河南");
user.setPhone("13655522211");
user.setBirthday(new Date());
//创建JSON序列化对象
ObjectMapper objectMapper=new ObjectMapper();
String s = objectMapper.writeValueAsString(user);
response.getWriter().println(s);
}
}
3.2、$.load()
Load的语法 ： jquery对象.load(url, param ,callback) url :访问服务器地址 param :发送给服务器参数 callback :当正常返回后 执行回调函数
如果 param存在，以POST方式请求， 如果param 不存在，以GET方式请求
post方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机验证</title>
</head>
<body>
<form action="UserServlet" method="post">
手机号：<input type="text" id="pnum" name="pnum"><span id="pnumid"></span><br>
昵称：<input type="text" id="nickname" name="nickname"><br>
密码：<input type="text" id="pwd" name="pwd"><br>
<input type="submit"><br>
<span id="msg"></span>
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$("#pnum").blur(function () {
var pnum = $("#pnum").val();
if (!pnum.match("^1[35678]\\d{9}$")) {
$("#pnumid").html("手机号不正确");
} else {
//$.load post方式
$("#pnumid").load("UserServlet", {"pnum": pnum});
}
});
</script>
</html>get方式
//$.load get方式
$("#pnumid").load("UserServlet?pnum=" + pnum);
$("#pnumid").load("UserServlet", {"pnum": pnum}, function (data) {
alert(data);
}); 3.3、$.get()
$.get(url, [data], [callback], [type])
| 键名 | 描述 |
|---|---|
| url | 请求路径 |
| data | 请求参数{"username":"jack","age":23} |
| callback | 回调函数 |
| type | 响应结果的类型 |
$.get("UserServlet", {"pnum": pnum}, function (data) {
$("#msg").html(data);
}, "text");3.4、$.post()
$.post("UserServlet", {"pnum": pnum}, function (data) {
$("#msg").html(data);
}, "text");3.5、serialize()方法使用
问题： 如何将form的数据以Ajax方式发送到服务器
通过serialize 方法，将form参数转换 name=value&name=value 格式
使用serialize()方法，就不用再一个一个进行书写参数了，直接获取form表单对象调用serialize()方法就能获取所有的参数，是以name=value&name=value的形式传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myform">
用户名 <input type="text" name="username" /><br/>
密码 <input type="password" name="password" /><br/>
爱好 <input type="checkbox" name="hobby" value="体育" />体育
<input type="checkbox" name="hobby" value="读书" />读书
<input type="checkbox" name="hobby" value="音乐" />音乐 <br/>
<input type="button" value="提交" id="mybtn" />
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$("#mybtn").click(function () {
$.post("SerializeServlet",$("#myform").serialize());
});
</script>
</html>4、Json
4.1、什么是Json
JavaScript Object Notation JavaScript对象表示法
Json现在多用于存储和交换文本信息的语法。
进行数据的传输。
Json 比 XML 更小、更快，更易解析。
4.2、Json基础语法
Json数据是由键值对构成的
K:V
键用引号(单双不分)引起来
"username":"zhangsan"
'sex': '男'
'age':13
值的取值类型：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组
对象
null
数据由逗号分隔：多个键值对由逗号分隔
"username":"zhangsan" , 'age':13
花括号保存对象：使用{}定义json 格式
{"username":"zhangsan" , 'age':13}
方括号保存数组：[]
["张三","李四","王五","赵六"]
4.3、序列化Json数据
需要导入序列化json的核心jar包，一共三个
链接：https://pan.baidu.com/s/1IAvIz9265blsh_FxeqpL3Q
提取码：xorv
4.4、Java对象转Json
在学习JSON序列化之前，为了方便我们日后写实体类，频繁的写get/set方法，这里使用lombok，不用再书写set/get方法，由lombok为我们提供
lombok的jar包
链接：https://pan.baidu.com/s/1k6HQwFRAbfUePHOGkPoDkQ
提取码：d4k3
| 方法名 | 说明 |
|---|---|
| writeValueAsString | 将对象转成json字符串 |
| writeValue | 将数据写入指定文件中 |
@Data //包含set、get方法 以及toString方法
@AllArgsConstructor //有参构造
@NoArgsConstructor //无参构造
public class Person {
private int id;
private String name;
private String gender;
}@WebServlet(urlPatterns = "/ListServlet")
public class ListServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
User user = new User();
user.setId(1);
user.setName("李四");
user.setAge(21);
user.setAddress("河南");
user.setPhone("13655522211");
user.setBirthday(new Date());
//创建JSON序列化对象
ObjectMapper objectMapper=new ObjectMapper();
//调用writeValueAsString方法把java对象转为json字符串
String s = objectMapper.writeValueAsString(user);
//把json字符串写入e盘下的p.txt文件中
objectMapper.writeValue(new File("e://p.txt"),p);
//响应给前端页面
response.getWriter().println(s);
}
}4.5、JSON注解方式
public class Person {
@JsonProperty("id")//默认不写
private int id;
// @JsonProperty("username") //按json指定的方式
private String name;
private String gender;
//解决password 不显示
@JsonIgnore//忽略此字段 如果转成json格式，把注解的属性忽略掉
private String password;
//日期格式化问题
@JsonFormat(pattern = "yyyy-MM-dd") 1564035926050 转后 2019-07-25
private Date brithdy;
}4.6、list&map对象转换json
@WebServlet(urlPatterns = "/listServlet")
public class listServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Person p = new Person();
p.setId(12);
p.setName("jack");
p.setGender("郑州");
p.setPassword("123");
p.setBrithdy(new Date());
Person p2 = new Person();
p2.setId(12);
p2.setName("jack");
p2.setGender("郑州");
p.setPassword("123");
p2.setBrithdy(new Date());
Person p3 = new Person();
p3.setId(12);
p3.setName("jack");
p3.setGender("郑州");
p.setPassword("123");
p3.setBrithdy(new Date());
List<Person> list = new ArrayList<>();
list.add(p);
list.add(p2);
list.add(p3);
//ajax请求后，要把list数据进行 响应
//设置响应的数据类型 -- json
response.setContentType("application/json;charset=utf-8");
//创建jackson对象
ObjectMapper objectMapper = new ObjectMapper();
//通过jackson工具类把list集合转成json
String s = objectMapper.writeValueAsString(list);
//响应的就是json数据格式
//[{},{}.{}]
//[{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"},{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"},{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"}]
response.getWriter().print(s);
}
}@WebServlet(urlPatterns = "/mapServlet")
public class mapServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应数据格式
response.setContentType("application/json;charset=utf-8");
//把数据存在map中
Map<String,Object> map = new HashMap<>();
map.put("name","张三");
map.put("age",34);
map.put("sex","男");
//创建jackson对象
ObjectMapper objectMapper = new ObjectMapper();
//转换对象的方法
String s = objectMapper.writeValueAsString(map);
//把转换后的json串响应出去
//{"sex":"男","name":"张三","age":34}
response.getWriter().print(s);
}
}
4.7、json反序列化
| 方法名 | 说明 |
|---|---|
| readValue(String s,Class<T> aClass) | 将JSON反序列化为Java对象 |
@WebServlet(urlPatterns = "/ReadValueServlet")
public class ReadValueServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String json="{\"id\":1,\"name\":\"李四\",\"age\":21,\"phone\":\"13655522211\",\"address\":\"河南\",\"birthday\":\"2022-09-29\"}";
ObjectMapper objectMapper=new ObjectMapper();
User user = objectMapper.readValue(json, User.class);
System.out.println(user);
}
}4.8、解析JSON数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$.ajax({
type: "get",
url: "personServlet",
dataType: "json",
success:function (data) {
let str ='';
$(data).each(function (i,person) {
str += `<tr>
<td>${person.id}</td>
<td>${person.name}</td>
<td>${person.gender}</td>
<td>${person.password}</td>
<td>${person.birthdy}</td>
</tr>`;
});
$("#list").append(str)
}//success end
});//$.ajax end
</script>
</head>
<body>
<center>
<table border="1px" cellpadding="10px" cellspacing="0px" >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>性别</th>
<th>生日</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</center>
</body>
</html>
4.9、解析集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<script>
$.ajax({
type:"post",
url:"/ListServlet",
dataType:"json",//预期后台返回的数据格式为json
success:function (data) {
//$.each(arr,function(index,item){})
let str = '';
$(data).each(function (i,person) {
str += `<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].password}</td>
<td>${data[i].gender}</td>
<td>${data[i].birthdy}</td>
</tr>`;
});
$("#list").append(str);
}//success of end
})//$.ajax({}) of end
</script>
<center>
<table border="1px" cellpadding="10px" cellspacing="0px" >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>生日</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</center>
</body>
</html>