首页 前端知识 Ajax异步、同步问题——Ajax和JavaScript执行顺序

Ajax异步、同步问题——Ajax和JavaScript执行顺序

2024-05-20 14:05:10 前端知识 前端哥 142 282 我要收藏

第零章 准备工作

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同步、异步的问题

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8971.html
标签
servlet
评论
会员中心 联系我 留言建议 回顶部
复制成功!