Ajax在請求過程中顯示進度的簡單實現

Ajax在請求過程中顯示進度的簡單實現_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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是它可以遮住整個頁面，並且將其背景設定為黑色。

  <!DOCTYPE html>  <html>    <head>      <title>@ViewBag.Title</title>        <style type="text/css">        .hide{displaynone }        .progress{z-index }        .mask{position fixed;top ;right ;bottom ;left ; z-index ; background-color #}      </style>         ...    </head>    <body>       <div>@RenderBody()</div>      <img id="progressImgage" class="progress hide" alt="" src="@Url.Content("~/Images/ajax-loader.gif")"/>      <div id="maskOfProgressImage" class="mask hide"></div>    </body>  </html>

然後我們通過如下的代碼為jQuery定義了另一個實現Ajax調用的方法ajax2，該方法依然調用$.ajax(options)實現Ajax調用。在ajax2方法中我們將options參數complete屬性進行了“封裝”，讓可以將顯示出來的GIF圖片和遮罩<div>隱藏起來。同時覆蓋了options的async屬性，是之總是以非同步方式執行，因為只有這樣瀏覽器才不能被鎖住，GIF也才能正常顯示。在調用$.ajax(options)進行Ajax請求之前，我們將GIF圖片和遮罩<div>顯示出來，並且將其定位在正中央。遮罩<div>的透明度進行了相應設定，所以會出現上圖（中）的效果。

 <!DOCTYPE html>  <html>    <head>      ...      <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-...min.js")"></script>      <script type="text/javascript">        $(function () {          $.ajax = function (options) {            var img = $("#progressImgage");            var mask = $("#maskOfProgressImage");            var complete = options.complete;            options.complete = function (httpRequest, status) {              img.hide();              mask.hide();              if (complete) {                complete(httpRequest, status);              }            };            options.async = true;            img.show().css({              "position" "fixed",              "top" "%",              "left" "%",              "margin-top" function () { return - * img.height() / ; },              "margin-left" function () { return - * img.width() / ; }            });            mask.show().css("opacity", ".");            $.ajax(options);          };        });      </script>    </head>    ...  </html>

那麼現在進行Ajax調用的時候只需要調用$.ajax2就可以，如下所示的是執行個體中“Load”連結的click事件的註冊代碼：

  <a href="#" id="load">Load</a>  <div id="result"></div>  <script type="text/javascript">    $("#load").click(function () {      $.ajax ({        url '@Url.Action("GetContacts")',        success function(result)        {          $("#result").html(result);        }      });    });  </script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More