快捷導(dǎo)航

Ajax在請(qǐng)求過(guò)程中顯示進(jìn)度的簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2015年09月21日 10:12:01 作者：Artech

ajax技術(shù)在web應(yīng)用中使用非常頻繁，本文以asp.net MVC為示例，提供一種簡(jiǎn)單的實(shí)現(xiàn)方式。ajax在請(qǐng)求過(guò)程中顯示進(jìn)度條，是怎么實(shí)現(xiàn)的呢？本文通過(guò)代碼和文字說(shuō)明相結(jié)合的方式分享給大家。

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

源碼下載

在這里我同樣以ASP.NET MVC應(yīng)用為例，提供一種簡(jiǎn)單的實(shí)現(xiàn)方式。我們GIF圖片和作為遮罩的<div>定義在布局文件中，并為它們定制了相應(yīng)的CSS。其中GIF和遮罩<div>的z-index分別設(shè)置為2000和1000（這個(gè)任意，只要能夠讓遮罩的<div>遮住當(dāng)前頁(yè)面，GIF圖片顯示在最上層即可）。后者通過(guò)設(shè)置position、top、bottom、left和right是它可以遮住整個(gè)頁(yè)面，并且將其背景設(shè)置為黑色。

  <!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>

然后我們通過(guò)如下的代碼為jQuery定義了另一個(gè)實(shí)現(xiàn)Ajax調(diào)用的方法ajax2，該方法依然調(diào)用$.ajax(options)實(shí)現(xiàn)Ajax調(diào)用。在ajax2方法中我們將options參數(shù)complete屬性進(jìn)行了“封裝”，讓可以將顯示出來(lái)的GIF圖片和遮罩<div>隱藏起來(lái)。同時(shí)覆蓋了options的async屬性，是之總是以異步方式執(zhí)行，因?yàn)橹挥羞@樣瀏覽器才不能被鎖住，GIF也才能正常顯示。在調(diào)用$.ajax(options)進(jìn)行Ajax請(qǐng)求之前，我們將GIF圖片和遮罩<div>顯示出來(lái)，并且將其定位在正中央。遮罩<div>的透明度進(jìn)行了相應(yīng)設(shè)置，所以會(huì)出現(xiàn)上圖（中）的效果。

 <!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>

那么現(xiàn)在進(jìn)行Ajax調(diào)用的時(shí)候只需要調(diào)用$.ajax2就可以，如下所示的是實(shí)例中“Load”鏈接的click事件的注冊(cè)代碼：

  <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>

您可能感興趣的文章: