AJAX作用
1.与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据,使用了AJAX和服务器进行通信,就可以使用HTML+AJAX来替换SP页面了
2.异步交互:可以在不重新加截整个页面的情况下,与服务器交换数掘并更新部分网页的技术,如:搜索联想.用户名是杏可用校验,等等..
同步和异步
AJAX快速入门
Axios快速入门
导入js文件
servlet部分代码
package cn.lexed.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/axiosA")
public class Axios1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//响应数据到Html 浏览器解析html
response.getWriter().write("hello axios~");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
html部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- 1.引入axios的js文件 -->
<script src="js/axios-0.18.0.js"></script>
<script>
axios({
method:"get", //请求方式
url:"http://localhost:8080/AJAX20230817/axiosA"
}).then(function(resp){ //服务器响应回来的数据赋值到resp
alert(resp.data);
})
</script>
<body>
</body>
</html>
结果展示