項目優化經驗分享（三）數據調用同步與異步

   上一篇博客我們分享了時間控制經驗《自動查詢》。今天我們來分享Ajax數據交換經驗：數據調用同步與異步！

概念：

    是什麼？

    Ajax在網頁中最大的一個優點是它可以訪問服務器上的信息而不需要重新加載網頁，這意味着要檢索或是更新信息的某一個小部分的時候，只需要從服務器端傳送那一部分需要的信息而不需要重新下載整個網頁。Ajax可以通過兩種方式訪問服務器，即  

     同步：腳本會停留並等待服務器發送回覆然後再繼續；

     異步：腳本允許頁面繼續其進程並處理可能的回覆。

    同步處理用戶的請求有一點像重新加載頁面但是隻需要下載要求的信息而不是整個頁面。因此這一方法會比不使用Ajax要快一些因爲信息的下載量要小，所以檢索的速度就快了。但是用戶可能不習慣在與網頁互動的時候進行等待，因此除非你要求的信息是小到可以迅速下載完的，否則用戶是不會耐心去等待的。
　　異步處理避免了服務器檢索時候的延時問題，因爲用戶可以繼續在頁面進行操作，而要求的信息也可以在更新頁面的同時得到處理。特別是較大的請求，使用異步處理，用戶則不會特別意識到延時所帶來的麻煩，因爲他們的注意力仍然放在對頁面的操作上。而對於那些瞬時的響應，你的訪客甚至根本不會意識到服務器發出了這樣的請求。

    何時用？

　　使用異步調用是Ajax中比較受青睞也很普遍的方法，這種方法可以爲訪客的訪問提供更便捷的服務，使得他們更愉悅，也避免了Ajax干擾其他頁面的操作。

    但是在少數情況下，讓你的訪客在某一特定服務器端的處理過程結束前，讓你的訪客繼續操作頁面是沒有什麼意義的，如果是碰到這樣的情況，或許根本不要使用Ajax而只是重新載入整個頁面。Ajax中的同步選擇是爲極少數既不能使用異步調用也不能重新載入整個頁面的情況而準備的。　　

    怎麼用？

    異步使用Ajax對於大多數情況來說都是更好的選擇。如果你只需從頁面發出一個Ajax調用，那麼，除了那個指定要怎樣處理調用的參數以外，其編碼方式和同步調用沒有什麼不同。在相同頁面使用多個Ajax調用，唯一的複雜的地方是你需要爲每個請求創建一個單獨的Ajax對象。各種類型的Ajax庫可以爲你做好這些，唯一需要你編寫異步調用代碼的情況是你需要與同步調用不同的操作。

實例：

    由於需要對選課數量上進行限制，在這設置的全局變量就需要實時同步，所以需要將原先的同步調用改爲異步調用：

異步調用代碼：

function ChooseCourse(Indexing, StudentID,WorkDay) {
    
    //調用一般處理程序
    $.post("handler/ChooseCourseTime.ashx",
        function (datatime) {
            //判斷是否超過了該輪選課時間
            var obj = eval("(" + datatime + ")");
            //獲取服務器時間
            var nowTime = new Date(obj[0].nowTime);
            var thisRoundEndTime = new Date(obj[0].thisRoundEndTime);
            //判斷是否超過了選課時間
            if (nowTime > thisRoundEndTime) {
                alert(nowTime);
                alert(thisRoundEndTime);
                alert("對不起，現在已經超過了允許選課的時間！");
                return;
            } else {
                //判斷餘量是否大於0
                $.post("handler/RemainCapacity.ashx", { Indexings: Indexing },
                    function (datacapacity) {
                        var obj = eval("(" + datacapacity + ")");
                        var thisRemainCapacity = obj[0].thisRemainCapacity;
                        if (thisRemainCapacity <= 0) {
                            alert("對不起，該課程已經被選完了！");
                            return;
                        }
                        else {
                            //判斷是否選過該課程
                            ……
                                
                                else {
                                    //判斷本次選的課程上課時間是否與已選課程衝突 
                                     ……
                                        else {
                                            //執行選課
                                              ……
                                              alert("選課成功！");
                                                            });
                                                    }
                                                    else {
                                                        Page.ClientScript.RegisterStartupScript(Page.GetType(), "messege", "<script language='javascript' defer>alert('選課失敗！');</script>");
                                                        Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "location.href='ChooseCourseWEB.aspx'", true);
                                                    }
                                               ……
}

轉換爲同步調用代碼：

function ChooseCourse(Indexing, StudentID, WorkDay) {
    $.ajax({
        url: "handler/ChooseCourseTime.ashx",
        async: false,
        type: "POST",
        success: function (datatime) {
            //判斷是否超過了該輪選課時間
            var obj = eval("(" + datatime + ")");
            //獲取服務器時間
            var nowTime = new Date(obj[0].nowTime);
            var thisRoundEndTime = new Date(obj[0].thisRoundEndTime);
  
            //判斷是否超過了選課時間
            if (nowTime > thisRoundEndTime) {
                alert(nowTime);
                alert(thisRoundEndTime);
                alert("對不起，現在已經超過了允許選課的時間！");
                return;
            } else {
                $.ajax({
                    url: "handler/RemainCapacity.ashx",
                    async: false,
                    type: "POST",
                    data: { Indexings: Indexing },
                    success: function (datacapacity) {
                        var obj = eval("(" + datacapacity + ")");
                        var thisRemainCapacity = obj[0].thisRemainCapacity;

                        if (thisRemainCapacity <= 0) {
                            alert("對不起，該課程已經被選完了！");
                            return;
                        }
                        else {
                            //判斷是否選過該課程
                              ……                                    
                                    else {
                                        //判斷本次選的課程上課時間是否與已選課程衝突 
                                        ……                                              
                                                else {
                                                    //執行選課                                                                                             ……
                                                                        alert("選課成功！");

                                                                    }
                                                                });
                                                            }
                                                            else {
                                                                alert("選課失敗");
                                                                //Page.ClientScript.RegisterStartupScript(Page.GetType(), "messege", "<script language='javascript' defer>alert('選課失敗！');</script>");
                                                                //Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "location.href='ChooseCourseWEB.aspx'", true);
                                                            }
                                                       ……
}

總結：

    通過本博客，相信大家對ajax數據調用同步和異步有了更進一步的認識，雖然大部分情況下，我們使用的是Ajax異步調用，但是一些特殊情況下我們也需要考慮同步調用，掌握好同步與異步之間的相互轉換，非常必要！