Ajax請求過程中顯示“進度”的簡單實現(xiàn)-創(chuàng)新互聯(lián)

Ajax在Web應(yīng)用中使用得越來越頻繁。在進行Ajax調(diào)用過程中一般都具有這樣的做法：顯示一個GIF圖片動畫表明后臺正在工作，同時阻止用戶操作本頁面（比如Ajax請求通過某個按鈕觸發(fā)，用戶不能頻繁點擊該按鈕產(chǎn)生多個并發(fā)Ajax請求）；調(diào)用完成后，圖片消失，當(dāng)前頁面運行重新編輯。以下圖為例，頁面中通過一個Load鏈接以Ajax請求的方式加載數(shù)據(jù)（左）。當(dāng)用戶點擊該鏈接之后，Ajax請求開始，GIF圖片顯示“Loading“狀態(tài)，同時當(dāng)前頁面被“罩住”防止用戶繼續(xù)點擊Load按鈕（中）；Ajax請求完成被返回響應(yīng)的結(jié)果，結(jié)果被呈現(xiàn)出來的同時，GIF圖片和“遮罩”同時消失（右）。[源代碼從這里下載]

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、嘉祥網(wǎng)絡(luò)推廣、微信小程序開發(fā)、嘉祥網(wǎng)絡(luò)營銷、嘉祥企業(yè)策劃、嘉祥品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供嘉祥建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

在這里我同樣以ASP.NET MVC應(yīng)用為例，提供一種簡單的實現(xiàn)方式。我們GIF圖片和作為遮罩的

定義在布局文件中，并為它們定制了相應(yīng)的CSS。其中GIF和遮罩

的z-index分別設(shè)置為2000和1000（這個任意，只要能夠讓遮罩的

遮住當(dāng)前頁面，GIF圖片顯示在最上層即可）。后者通過設(shè)置position、top、bottom、left和right是它可以遮住整個頁面，并且將其背景設(shè)置為黑色。

1:

2:

3:

   4: @ViewBag.Title

5:

  10:          ...

11:

12:

  13: @RenderBody()

14:

15:

16:

17:

然后我們通過如下的代碼為jQuery定義了另一個實現(xiàn)Ajax調(diào)用的方法ajax2，該方法依然調(diào)用$.ajax(options)實現(xiàn)Ajax調(diào)用。在ajax2方法中我們將options參數(shù)complete屬性進行了“封裝”，讓可以將顯示出來的GIF圖片和遮罩

隱藏起來。同時覆蓋了options的async屬性，是之總是以異步方式執(zhí)行，因為只有這樣瀏覽器才不能被鎖住，GIF也才能正常顯示。在調(diào)用$.ajax(options)進行Ajax請求之前，我們將GIF圖片和遮罩

顯示出來，并且將其定位在正中央。遮罩

的透明度進行了相應(yīng)設(shè)置，所以會出現(xiàn)上圖（中）的效果。