Ajax怎么在請求過程中顯示進(jìn)度-創(chuàng)新互聯(lián)

這篇文章主要講解了“Ajax怎么在請求過程中顯示進(jìn)度”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Ajax怎么在請求過程中顯示進(jìn)度”吧！

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元雙遼做網(wǎng)站,已為上家服務(wù),為雙遼各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

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

Ajax怎么在請求過程中顯示進(jìn)度

源碼下載

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

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

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

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

  
  
    
      @ViewBag.Title  
      
        .hide{displaynone }
        .progress{z-index }
        .mask{position fixed;top ;right ;bottom ;left ; z-index ; background-color #}
         
      ...
    
     
      @RenderBody()

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

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

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

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

 
  
    
      ...
      
      
        $(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);
          };
        });
      
    
    ...

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

  Load

$("#load").click(function () { $.ajax ({ url '@Url.Action("GetContacts")', success function(result) { $("#result").html(result); } }); });

感謝各位的閱讀，以上就是“Ajax怎么在請求過程中顯示進(jìn)度”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Ajax怎么在請求過程中顯示進(jìn)度這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

分享題目：Ajax怎么在請求過程中顯示進(jìn)度-創(chuàng)新互聯(lián)
標(biāo)題URL：http://weahome.cn/article/hspid.html