同步ajax的介绍和简单演示(非主流)

最新推荐文章于 2023-06-06 13:53:52 发布

代码一天不写我浑森蓝廋

最新推荐文章于 2023-06-06 13:53:52 发布

阅读量2.6k

点赞数

分类专栏： JavaScript Html/Css

本文链接：https://blog.csdn.net/zhang197093/article/details/72330369

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Html/Css

8 篇文章 0 订阅

订阅专栏

ajax全称是 "Asynchronous Javascript And XML" (异步的 javascript 和 XML) 可见这门技术天生就是为异步请求而存在的，异步通常都是和非阻塞还有回调联系在一起，ajax技术就是典型的例子。

当js发送ajax请求后，并不需要等待请求结束返回，而是紧接着执行之后的代码，等到请求返回时，再去回调成功(success)或失败(error)的方法, 这对于加快页面加载是很有利的，但是，有时这种特性也会对我们造成一定的困扰，当我们从上到下写了多个ajax请求时，我们并不能保证代码的执行顺序和代码的书写顺序一致。

例如如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax test</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>


<script>

    console.log("ajax1 start ...");

    $.ajax({
        url: 'test.php',
        method: 'GET',
        dataType : 'text',
        success : function (rt) {
            console.log("ajax1 rt: " + rt);
        }
    });


    console.log("ajax2 start ...");
    $.ajax({
        url: 'test.php',
        method: 'GET',
        dataType : 'text',
        success : function (rt) {
            console.log("ajax2 rt: " + rt);
        }
    });


    console.log("ajax3 start ...");
    $.ajax({
        url: 'test.php',
        method: 'GET',
        dataType : 'text',
        success : function (rt) {
            console.log("ajax3 rt: " + rt);
        }
    });

</script>

</body>
</html>

test.php

<?php

echo date('Y-m-d H:i:s');

执行结果

如果后面的ajax对前面的ajax执行结果存在依赖的话这样写就会有问题，通常的做法是把后面的ajax写在前一个ajax的回调方法里这种方法这里就不介绍了，我们介绍一下同步的ajax，ajax参数里有一个 async，默认值为 true，表示用异步方式请求，当设置为false时，则表示同步请求，把上面的代码稍微修改下