読み込み進行状況バーを実装する Ajax メソッド

この記事では主に読み込み進行状況バーを実現するための ajax の効果を紹介します。これは非常に優れており、必要な方は参考にしていただければ幸いです。

ajax 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%
        }
      });

。これは表面上のものにすぎません。表示される進行状況バーには、実際の読み込みの進行状況ではなく、おおよその進行状況が表示されます。

関連する推奨事項;

Webページ読み込み進行状況バーを実装するためのコード共有

循環動的読み込み進行状況の例のH5キャンバス実装

Webページ読み込み進行状況バー、ダウンロード進行状況バーなどのHTML5/CSS3実装クラシックケース

以上が読み込み進行状況バーを実装する Ajax メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。