在這裡我同樣以ASP.NET
MVC應用為例，提供一種簡單的實作方式。我們GIF圖檔和作為遮罩的<div>定義在布局檔案中，并為它們定制了相應的CSS。其中GIF和遮罩<div>的z-index分别設定為2000和1000（這個任意，隻要能夠讓遮罩的<div>遮住目前頁面，GIF圖檔顯示在最上層即可）。後者通過設定position、top、bottom、left和right是它可以遮住整個頁面，并且将其背景設定為黑色。
然後我們通過如下的代碼為jQuery定義了另一個實作Ajax調用的方法ajax2，該方法依然調用$.ajax(options)實作Ajax調用。在ajax2方法中我們将options參數complete屬性進行了“封裝”，讓可以将顯示出來的GIF圖檔和遮罩<div>隐藏起來。同時覆寫了options的async屬性，是之總是以異步方式執行，因為隻有這樣浏覽器才不能被鎖住，GIF也才能正常顯示。在調用$.ajax(options)進行Ajax請求之前，我們将GIF圖檔和遮罩<div>顯示出來，并且将其定位在正中央。遮罩<div>的透明度進行了相應設定，是以會出現上圖（中）的效果。
那麼現在進行Ajax調用的時候隻需要調用$.ajax2就可以，如下所示的是執行個體中“Load”連結的click事件的注冊代碼：
作者：蔣金楠
微信公衆賬号：大内老A
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識别二維碼）關注個人公衆号（原來公衆帳号蔣金楠的自媒體将會停用）。
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。
<a href="http://www.cnblogs.com/artech/archive/2013/01/04/progress-4-ajax.html" target="_blank">原文連結</a>