ajax异步
在开发手机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是异步的请求,
这就是为什么会出现先弹出2,后弹出1,最后弹出3。
ajax同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。 而异步则这个AJAX还未从后台取完数据,其下面的代码可以先执行。 async这个属性控制着ajax的同步与异步,默认是true:异步,false:同步。