AJax异步请求和同步请求的差别

最新推荐文章于 2024-05-21 10:41:09 发布

Survivior_Y

最新推荐文章于 2024-05-21 10:41:09 发布

阅读量1.5w

点赞数 2

文章标签： Javascript ajax

本文链接：https://blog.csdn.net/weixin_43533825/article/details/84440591

版权

问题背景

此前，遇到一个问题：在前台界面绑定下拉框value和name，$("#" + elementID).append("<option value='" + id + "'>" + name + "</option>")，绑定之后，再通过value赋值使name显示想要的内容，绑定的value和name是通过后台采用ajax请求读取过来的，但在界面调试过程中，总是失败，无法显示想要的值，而且打开界面的时候，发现value和name已经完成绑定动作了，js控制台调试$("#id").val("temp")，也是可以的。后来发现，是ajax请求异步和同步的差别，导致失败，ajax请求默认async：true是异步请求，界面加载时请求未完成，导致绑定未完成，赋值也无法显示，在界面加载完成后请求完成，绑定完成，这时候赋值动作已经在请求完成前完成了，导致怎么无法显示我想要的值。

一、ajax异步（默认async：true）

异步：并行处理，程序向服务器发送一个请求，在结果返回之前，程序还是可以执行其它操作（以前台界面为例，用户依然可以输入其它信息，并且和服务器进行其它交付），大大节省了用户的时间，也提高用户的体验

$.ajax({
        url: actionurl,
        type: 'GET',
        data: searchdata,
        beforeSend:function(){
            console.log("not yet");
            },
        success: function (result) {
            console.log("success");
            },
        error: function (errmsg) {
            console.log("error");
        }
    })

二、ajax同步（设置async：false）

同步：顺序处理，程序向服务器发送一个请求，在结果返回之前，程序要一直等待结果返回才可以执行下一步操作

$.ajax({
        url: actionurl,
        type: 'GET',
        data: searchdata,
        async:false,
        beforeSend:function(){
            console.log("not yet");
            },
        success: function (result) {
            console.log("success");
            },
        error: function (errmsg) {
            console.log("error");
        }
    })

举个具体例子，这里test1利用ajax请求访问test2，在chrome和firefox等浏览器是不可以的，只有在IE是可以的（涉及到跨域访问）

test2.html如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>AJax异步测试返回结果</p>
</body>
</html>

异步（async默认为true无需设置）情况下：test1.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax测试</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div>
        <p>返回结果：<span id="resultView"></span></p>
    </div>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                    url:"http://*.*.*.*/test2.html",//此处换成你的服务端地址（放你test1.html的地方）
                    type:"GET",
                    data:{},
                    success:function (data) {
                        console.log("success");
                        $('#resultView').html(data);//将返回信息填入页面
                    },
                    error:function (err) {
                        console.log("error!!!!");
                    }
                });
                $('#resultView').html("Ajax同步测试返回结果");
        });
    </script>
</body>
</html>

返回结果：AJax异步测试返回结果

同步情况（设置async为false）下：test2.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax测试</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div>
        <p>返回结果：<span id="resultView"></span></p>
    </div>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                    url:"http://*.*.*.*/test2.html",//此处换成你的服务端地址（放你test1.html的地方）
                    type:"GET",
                    data:{},
                    async:false,
                    success:function (data) {
                        console.log("success");
                        $('#resultView').html(data);//将返回信息填入页面
                    },
                    error:function (err) {
                        console.log("error!!!!");
                    }
                });
                $('#resultView').html("Ajax同步测试返回结果");
        });
    </script>
</body>
</html>

返回结果：Ajax同步测试返回结果

由上面两个例子可以看出，在异步的情况中 $('#resultView').html("Ajax同步测试返回结果"); 这句语句执行时，请求还未完成，界面加载完全之前，请求完成，执行 $('#resultView').html(data); 语句，导致界面显示test2.html内容；在同步的情况中必须等请求结束后才会执行 $('#resultView').html("Ajax同步测试返回结果"); 所以在界面加载完全之后显示是第二条语句执行后的结果。

注：除非有特殊要求或需求，尽量不要用同步

Survivior_Y

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
AJax异步请求和同步请求的差别

问题背景此前，遇到一个问题：在前台界面绑定下拉框value和name，$("#" + elementID).append("<option value='" + id + "'>" + name + "</option>")，绑定之后，再通过value赋值使name显示想要的内容，绑定的value和name是通过后台采用ajax请求读取过来的，但在界面调试过程中，...
复制链接

扫一扫