WEBの処理中メッセージの表示

サーバーの処理( CGI )時間が数分かかるようなアプリケーションの場合、
ブラウザー側はサーバーからのレスポンス待ち状態になり、
あたかも画面が固まっているかのように見えます。

この状態を改善するために、ブラウザー側では「処理中ですのでお待ち下さい。」
というようなメッセージを表示することによりユーザーに処理ステータスを知らせる、
このような手法を用いることがあります。

それでは「WEBの処理中メッセージの表示」で使用されるサンプルを紹介します。

フォーム Submitを使用した場合の処理中メッセージ表示

■ 初期画面

実行

サンプル画面

■ HTML サンプルソース

  <html>
  <head>
  <meta http-equiv="Content-Language" content="ja">
  <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
  <title>処理中メッセージ表示サンプル</title>
  <link rel="stylesheet" href="STYLE.CSS">
  <script type="text/javascript">
  
  /*実行ボタン押下時の関数*/
  function Form_Submit(){
        //document.forms["addForm"].submit();  //ﾌｫｰﾑ内容を送信します。※ｻﾝﾌﾟﾙのためｺﾒﾝﾄｱｳﾄしています。
          /*メッセージを非表示状態から表示状態へ変更します。 
          メッセージを表示してからSubmitを行うとGIFアニメが再生されないため、
          Submitしてからメッセージを表示しています。*/
     ② document.getElementById("Loading").style.display = "block";  //ﾒｯｾｰｼﾞのDIV要素をｽﾀｲﾙｼｰﾄのdisplayﾌﾟﾛﾊﾟﾃｨで非表示から表示へ変更します
        document.getElementById("Loading").style.top = 150
        document.getElementById("Loading").style.left = (document.body.clientWidth - 300) / 2; //ﾒｯｾｰｼﾞのDIV要素を画面中央に配置します
  }

  </script>
  </head>
  <body>

  <form name="addForm" action="SMPMSG_END.HTM" method="POST">
  <h1>処理中メッセージ表示サンプル</h1>
  <h3>Form Submitの場合のメッセージ表示</h3>
  <hr>
  <br /><br /><br /><br /><br />
  <p class="example">実行ボタンを押すと<b>「処理中...しばらくお待ち下さい」</b>というメッセージが表示されます。</p>
  <br /><br /><br /><br /><br />
  <input type="button" value="実行" onclick="Form_Submit()" class="hand">
  <br /><br />
  <hr>
  <input type="button" value="閉じる" onclick="window.opener=true;window.close()" class="hand">
  </form>
  <!--しばらくお待ち下さい メッセージ-->
① <div id="Loading" style="display:none;">
        <img src="IMG/LOADING.GIF" class="loadimg">
        <p class="loadmsg">
          処理中...<br>
          しばらくお待ち下さい。
        </p>
  </div>
  <br /><br /><br />
  <p class="copy">©2011 Office Quattro Co.,Ltd. All rights reserved.
  </div>

  </body>
  </html>

■ 解説

まず WEB の処理中メッセージを表示するには、① のようにHTMLファイルのソースに
「処理中に表示するメッセージ」を記述する必要があります。下記のようにHTMLタグを追加します。
また <DIV>タグ の style属性 の プロパティ：display に none を指定し、
「非表示状態」で記述しておきます。

<div id="Loading" style="display:none;">
     <img src="IMG/LOADING.GIF" class="loadimg">
     <p class="loadmsg">データ取得中...<br>しばらくお待ち下さい。</p>
</div>

次にフォームSubmit を実行(この場合、実行ボタン押下)したとき ② のJavaScriptで、
「非表示状態」になっている <DIV>タグ の style属性 の プロパティ：display を block に変更し
「表示状態」に切り替える処理を行います。
※フォームSubmit 時の表示切り替え処理は、下記のように Submit実行後に行うようにして下さい。

function Form_Submit(){
   document.forms["addForm"].submit();
   document.getElementById("Loading").style.display = "block";
}

Ajaxを使用した場合の処理中メッセージ表示

■ 初期画面

実行

サンプル画面

■ HTML サンプルソース

<html>
  <head>
  <meta http-equiv="Content-Language" content="ja">
  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
  <title>処理中メッセージ表示サンプル</title>
  <link rel="stylesheet" href="style.css">
  <script language="JavaScript">

  /* 実行ボタン押下時の関数 */
  function Start_Ajax(){
  ④ document.getElementById("Loading").style.display = "block";  //ﾒｯｾｰｼﾞのDIV要素をｽﾀｲﾙｼｰﾄのdisplayﾌﾟﾛﾊﾟﾃｨで非表示から表示へ変更します
     document.getElementById("Loading").style.top = 150
     document.getElementById("Loading").style.left = (document.body.clientWidth - 300) / 2; //ﾒｯｾｰｼﾞのDIV要素を画面中央に配置します

     var reqUrl="MESSAGE.TXT";
     new Ajax.Request(reqUrl, {method :"GET",onComplete:setShnData});  //Ajaxでﾘｸｴｽﾄを開始します
  }

  /*Ajaxのコールバック関数*/
  function setShnData(httpObj){
  ⑤ document.getElementById("Loading").style.display = "none";  //ﾒｯｾｰｼﾞのDIV要素をｽﾀｲﾙｼｰﾄのdisplayﾌﾟﾛﾊﾟﾃｨで表示から非表示へ変更します
  }

  </script>
  </head>
  <body>

  <form name="frmDsphead">
  <h1>処理中メッセージ表示サンプル</h1>
  <h3>Ajaxの場合のメッセージ表示</h3>
  <hr>
  <br /><br /><br /><br /><br />
  <p class="example">実行ボタンを押すとAjaxで通信を行い、<b>「処理中...しばらくお待ち下さい」</b>というメッセージを表示します。<br></p>
  <br /><br /><br /><br />
  <input type="button" value="実行" onclick="Start_Ajax()" class="hand">
  <br /><br />
  <hr>
  <input type="button" class="HAND" value="閉じる" onClick="clsApplication();">
  </form>
  <!--しばらくお待ち下さい メッセージ-->
③ <div id="Loading" style="display:none;">
        <img src="IMG/LOADING.GIF" class="loadimg">
        <p class="loadmsg">
          処理中...<br>
          しばらくお待ち下さい。
        </p>
  </div>
  <br /><br /><br />
  <p class="copy">©2011 Office Quattro Co.,Ltd. All rights reserved.
  </body>
  </html>

■ 解説

Ajax での WEB の処理中メッセージを表示する場合でも、③ のようにHTMLファイルのソースに
「処理中に表示するメッセージ」を記述する必要があります。下記のようなHTMLタグを追加します。
また <DIV>タグ の style属性 の プロパティ：display に none を指定し、
「非表示状態」で記述しておきます。

<div id="Loading" style="display:none;">
     <img src="IMG/LOADING.GIF" class="loadimg">
     <p class="loadmsg">データ取得中...<br>しばらくお待ち下さい。</p>
</div>

次に Ajax リクエストを実行(この場合、実行ボタン押下)する直前に ④ のJavaScriptで、
「非表示状態」になっている <DIV>タグ の style属性 の プロパティ：display を block に変更し
「表示状態」に切り替える処理を行います。

 function Start_Ajax(){
    document.getElementById("Loading").style.display = "block";
    new Ajax.Request(reqUrl, {method :"GET",onComplete:CallBackFunction});  //Ajaxでﾘｸｴｽﾄを開始
}

次にサーバー側からレスポンスされると Ajax の場合、指定されているコールバック関数が実行されます。
そのコールバック関数内の ⑤ で、「表示状態」になっていた <DIV>タグ の内容を「非表示状態」に戻します。

function CallBackFunction(httpObj){
    document.getElementById("Loading").style.display = "none";
}