在开发手机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。

关于javascript异步编程的理解的更多相关文章

  1. JavaScript异步编程的主要解决方案—对不起，我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  2. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  3. javascript异步编程的前世今生，从onclick到await/async

    javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...

  4. JavaScript异步编程（2）- 先驱者：jsDeferred

    JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...

  5. Promises与Javascript异步编程

    Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...

  6. 5分种让你了解javascript异步编程的前世今生，从onclick到await/async

      javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...

  7. 转: Promises与Javascript异步编程

    在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这些年浏览器技术.HTML5以及CSS3等的发展,越来越多的富Web应用出现:在给与我们良好体验的同时,Web开发人员在背后需要处理越来越多 ...

  8. JavaScript异步编程

    前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...

  9. 深入解析Javascript异步编程

    这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程 ...

随机推荐

  1. uva 1590 - IP Networks（IP地址）

    习题4-5 IP网络(IP Networks, ACM/ICPC NEERC 2005, UVa1590) 可以用一个网络地址和一个子网掩码描述一个子网(即连续的IP地址范围).其中子网 掩码包含32 ...

  2. R语言数据结构二

    上节我们讲到R语言中的基本数据类型,包括数值型,复数型,字符型,逻辑型以及对应的操作和不同数值类型之间的转换.众所周知,R语言的优势在于进行数据挖掘,大数据处理等方面,因此单个的数据并不能满足我们的需 ...

  3. 【BZOJ1048】 [HAOI2007]分割矩阵

    [BZOJ1048][HAOI2007]分割矩阵 题面 bzoj 洛谷 题解 \(dp[a][b][c][d][num]\)表示将矩形\((a,b,c,d)\)分成\(num\)个的最小方差,然后转移 ...

  4. 关于iptables命令

    iptables 指令语法:iptables [-t table] command [match] [-j target/jump]-t 参数用来指定规则表,内建的规则表有三个,分别是:nat.man ...

  5. 如何为一个高负荷站点配置tomcat连接器（connector）【译文】（第一篇）

    引言 最近正好要用到这些内容,因此就找了一篇比较有分量的文章,思来想去,还是尝试写一下译文吧.其实LZ的英语是非常烂的(四级没过的LZ眼泪掉下来),因此这篇文章翻译的水平LZ自己也不敢恭维.各位猿友大 ...

  6. Python 的AES加密与解密-需要安装的模块

    踩雷1: #先导入所需要的包 pip3 install Crypto #再安装pycrtpto pin3 install pycrypto from Crypto.Cipher import AES ...

  7. Linux 安装Nginx(使用Mac远程访问)

    阅读本文需要一定的Linux基础 一 Nginx简介 nginx是用c语言编写的一款高性能的http服务器|反向代理服务器|电子邮件(IMAP/POP3)代理服务器 由俄罗斯的程序设计师Igor Sy ...

  8. appium+python+unittest 测试用例的几种加载执行方式

    利用python进行测试时,测试用例的加载方式有2种: 一种是通过unittest.main()来启动所需测试的测试模块:  一种是添加到testsuite集合中再加载所有的被测试对象,而testsu ...

  9. 基于tensorflow实现mnist手写识别 （多层神经网络）

    标题党其实也不多,一个输入层,三个隐藏层,一个输出层 老样子先上代码 导入mnist的路径很长,现在还记不住 import tensorflow as tf import tensorflow.exa ...

  10. 08-matplotlib-颜色与样式

    import numpy as np import matplotlib.pyplot as plt ''' 颜色: - 八种内置默认颜色, 缩写 b :blue g :green r :red c ...