文章目录
Ajax简介
异步交互、局部刷新。其实就是javascript，只是进行了封装。
比如：看直播，点赞、刷弹幕等；网页分块展示；验证电话号码时提醒消息等
Ⅰ、原生JS实现Ajax请求
步骤：
1、创建核心对象XMLHttpRequest
2、指定发送请求的相关内容（方式、路径、同异步）
3、发送请求
4、定义onreadystatechange事件（内容改变自动触发），注意全小写
5、当状态为4的时候，获取服务器的响应数据
6、处理数据
一、练习——原生JS实现点赞的功能
video_js.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小视频直播</title>
<script type="text/javascript">
//点赞的函数
function like(){
//创建核心对象
var xhr = new XMLHttpRequest();
//指定发送请求的内容（方式、路径、同异步）
xhr.open("post","videoServlet",true);
//向servlet发送请求
xhr.send();
//定义事件（接收请求，并处理数据）
xhr.onreadystatechange = function(){
//获取状态码
var state = xhr.readyState;
if(state == 4){//请求已完成，响应已就绪
var num = xhr.responseText;//获取返回数据responseText、responseXML
document.getElementById("count").innerText = num;
}
}
}
</script>
</head>
<body>
<video src="video/小视频直播.mp4" width="500" controls="controls" autoplay="autoplay"></video>
<br/>
<input type="button" value="点赞" onclick="like()">
点赞数<span style="color: red" id="count"></span><!-- 初始值是个bug没解决，这里主要使用原生JS实现点赞 -->
</body>
</html>
videoServlet.java代码
@WebServlet("/videoServlet")
public class videoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public videoServlet() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//每个客户端都共有的数据
ServletContext sc = getServletContext();
//获取目前的点赞数(因为可能本客户端是第一个访问用户，存在null的可能，所有用Integer比较合理)
Integer num = (Integer) sc.getAttribute("num");
if(num == null) {
num = 1;
}else {
num += 1;
}
//放回已经修改的点赞数
sc.setAttribute("num", num);
//将点赞数，返回给ajax(out流谁调用返回给谁。没有ajax时，就返回给浏览器)
PrintWriter out = response.getWriter();
out.print(num);
//关闭out流
out.close();
}
}
Ⅱ、jQuery版本的Ajax请求
jQuery封装Ajax的常用方法ajax()、get()、post()。
以上三个方法都需要指名响应数据类型
1）text：字符串
2）XML：XML标签类型
3）HTML：HTML标签
4）Script：脚本
5）JSON：JSON类型
6）JSONP：JSON类型，支持跨域访问
一、练习——jQuery的ajax()实现点赞的功能
$.ajax({
url:"路径",
type:"get/post",
data:没有（null）或者有很多{"key1":"valu1","key2":"value2"},
dataType:"响应数据的类型"，
success:funcation(obj){},
error:funcation(XMLHttpRequest,textStatus,errorThrom){}
});
注意：
1、每组值之间用逗号隔开；
2、前三个请求；后三个响应；
3、顺序没有要求；
4、只有dataType有大写。
1、videoServlet一样,省略
2、video_jQuery.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小视频直播</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//复习：就绪函数
$(function(){
$("[type='button']").click(function(){//这里使用的属性选择器
$.ajax({
url:"videoServlet",
type:"post",
data:null,
dataType:"text",//小文本
success:function(obj){//obj就是服务器响应数据
$("#count").text(obj);
},
error:function(){
alert("服务器开小差了，请重新刷新页面！！！");
}
});
});
});
</script>
</head>
<body>
<video src="video/小视频直播.mp4" width="500" controls="controls" autoplay="autoplay"></video>
<br/>
<input type="button" value="点赞">
点赞数量<span style="color: red" id="count"></span><!-- 初始值是个bug没解决，这里主要使用原生JS实现点赞 -->
</body>
</html>
关于jQuery的相关知识点，如选择器，👉点击👈https://blog.csdn.net/Today_He/article/details/108772926
二、练习——jQuery的get()、post()实现点赞的功能
$.get("路径",{"key1":"valu1","key2":"value2"},function(){},"响应数据的类型");
$.post("路径",{"key1":"valu1","key2":"value2"},function(){},"响应数据的类型");
注意：
1、顺序不可变；
2、不携带数据，就写null；
3、function(){}是成功的回调函数；
4、get()不能发送post请求；post()不能发送个体请求。
1、videoServlet一样,省略
2、video_jQuery_post.jsp代码上面写的post请求，这里也只展示post()，get()一样，只是方法名不同
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小视频直播</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//复习：就绪函数
$(function(){
$("[type='button']").click(function(){
$.post("videoServlet",null,function(obj){
$("#count").text(obj);
},"text");
});
});
</script>
</head>
<body>
<video src="video/小视频直播.mp4" width="500" controls="controls" autoplay="autoplay"></video>
<br/>
<input type="button" value="点赞">
点赞数量<span style="color: red" id="count"></span><!-- 初始值是个bug没解决，这里主要使用原生JS实现点赞 -->
</body>
</html>
Ⅲ、JSON
一种特殊格式的字符串（不是类型）
比如使用JSON格式表示：
1、数组 "[1,2,3]"
2、对象 "{\"key1\":value1,\"key2\":value2}"
1、value是数字就不需要打双引号了；否则还是用\"\"引起来。
2、双引号中还是使用双引号（转义之后的）
3、混合（对象+数组） "[{\"key1\":value1,\"key2\":value2},{\"key1\":value1,\"key2\":value2}]"
4、布尔 直接传true或者false回来即可，不要放在双引号里面……
一、练习——JSON之混合测试
json.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//复习：就绪函数
$(function(){
$.ajax({
url:"jsonServlet",
type:"post",
data:null,
dataType:"json",//小文本
success:function(obj){//obj就是服务器响应数据
/* for(var i=0;i<obj.length;i++){
console.log(obj[i].name);
} */
$(obj).each(function(index,content){
console.log(content.name);
});
},
error:function(){
alert("服务器开小差了，请重新刷新页面！！！");
}
});
});
</script>
</head>
<body>
</body>
</html>
jsonServlet.java
@WebServlet("/jsonServlet")
public class jsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public jsonServlet() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String str = "[{\"id\":1,\"name\":\"HBW\",\"age\":17},{\"id\":2,\"name\":\"Mary\",\"age\":17},{\"id\":3,\"name\":\"Tom\",\"age\":18}]";
PrintWriter out = response.getWriter();
out.print(str);
out.close();
}
}
二、练习——JSON之布尔测试
json_boolean.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//复习：就绪函数
$(function(){
$.post("jsonServlet",null,function(obj){
obj ? console.log("真的"):console.log("假的");
},"json");
});
</script>
</head>
<body>
</body>
</html>
jsonServlet.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
boolean bol = true;
PrintWriter out = response.getWriter();
out.print(bol);
out.close();
}
Ⅳ、JackSon
JackSon工具：将常规数据转换成JSON格式的字符串的其中的一种工具。
第一步导包
第二部使用
一、练习——使用JackSon工具将混合类型的数据，转为JSON，并打印
jackSon_mix.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JackSon工具转换混合类型的数据</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//复习：就绪函数
$(function(){
$.post("jackSonServlet",null,function(obj){
$(obj).each(function(index,content){
console.log(content.uname);
});
},"json");
});
</script>
</body>
</html>
jackSon_mix.java
@WebServlet("/jackSonServlet")
public class jackSonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public jackSonServlet() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Users> list = new ArrayList<Users>();
list.add(new Users(1,"zs","123"));
list.add(new Users(2,"ls","123"));
list.add(new Users(3,"ws","123"));
ObjectMapper map = new ObjectMapper();
String json = map.writeValueAsString(list);
PrintWriter out = response.getWriter();
out.print(json);
out.close();
}
}
Ⅴ、Ajax进阶
一、同步、异步
异步：指的是同一脚本中存在多个Ajax时，不按顺序执行，而是并发执行。默认是异步。
好处：效率高
弊端：如果第二个Ajax需要使用第一个Ajax的结果，那么获取的值就是undefined。
同步：多个Ajax按照顺序执行。
关键字：
async：true（异步，默认）/false（同步）。当然这个关键字只能加在ajax()方法中。
一般都使用默认的异步，示例省略……
二、表单序列化
如果向servlet提价的数据过多，一条一条的写，比较复杂。为了解决该问题，就提出了表单序列化。
序列化：将复杂的东西按指定的顺序排列或组合（按照固定格式定义）。这个功能是jQuery的，不要写道原生JS中。
表单对象.serialize()
只是改变提交数据的方式，其余代码都不变
示例
<script type="text/javascript">
$(function(){
$("[type='button']").click(function(){
$.ajax({
url:"user",
type:"post",
//序列化就这里不一样，其他没啥区别（servlet获取方式也不变）
data:$("#form").serialize(),
dataType:"json",
success:function(obj){
alert("恭喜您注册成功,即将跳转至登录页面！！！");
},
error:function(){
alert("服务器开小查了，请稍后再试！！！");
}
});
});
});
</script>
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
