909
技術社區[雲棲]
Ajax請求過程中顯示“進度”的簡單實現
Ajax在Web應用中使用得越來越頻繁。在進行Ajax調用過程中一般都具有這樣的做法：顯示一個GIF圖片動畫表明後台正在工作，同時阻止用戶操作本頁麵（比如Ajax請求通過某個按鈕觸發，用戶不能頻繁點擊該按鈕產生多個並發Ajax請求）；調用完成後，圖片消失，當前頁麵運行重新編輯。以下圖為例，頁麵中通過一個Load鏈接以Ajax請求的方式加載數據（左）。當用戶點擊該鏈接之後，Ajax請求開始，GIF圖片顯示“Loading“狀態，同時當前頁麵被“罩住”防止用戶繼續點擊Load按鈕（中）；Ajax請求完成被返回響應的結果，結果被呈現出來的同時，GIF圖片和“遮罩”同時消失（右）。[源代碼從這裏下載]
在這裏我同樣以ASP.NET MVC應用為例，提供一種簡單的實現方式。我們GIF圖片和作為遮罩的<div>定義在布局文件中，並為它們定製了相應的CSS。其中GIF和遮罩<div>的z-index分別設置為2000和1000（這個任意，隻要能夠讓遮罩的<div>遮住當前頁麵，GIF圖片顯示在最上層即可）。後者通過設置position、top、bottom、left和right是它可以遮住整個頁麵，並且將其背景設置為黑色。
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>@ViewBag.Title</title>
5: <style type="text/css">
6: .hide{display:none }
7: .progress{z-index: 2000}
8: .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #000000}
9: </style>
10: ...
11: </head>
12: <body>
13: <div>@RenderBody()</div>
14: <img id="progressImgage" class="progress hide" alt="" src="@Url.Content("~/Images/ajax-loader.gif")"/>
15: <div id="maskOfProgressImage" class="mask hide"></div>
16: </body>
17: </html>
然後我們通過如下的代碼為jQuery定義了另一個實現Ajax調用的方法ajax2，該方法依然調用$.ajax(options)實現Ajax調用。在ajax2方法中我們將options參數complete屬性進行了“封裝”，讓可以將顯示出來的GIF圖片和遮罩<div>隱藏起來。同時覆蓋了options的async屬性，是之總是以異步方式執行，因為隻有這樣瀏覽器才不能被鎖住，GIF也才能正常顯示。在調用$.ajax(options)進行Ajax請求之前，我們將GIF圖片和遮罩<div>顯示出來，並且將其定位在正中央。遮罩<div>的透明度進行了相應設置，所以會出現上圖（中）的效果。
1: <!DOCTYPE html>
2: <html>
3: <head>
4: ...
5: <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
6: <script type="text/javascript">
7: $(function () {
8: $.ajax2 = function (options) {
9: var img = $("#progressImgage");
10: var mask = $("#maskOfProgressImage");
11: var complete = options.complete;
12: options.complete = function (httpRequest, status) {
13: img.hide();
14: mask.hide();
15: if (complete) {
16: complete(httpRequest, status);
17: }
18: };
19: options.async = true;
20: img.show().css({
21: "position": "fixed",
22: "top": "50%",
23: "left": "50%",
24: "margin-top": function () { return -1 * img.height() / 2; },
25: "margin-left": function () { return -1 * img.width() / 2; }
26: });
27: mask.show().css("opacity", "0.1");
28: $.ajax(options);
29: };
30: });
31: </script>
32: </head>
33: ...
34: </html>
那麼現在進行Ajax調用的時候隻需要調用$.ajax2就可以，如下所示的是實例中“Load”鏈接的click事件的注冊代碼：
1: <a href="#" id="load">Load</a>
2: <div id="result"></div>
3: <script type="text/javascript">
4: $("#load").click(function () {
5: $.ajax2 ({
6: url: '@Url.Action("GetContacts")',
7: success: function(result)
8: {
9: $("#result").html(result);
10: }
11: });
12: });
13: </script>
微信公眾賬號：大內老A
微博：www.weibo.com/artech
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號（原來公眾帳號蔣金楠的自媒體將會停用）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁麵明顯位置給出原文連接，否則保留追究法律責任的權利。
最後更新：2017-10-25 16:04:09