Ajax 實作載入進度條的方法

本文主要跟大家介紹ajax實現加載進度條效果，非常不錯，具有參考借鑒價值，需要的朋友參考下，希望能幫助到大家。

ajax beforeSend:

先說說這個 beforeSend， 在請求發送前執行 例如 可以判斷用戶有沒有登入 ，如果沒有登入就停止請求 並提示。

  $.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
      if(1 == 1) //just an example
      {
        xhr.abort(); // 停止请求
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });

$.ajax有一個參數是complete：function(){} 是在請求完成之後執行的，配合beforeSend可以用來展示進度條

例如：

   $.ajax({
        url : 'my_action',
        dataType: 'script',
        beforeSend : function(){
          // 设置 进度条到20%慢慢变到50%
        },
        complete: function(){
          // 设置 进度条到80%
        }
        success：function(){
          // 渲染页面
          // 进度到100%
        }
      });

這個只是表面上的看到的進度條，展示大概的進度，並不是真正的載入進度。

相關推薦;

實作網頁載入進度條的程式碼分享

#H5 canvas實作圓形動態載入進度實例

HTML5/CSS3 網頁載入進度列的實現，下載進度條等經典案例

以上是Ajax 實作載入進度條的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！