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

   上一篇博客我们分享了时间控制经验《自动查询》。今天我们来分享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异步调用，但是一些特殊情况下我们也需要考虑同步调用，掌握好同步与异步之间的相互转换，非常必要！