AJAX
- 概念：异步的JavaScript和XML
- 异步和同步：客户端和服务器端相互通信的基础上。同步中客户端必须等待服务器端的响应，在等待的期间不能做其他操作；异步中客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。
- 实现方式
- 原生的JS实现方式(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/*
open方法参数：
1.请求方式：GET\SET
*GET方式：请求参数在URL后边拼凑，send方式为空参
*SET方式：请求参数在send方法中定义
2.请求的URL
3.同步或者异步请求：true：异步 false：同步
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.GET方式发送请求
xmlhttp.send();
//4.接收并处理服务器的响应结果
//获取方式：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlHttp对象就绪状态改变时，触发onreadystatechange事件
xmlhttp.onreadystatechange=function () {
//判断就绪状态是否为4并且判断status状态码是否是200
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//获取服务器的响应结果
var responseText=xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
Servlert代码
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数
String username = request.getParameter("username");
//处理业务逻辑、耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2.打印username
System.out.println(username);
//3.响应
response.getWriter().write("hello"+username);
}
- JQuery实现方式
1. . a j a x ( ) ∗ 语 法 ： .ajax() * 语法： .ajax()∗语法：.ajax({键值对});
* $.ajax({
url:“ajaxServlet”, //请求路径
type:“POST”, //请求方式
// data:“username=jack&age=23”, //请求参数
data:{“username”:“jack”,“age”:23},
success:function (data) {
alert(data)
}, //响应成功后,执行回调函数
error:function () {
alert(“出错了”)
} , //如果响应出错，会执行的回调函数
dataType:“text” //设置接收到的响应数据的格式
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<script>
//定义方法
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet", //请求路径
type:"POST", //请求方式
// data:"username=jack&age=23", //请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data)
}, //响应成功后,执行回调函数
error:function () {
alert("出错了")
} , //如果响应出错，会执行的回调函数
dataType:"text" //设置接收到的响应数据的格式
})
}
</script>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</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.js"></script>
</head>
<body>
<script>
//定义方法
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text")
</script>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
3. $.post()：发送post请求
* 语法：$.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.js"></script>
</head>
<body>
<script>
//定义方法
$.post("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text")
</script>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>