概念
Asynchronous Javascript And XML：异步 JavaScript 和 XML
- 异步和同步：在客户端和服务器端在相互通信的基础上，同步时，客户端必须等待服务器的响应，在服务器响应期间，客户端不能进行其他操作；异步时，客户端不需要等待服务端的响应，客户端可以进行其他操作。
- AJAX是在无需加载整个页面的情况下，能够更新部分网页的技术。通过后台与服务器进行少量数据的交换，使网页实现异步更新。例如，点击搜索页面的搜索框，会自动弹出推荐词条。
总之，AJAX的作用是提升用户的体验，让用户的操作更加连贯，更加流畅。
实现方式
原生JS实现方式，基本不用，了解
JQuery实现方式
//首先新建一个servlet作为案例
@WebServlet(urlPatterns = "/ajaxServlet")
public class ajaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取请求参数
String username = request.getParameter("username");
//模拟处理业务逻辑，耗时5秒
try {
Thread.sleep(5000);
}catch (InterruptedException e){
e.printStackTrace();
}
//2.打印username
System.out.println(username);
//3.响应
response.getWriter().write("hello:" + username);
}
}
三种实现方式
-
$.ajax()<head> <meta charset="UTF-8"> <title>Title</title> <script src="static/js/jquery-3.2.1.min.js"></script> <script> //定义方法 function fun() { //使用$.ajax()方式 $.ajax({ url:"ajaxServlet", //请求路径 type:"POST", //请求方式 data:{"username":"tom","pwd":"123"}, //请求参数 success:function (data) { //data:接收服务器返回响应结果的值 alert(data) }, //响应成功后的回调函数 error:function () { alert("出错了") }, //如果请求响应出现错误，执行该函数（比如访问路径写错了） dataType:"text" //设置接收的响应数据的格式 }); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> -
$.get()语法：
$.get(url,[data],[callback],[type])参数：
-
url：请求路径
-
data：请求参数（多个参数逗号隔开）
-
callback：回调函数
-
type：响应结果的类型
$.get("ajaxServlet",{username:"tom"}, function(data){ alert(data); }, "text");
-
-
$.post()$.post("ajaxServlet",{username:"tom"}, function(data){ alert(data); }, "text");