欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

AJax异步请求和同步请求的差别-知了汇智

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

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

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

 

  一、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同步测试返回结果"); 所以在界面加载完全之后显示是第二条语句执行后的结果。

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

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习web前端时使用

132 2811 3191
预约免费试学
点击咨询
预约试学