Ajax请求中的async:false/true的作用

作者: JONE 分类: 前端学习 发布时间: 2017-12-07 21:31

test.html

<a href=”javascript:void(0)” onmouseover=”testAsync()”>

asy.js

function testAsync(){
var temp;
$.ajax({
async: false,
type : “GET”,
url : ‘tet.php’,
complete: function(msg){
alert(‘complete’);
},
success : function(data) {
alert(‘success’);
temp=data;
}
});
alert(temp+’ end’);
}

tet.php

<?php

echo “here is html code”;
sleep(5);

?>

async: false,(默认是true);
如上:false为同步,这个 testAsync()方法中的Ajax请求将整个浏览器锁死,
只有tet.php执行结束后,才可以执行其它操作。

当async: true 时,ajax请求是异步的。但是其中有个问题:testAsync()中的ajax请求和其后面的操作是异步执行的,那么当tet.php还未执行完,就可能已经执行了 ajax请求后面的操作,
如: alert(temp+’ end’);
然而,temp这个数据是在ajax请求success后才赋值的,结果,输出时会为空。

如果想获取ajax获取的数据然后再全局变量中调用,那么要设置 async: false


DEMO_two

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../javascripts/jquery-2.1.4.js"></script>
    <script>window.onload = function () {
        $.post("Handler.ashx", {flag: 1}, function (_data) {
            if (_data) {
                var html = "";
                html += "<table border='1'>";
                for (var i = 0; i < _data.length; i++) {
                    var pj00401 = _data[i].pj00401;
                    html += "<tr>";
                    html += "<td>" + _data[i].pj00402 + "</td>";
                    html += "<td>" + getHtml(pj00401) + "</td>";
                    html += "</tr>";
                }
                html += "</table>";
                $("#div1").append(html);
            }
        }, "json");
        var getHtml = function (_pj00401) {
            var _html = "";
            $.ajaxSettings.async = false;
//重要设置
            $.get("Handler.ashx", {flag: 102, pj00401: _pj00401}, function (_data) {
                if (_data) {
                    _html = "<table>";
                    _html += "<tbody> ";
                    for (var i = 0; i < _data.length; i++) {
                        _html += "<tr>";
                        _html += "<td>" + _data[i].pj00402 + "</td>";
                        _html += "</tr>";
                    }
                    _html += "</tbody>";
                    _html += "</table>";
                }
            }, "json");
            return _html;
        }
    } </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注