[jQuery] 簡單做出ajax送出後，資料處理中的鎖住畫的效果

我們用ajax送出資料後，可能需要一些處理時間，在這段期間我們不希望使用者在作其他操作，所以會有鎖住畫面的需求，網路上可以找到很多類似的屏蔽畫面套件。如果我們只需要最簡單的方式，可以參考下面的作法...
方式一：用jQuery的ajax原生屬性async
作法：
$.ajax({ url: "ajax.php", data: {"uid":"a001","pw":"1234"}, dataType:"html", async: false, success: function(data) { alert(data); } }); 說明：
async: false 代表將ajax非同步處理的特性關閉，也就是說要等ajax處理完之後才能繼續操作，所以在資料送出後，畫面會整個停住，等處理完才能恢復操作，缺點停住時是有點像瀏覽器當掉，容易造成使用者直接關掉瀏覽器。

方法二：將整個畫面上的物件隱藏起來
作法：
 $.ajax({   url: "ajax.php",   data: {"uid":"a001","pw":"1234"},   dataType:"html",   beforeSend:function(){    $('#contain').hide();    $('body').addClass('load');   },   complete:function(){    $('#contain').show();    $('body').removeClass('load');   },   success: function(data) {    alert(data);   }  }); CSS的部分： .load{   background-image:url(images/loading.gif);   background-position:50% 50%;   background-attachment:fixed;   background-repeat:no-repeat;  } 說明：
大致上就是在傳送前先將主要的DOM物件(contain)隱藏起來，所以使用者想做其他操作也沒辦法，然後，在處理完畢後，將DOM物件顯示，為了避免畫面變成一片空白很奇怪，我們可以加上loading中的動態gif圖片，然後藉由CSS放在body的正中間。