项目优化经验分享（三）数据调用同步与异步

   上一篇博客我们分享了时间控制经验《自己主动查询》。今天我们来分享Ajax数据交换经验：数据调用同步与异步！

概念：

    是什么？

    Ajax在网页中最大的一个长处是它能够訪问server上的信息而不须要又一次载入网页，这意味着要检索或是更新信息的某一个小部分的时候，仅仅须要从server端传送那一部分须要的信息而不须要又一次下载整个网页。Ajax能够通过两种方式訪问server，即  

     同步：脚本会停留并等待server发送回复然后再继续；

     异步：脚本同意页面继续其进程并处理可能的回复。

    同步处理用户的请求有一点像又一次载入页面可是仅仅须要下载要求的信息而不是整个页面。因此这一方法会比不使用Ajax要快一些由于信息的下载量要小，所以检索的速度就快了。可是用户可能不习惯在与网页互动的时候进行等待，因此除非你要求的信息是小到能够迅速下载完的，否则用户是不会耐心去等待的。
　　异步处理避免了server检索时候的延时问题，由于用户能够继续在页面进行操作，而要求的信息也能够在更新页面的同一时候得到处理。特别是较大的请求，使用异步处理，用户则不会特别意识到延时所带来的麻烦，由于他们的注意力仍然放在对页面的操作上。而对于那些瞬时的响应，你的訪客甚至根本不会意识到server发出了这种请求。

    何时用？

　　使用异步调用是Ajax中比較受青睐也非常普遍的方法，这样的方法能够为訪客的訪问提供更便捷的服务，使得他们更愉悦，也避免了Ajax干扰其它页面的操作。

    可是在少数情况下，让你的訪客在某一特定server端的处理过程结束前，让你的訪客继续操作页面是没有什么意义的，假设是碰到这种情况，也许根本不要使用Ajax而仅仅是又一次加载整个页面。Ajax中的同步选择是为极少数既不能使用异步调用也不能又一次加载整个页面的情况而准备的。　　

    怎么用？

    异步使用Ajax对于大多数情况来说都是更好的选择。假设你仅仅需从页面发出一个Ajax调用，那么，除了那个指定要如何处理调用的參数以外，其编码方式和同步调用没有什么不同。在同样页面使用多个Ajax调用，唯一的复杂的地方是你须要为每一个请求创建一个单独的Ajax对象。各种类型的Ajax库能够为你做好这些，唯一须要你编写异步调用代码的情况是你须要与同步调用不同的操作。

实例：

    因为须要对选课数量上进行限制，在这设置的全局变量就须要实时同步，所以须要将原先的同步调用改为异步调用：

异步调用代码：

function ChooseCourse(Indexing, StudentID,WorkDay) {
    
    //调用一般处理程序
    $.post("handler/ChooseCourseTime.ashx",
        function (datatime) {
            //推断是否超过了该轮选课时间
            var obj = eval("(" + datatime + ")");
            //获取server时间
            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 + ")");
            //获取server时间
            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异步调用，可是一些特殊情况下我们也须要考虑同步调用，掌握好同步与异步之间的相互转换，很必要！