概念
- Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 同步和异步:客户端和服务器端相互通信的基础上
- 同步:每次请求后,客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 异步:每次请求后,客户端不需要等待服务器端的响应。在服务器端处理请求的过程中,客户端可以进行其他的操作。
原生的JS实现方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun() {
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","ajaxServlet?username=tom",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var responsetext = xmlhttp.responseText;
alert(responsetext);
}
}
}
</script>
</head>
<body>
<input type="text">
<input type="button" value="发送异步请求" onclick="fun()">
</body>
</html>
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
System.out.println(username);
response.getWriter().write("hello!"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
- 效果
- 如果是同步请求,那么在点击按钮之后页面所有的元素无法进行任何操作,直到服务器处理完请求并返回响应后才可以恢复页面的操作
- 但如果是异步请求,在点击按钮之后页面其他的元素依然可以正常操作,没有任何影响。
点击按钮,但输入框依然可以进行输入
返回的响应
jQuery实现方式
- $.ajax()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
$.ajax({
url:"ajaxServlet",
type:"POST",
data:{"username":"jack","age":"23"},
success:function (data) {
alert(data);
},
error:function () {
alert("出错啦!");
},
dataType:"text"
})
}
</script>
</head>
<body>
<input type="text">
<input type="button" value="发送异步请求" onclick="fun()">
</body>
</html>
- $.get():发送get请求
- 语法: $.get(url,[data],[callback],[type])
- 参数:
- url:请求路径
- data:请求参数
- callback:载入成功时回调函数
- type:响应结果类型,xml, html, script, json, text, _default
- 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
$.get("ajaxSerrvlet",{username:"rose"},function (data) {
alert(data);
},"text");
</script>
</head>
<body>
<input type="text">
<input type="button" value="发送异步请求" onclick="fun()">
</body>
</html>
- $.post():发送post请求(与get相同)