目录
概念
ASynchronous JavaScript And XML--->异步的JavaScript 和 XML。
异步和同步:客户端和服务器端相互通信的基础上。
同步(false):
同步请求是指当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于生活中的排队,必须等待前一个人完成自己的事物,后一个人才能接着办。也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。
异步(默认true):
默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。
JQeury实现方式
1. $.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()发送异步请求 $.ajax({ url:"ajaxServlet", //请求路径 type:"POST", //请求方式 // data:"username=jack&age=22", //请求参数 data:{"username":"jack","age":23}, success:function (data) { alert(data); }, //响应成功后的回调函数 error:function () { alert("出错啦...") }, //响应错误会执行的回调函数 dataType:"text" //设置接收到响应数据的格式 }); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>
2. $.get():发送get请求
<!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() { $.get("ajaxServlet",{username:"rose"},function (data) { alert(data); },"text"); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>
3. $.post():发送post请求
<!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() { $.post("ajaxServlet",{username:"rose"},function (data) { alert(data); },"text"); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>