穿越小说排行榜,殿上欢

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

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

Ajax在Web應(yīng)用中使用得越來(lái)越頻繁。在進(jìn)行Ajax調(diào)用過程中一般都具有這樣的做法：顯示一個(gè)GIF圖片動(dòng)畫表明后臺(tái)正在工作，同時(shí)阻止用戶操作本頁(yè)面（比如Ajax請(qǐng)求通過某個(gè)按鈕觸發(fā)，用戶不能頻繁點(diǎn)擊該按鈕產(chǎn)生多個(gè)并發(fā)Ajax請(qǐng)求）；調(diào)用完成后，圖片消失，當(dāng)前頁(yè)面運(yùn)行重新編輯。

以下圖為例，頁(yè)面中通過一個(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圖片和作為遮罩的

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

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

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

  
 
 
 
   
  
  
   
   
  
  
   
   
  
  
       
   
  
  
           @ViewBag.Title    
   
  
  
           
   
  
  
               .hide{display:none } 
   
  
  
               .progress{z-index: 2000} 
   
  
  
               .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #000000} 
   
  
  
                 
   
  
  
           ... 
   
  
  
      
   
  
  
        
   
  
  
          @RenderBody()

然后我們通過如下的代碼為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圖片和遮罩

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

顯示出來(lái)，并且將其定位在正中央。遮罩

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

  
 
 
 
   
  
  
  
   
  
  
  
   
  
  
      
   
  
  
          ... 
   
  
  
          
   
  
  
          
   
  
  
              $(function () { 
   
  
  
                  $.ajax2 = 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": "50%", 
   
  
  
                         "left": "50%", 
   
  
  
                         "margin-top": function () { return -1 * img.height() / 2; }, 
   
  
  
                         "margin-left": function () { return -1 * img.width() / 2; } 
   
  
  
                     }); 
   
  
  
                     mask.show().css("opacity", "0.1"); 
   
  
  
                     $.ajax(options); 
   
  
  
                 }; 
   
  
  
             }); 
   
  
  
         
   
  
  
     
   
  
  
     ... 
   
  
  
  /html>