Ajax實作載入進度條的步奏詳解

這次帶給大家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%
        }
      });

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Ajax怎麼操作post請求跳轉頁面

#Ajax進行檔案與參數上傳步奏詳解

#

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