ajax工作模式探讨异步与同步的工作方式

最新推荐文章于 2023-06-23 16:08:14 发布

原创最新推荐文章于 2023-06-23 16:08:14 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

众筹项目专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨Ajax的工作模式，包括异步和同步两种方式。通过图解、代码示例及打印效果展示，解释了同步如何按照顺序执行，以及异步如何实现多个线程并行处理，不相互等待的特点。

1. 异步的工作方式

1.1 图解:

在这里插入图片描述

1.2 代码:

<script type="text/javascript">
    $(function () {
        $("button").click(function () {
            console.log("ajax函数之前");
            $.ajax({
                "url": "test/ajax/async.html",
                "type": "post",
                "dataType": "text",
                "success": function (response) {

                    // success是接收到服务器端响应后执行
                    console.log("ajax函数内部的success函数" + response);
                }
            });

            // 在$.ajax()执行完成后执行，不等待success()函数
            console.log("ajax函数之后");
        });
    });
</script>

1.3 打印效果:

在这里插入图片描述

2.同步的工作方式

2.1 图解：

在这里插入图片描述

2.2 代码：

<script type="text/javascript">
    $(function () {
        $("button").click(function () {
            console.log("ajax函数之前");
            $.ajax({
                "url": "test/ajax/async.html",
                "type": "post",
                "dataType": "text",
                "async": "false", // 关闭异步工作模式，使用同步方式工作。此时：所有操作在通一个线程内按顺序完成
                "success": function (response) {

                    // success是接收到服务器端响应后执行
                    console.log("ajax函数内部的success函数" + response);
                }
            });

            // 在$.ajax()执行完成后执行，不等待success()函数
            console.log("ajax函数之后");
           /* setTimeout(function () {

            }, 5000);*/
        });
    });
</script>