关于javascript异步编程的理解

　　在开发手机app的时候，要使用ajax想向后台发送数据。然后遇到了一个bug，通过这个bug，理解了ajax异步请求的工作原理。下面是登录页面的源代码。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript" src="js/whw.js"></script>

        <script src="js/jquery.min.js"></script>

        <script src="js/jquery.md5.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <link rel="stylesheet" type="text/css" href="css/base.css" />

    </head>

    <body>

        <header class="mui-bar mui-bar-nav" id="header">

            <a class="mui-action-back mui-icon mui-icon mui-icon-arrowthinleft mui-pull-left"></a>

            <h1 style="width:86%" class="mui-title text-left"><span>|</span>登录<b>忘记密码</b></h1>

        </header>

        <div class="mui-content login" id="login">

            <div>

                <img src="img/default.png" />

            </div>

            <h3 class="h3">美团账户登录</h3>

            <ul class="mui-table-view">

                <li class="mui-table-view-cell">

                    <label for="">手机号码</label>

                    <input type="text" id="tbPhone" />

                </li>

                <li class="mui-table-view-cell">

                    <label for="">密码</label>

                    <input type="password" id="tbPwd" />

                </li>

            </ul>

            <button class="button" id="btnLogin">登录</button>

            <div class="register">

                <a href="javscript:;">立即注册</a>

                <a class="phone_login" href="javscript:;">手机号码快捷登录></a>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        mui.init();

        mui.plusReady(function() {

            document.getElementById("btnLogin").addEventListener('tap', function() {

                var phone = document.getElementById("tbPhone").value.trim();

                var pwd = document.getElementById("tbPwd").value.trim();

                var loginFlag = loginCheck(phone.pwd);

                if(loginFlag)

                {

                    alert('3      登陆成功');

                    localStorage.setItem('phone', phone);

                    plus.webview.currentWebview().close();

                    var homeWebview = plus.webview.getWebviewById('home.html');

                    homeWebview.evalJS('showUserInfo();');

                    mui.openWindow('home.html', 'home.html', { top: '0px', bottom: '51px' }, {}, false, {});

                }else {

                    alert('尬，输入有误!登录失败。。。');

                }

            });

        });

        function loginCheck(phone,pwd)

        {

            var loginFlag = false;

            $.ajax({

                url:globalUrl+'UserServlet',// 跳转到 action

                data:

                {

                    'action': 'loginHandin',

                    'id': phone,

                    'pwd': pwd

                },

                type:'post',

                cache:false,

                dataType:'json',

                success:function(data)

                {

                    alert('1       ' + data.success);

                    loginFlag = data.success;

                },

                 error : function()

                 {

                      // view("异常！");

                      alert("本机网络异常!");

                 }

            });

            alert('2          ' + loginFlag);

        }

    </script>

</html>

　　一开始，我的理解是这样的。我认为是点击登录按钮的时候，调用loginCheck方法，然后ajax向后台发送数据，数据接收成功后，执行success方法，弹出1，然后，程序顺序执行，弹出2，然后回到调用函数，再弹出3.我觉得顺序是123，但是实际测试结果显示的确是213，为什么？因为我是按照同步的思路去理解ajax的，事实上，这是错误的。ajax是异步的请求，

　　关于javascript异步编程的理解

　　这就是为什么会出现先弹出2，后弹出1，最后弹出3。

秒客网

关于javascript异步编程的理解

相关文章