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：同步。
