ajax同步异步学习

最近做项目的时候碰到一个场景,需要点击按钮后,按钮先置灰不可用,再提交ajax数据到后台,从网上复制粘贴一块代码后大概是这样

1.执行按钮style置灰

2.$.ajax({ 

        type: "post", 

       url: "path", 

       cache:false, 

       async:false, 

        dataType: ($.browser.msie) ? "text" : "xml", 

         success: function(xmlobj){ 

3.拿到结果做处理,恢复按钮状态

        } 

});

这样写达不到效果,观察发现总是点击按钮后没有任何反应,一直到ajax返回结果后才会触发按钮置灰效果.本来计划的1-2-3的执行顺序变成了2-1-3.几经周折找到了对应的解决办法,就是async:false, 改为async:true.这个属性决定ajax是作为同步还是异步提交,如果同步提交(就是默认的false),那么页面里所有的代码停止加载，页面处于假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除.这也就造成了我们看到的执行顺序变化的原因.改为true后异步提交,相当于执行的是两个线程，ajax块发出请求为一个线程 ,ajax块以外的脚本（另一个线程）.至此问题解决.

后来对ajax做了些研究后发现了另外两个属性beforeSend和complete,分别代表ajax提交前和提交后执行的内容,也就是说我们可以通过这两个属性对数据提交的前后做相应的其他处理,比如防止数据重复提交,可以在beforeSend里将提交按钮禁用.数据提交后,在complete里重新放开提交按钮.

// 提交表单数据到后台处理
$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
        // 禁用按钮防止重复提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        if (data == "Success") {
            //清空输入框
            clearBox();
        }
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});