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/getModelInfo',
                data: JSON.stringify(model),
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                async: true,
                success: function (data) {
                    //window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
                    alert("Postting data is over!");
                }
            });
            alert("loading data is over!")
        });
</script>

Controller:

 

執行結果截圖：這裏我們可以看到兩個alert都執行了，不過由於“$.ajax();”中的alert受數據加載延遲了一會時間，所以他執行的比“$.ajax();”後面的alert稍微晚一點，這就證明了異步

注意：同步和異步中的代碼是相同的，唯一不同點就是View中“async”的值不同，分別爲“false”、“true”！