第零章 准备工作
Ajax根据async进行区分同步和异步过程,当async=true异步,async=false为同步,ajax默认async为异步。
异步:Ajax不会影响整个页面的加载,相当于和浏览器加载或者用户操作分开走,互不相干,体现在用户角度就是不会有什么卡顿的感觉仿佛无事发生。
同步:那就与异步相反,Ajax和js加载处于同一条线上,就是在加载Ajax的时候,全部的过程都等停下来,也就是假死状态。
测试代码
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>index</title> <script src="js/jquery-3.6.1.js"></script> </head> <body> <script> function f() { let inputData = $("#inputData").val(); let v; $.ajax({ url: "/TestServlet", data: {"inputData": inputData}, success: function (data) { v = data; alert("Ajax:" + v); } }); alert("f():" + v); } </script> <label for="inputData"></label><input type="text" id="inputData" οnblur="f()"> </body> </html>
TestServlet.java
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/TestServlet") public class TestServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String inputData = req.getParameter("inputData"); resp.getWriter().print("TestServlet:"+inputData); } }
运行过程
前端(index.jsp)input输入框内容失去焦点后,激活 οnblur="f()" 通过Ajax发送到后端(TestServlet.java)
后端(TestServlet.java)收到数据(inputData)后打上标记("TestServlet:")后返回
alert再Ajax和f()里面弹窗显示并分别打上标记("Ajax:","f():")
说明
onblur:鼠标点击输入框外的地方会失去焦点,执行f()函数
标记:通过标记可以知道数据有没有经过后端,来自那个地方
第一章 Ajax异步
测试结果
在输入框输入:
aaa
失去焦点后
第一次弹窗:
f():undefined
第二次弹窗:
Ajax:TestServlet:aaa
思考
(1)
代码里面标记"Ajax:"在前面,标记"f():"在后面
输出结果是先输出标记"f():"后输出标记"Ajax:"
(2)
Ajax获取到了后端的数据Ajax:TestServlet:aaa
f()输出的是f():undefined
当未开启异步的时候:当js执行到Ajax的时候,Ajax和js加载处于同两条线上,各自执行各自的
Ajax去给后端发送数据的时候,js接着向下执行,当执行到alert的时候v并没有被赋值,输出f():undefined
Ajax携带数据(TestServlet:aaa)回来的时候,js的alert已经执行完了,接着向下执行,v有了值(TestServlet:aaa),alert输出Ajax:TestServlet:aaa
让Ajax和js在同一条线上执行?
设置:async=false
第二章 Ajax同步
关闭Ajax异步
index.jsp添加async:false,
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>index</title> <script src="js/jquery-3.6.1.js"></script> </head> <body> <script> function f() { let inputData = $("#inputData").val(); let v; $.ajax({ url: "/TestServlet", data: {"inputData": inputData}, async:false, success: function (data) { v = data; alert("Ajax:" + v); } }); alert("f():" + v); } </script> <label for="inputData"></label><input type="text" id="inputData" οnblur="f()"> </body> </html>
测试结果
第一次弹窗
Ajax:TestServlet:aaa
第二次弹窗
f():TestServlet:aaa
程序按照代码顺序执行,Ajax和js在同一条线上
第三章 总结
Ajax的执行默认是异步的,要想Ajax按和js同步执行需要关闭异步请求设置async=false;注意ajax异步时,写return返回也是undefined,return属于外面的函数。
参考
浅谈ajax同步、异步的问题