忙裡偷閒的部落格

今天因故被問到了一個問題：

假設前端有10個ajax，今已非同步方式，依照前端ajax的順序跟後端要資料，這可考倒我了。玩過ajax非同步都知道，它回來的順序是無法控制的。例如以下demo:

<scripttype="text/javascript">

        $(document).ready(function () {

            q1();

            q2();

            q3();

        })

    </script>

<script>

        function q1() {

　　　　　　// Return "1";

            $.ajax({

                url: 'Default.aspx/getNumber1',

                data: [],

                dataType: 'json',

                type: 'POST',

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    console.log(data.d);

                }

            })

        }

        function q2() {

           // Return "2";

            $.ajax({

                url: 'Default.aspx/getNumber2',

                data: [],

                dataType: 'json',

                type: 'POST',

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    console.log(data.d);

                }

            })

        }

        function q3() {

           // Return "3";

            $.ajax({

                url: 'Default.aspx/getNumber3',

                data: [],

                dataType: 'json',

                type: 'POST',

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    console.log(data.d);

                }

            })

        }

    </script>

然後在瀏覽器底下多重整幾次，就能觀察到傳回值並未照著function的順序回傳。

於是詢問GOOGLE大神後，它真是有求並應，讓我找到了一個元件ajaxq，它的概念就跟Queue一樣，讓你的ajax能依序執行。依序執行有何好處呢？這樣做能防止同時對server端封送大量的請求，造成server的負擔。因為現在的網頁資訊豐富，動不動就以ajax call後端，很可能一個頁面就寫了數十個ajax，所以以ajax query的寫法能減輕server的負擔。寫法如下:

$(document).ready(function () {

            $.ajaxq("myq", {

                url: 'Default.aspx/getNumber1',

                data: [],

                dataType: 'json',

                type: 'POST',

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    console.log(data.d);

                }

            });

            $.ajaxq("myq", {

                url: 'Default.aspx/getNumber2',

                data: [],

                dataType: 'json',

                type: 'POST',

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    console.log(data.d);

                }

            });

            $.ajaxq("myq", {

                url: 'Default.aspx/getNumber3',

                data: [],

                dataType: 'json',

                type: 'POST',

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    console.log(data.d);

                }

            });

        })

如此，再多刷幾次網頁，觀察console的變化，它果然乖乖的依序執行了 ^^

AjaxQ下載處:https://github.com/Foliotek/AjaxQ