Ajax同步、异步执行简单理解与证明

此理解范例代码来自前几篇随笔！

首先我们来先了解下AJAX：

Ajax:全称“Asynchronous javascript and xml”(异步Javascript和XML)，他是由Javascript+CSS+DOM+xmlhttpRequest的四种技术的结合，并且JS是Ajax的核心。jQuery将Ajax的实现变得更加轻松容易。Ajax就是我们常说的局部刷新！

重在实际操作练习一下！！！！！

在$.ajax()中我们可以常常看到async,这就是来指定ajax同步异步的，需要记忆一下：

记忆方法：

　　sync英语中的意思是：“同步”、“同步的”、“同步处理”

　　前面加个“a”,构成async英文中的意思是：“异步”

　　再者给他指定true和false那就容易理解了：

1. 　　　　“async:true” 意思是：“异步”
2. 　　　　“async:false” 意思是：“同步”

分析async作用：

当“async：true”时，也就是异步执行ajax,所以不管ajax数据是否已经加载完成，ajax后面的语句都要执行！

当“async：false”时，也就是同步执行ajax,这是指必须等ajax数据加载完成，才可以执行ajax后面的语句！

注意：这里的ajax数据加载是指“$.ajax( 数据传输代码 );”部分！

证明方法及说明：

我们可以利用javascript中的“alert();”来证明，大家都知道，当alert弹出一个警告框的话，不点击确定就不会运行接下来的程序，所以我们可以在“$.ajax();”后面写个alert，再在“$.ajax();”里的success回调函数中写一个alert。设置async的值来看看两个alert的执行情况就可以证明出来同步还是异步了!我们来试试...

下面举例代码说明：

　　同步证明（async:false）：

Model:

public class Model    {        public string rtoNumber { set; get; }        public string apPRover { set; get; }        public string modifier { set; get; }        public string comment { set; get; }    }

View:

<div id="container">        <table id="table">            <tr>                <td><label>RTONumber</label><input name="rtoNumber" /></td>                <td><label>Approver</label><input name="approver" /></td>                <td><label>Modifier</label><input name="modifier" /></td>                <td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td>            </tr>        </table>        <input id="submit" type="button" value="submit"/></div>

<script type="text/javascript">        $(function () {            $('#submit').click(function () {                var model = [];                var RTONumber = $("input[name=rtoNumber]").val();                var Approver = $("input[name=approver]").val();                var Modifier = $("input[name=modifier]").val();                var Comment = $("textarea[name=comment]").val();                model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment });            });            $.ajax({                url: '/TransportModelData/getModelInfo',                data: JSON.stringify(model),                type: 'POST',                contentType: 'application/json;charset=utf-8',                async: false,                success: function (data) {                    //window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;                    alert("Postting data is over!");                }            });            alert("loading data is over!")        });</script>

Controller:

public class TransportModelDataController : Controller    {        //        // GET: /TransportModelData/        public ActionResult Index()        {            return View();        }        public ActionResult getModelInfo(List<Model> model)        {            string rtoNumber = model[0].rtoNumber;            string modifier = model[0].modifier;            string comment = model[0].comment;            string approver = model[0].approver;            return Content("");        }    }

执行结果截图：这里我们可以看到只执行了“$.ajax();”中的alert，并没有执行他后面的alert

　　异步证明（async:true）：

Model:

public class Model    {        public string rtoNumber { set; get; }        public string approver { set; get; }        public string modifier { set; get; }        public string comment { set; get; }    }

View:

<div id="container">        <table id="table">            <tr>                <td><label>RTONumber</label><input name="rtoNumber" /></td>                <td><label>Approver</label><input name="approver" /></td>                <td><label>Modifier</label><input name="modifier" /></td>                <td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td>            </tr>        </table>        <input id="submit" type="button" value="submit"/></div>

<script type="text/javascript">        $(function () {            $('#submit').click(function () {                var model = [];                var RTONumber = $("input[name=rtoNumber]").val();                var Approver = $("input[name=approver]").val();                var Modifier = $("input[name=modifier]").val();                var Comment = $("textarea[name=comment]").val();                model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment });            });            $.ajax({                url: '/TransportModelData/