Javascript

【Javascript】Ajaxで受信中のインジケータを表示する

Javascript関連情報

更新日：2006年03月14日

Ajaxで受信中のインジケータを表示する

高橋登史朗

Ajaxでリクエスト後、レスポンスを受信するまでの間、クルクル動くインジケータを作ってみます。

Ajaxで受信中のインジケータを表示する

1: 簡単なサンプル

2: [ソース]jsgt_indicator003.js

3: Ajaxで使ってみる

今回は、Ajaxでリクエスト後、レスポンスを受信するまでの間、クルクル動くインジケータを作ってみます。

Ajaxでは、非同期に次々とリクエストを出せることで、同期的な処理時に発生する手ぶらな待ち時間を減らせますが、待ち時間が無い、というわけではありません。

レスポンスは、離れたサーバーから戻ってくるのですから、最近は回線が高速になったとはいえ、リクエストがサーバーへ届き、レスポンスが戻るまでの体感的タイムラグはまだ存在します。

しかし、Ajaxでは、一般にページが遷移しないタイプの動作が多いですから、送信ボタンを、押したけれど本当に動作してくれているのか不安になって、何度も無駄に押してしまう、などということも起こってしまう場合があります。

そんな時に、安心感を与えてくれるのが、Flashなどでもおなじみの「now loading」といった表示や、クルクル回るインジケータなどです。

というわけで、今回は、どんなスクリプトにでも手軽に実装できる、著作権フリー(パブリックドメイン)のインジケータオブジェクトを作成してみます。

使用するインジケータ画像も、パブリックドメインで提供されているAJAX Activity indicatorsから使わせていただきました。

(*パブリックドメイン (Public domain) とは、著作者や発明者などが排他的な権利を放棄し、利用者が自由に修正や配布を行える、つまり、公衆に属する状態にあること。日本の法律上では著作権は自動的に発生してしまい、放棄できないので厳密な意味でのPublic domainにはなりませんが、ここでは、この言葉を、本来のパブリックドメインの趣旨にしたがったものとして使います。)

簡単なサンプル

→今回のサンプル

とりあえず、ボタンクリックで開始/停止するだけのサンプルです。「開始」ボタンをクリックすれば動作し、「停止」ボタンで止まります。


<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>

<!--jsgt_indicator003.jsを読み込む-->
<script type = "text/javascript" 
        src = "./jsgt_indicator003.js" charset="utf-8"></script>

<script type = "text/javascript">
<!--  
	//インジケータインスタンスを生成
	var indi = new jsgt_Indicator('./file/pleasewait.gif') ;
	//インジケータを追加するDIVを指定
	window.onload = function(){indi.indi_append("indidiv");}
//-->
</script>
</head>
<body>

<form>
<input type="button" value="インジケータ開始" 
       onclick="indi.indi_start();">
<input type="button" value="インジケータ停止" 
       onclick="indi.indi_stop();">
</form>

<!-- インジケータ用DIV -->
<div id="indidiv"></div>

</body>
</html>

次に、jsgt_indicator003.jsのソースを見てみましょう。

[ソース]jsgt_indicator003.js

このオブジェクトは、3つのメソッドを持っています。インジケータをDOM内の要素へappendする「oj.indi_apend(id)」、インジケータを開始する「oj.indi_start()」、停止する「oj.indi_stop()」です。

この3つのメソッドを必要な場所へ書くことでインジケータを動かしたり、消したりするわけです。

このオブジェクトのインスタンス(使える状態)を生成するには、インジケータ画像を引数として

oj = new jsgt_Indicator('img.gif')

のように記述します。これで、oj.indi_apend(id)やoj.indi_start()が使えるようになるわけです。

内部では、このインスタンスojを生成すると同時に、インジケータ画像のプレロード(事前読み込み)が始まります。

したがって、インスタンス生成は、head内のできるだけ早い場所に記述しておくことをお勧めします。これで、実際に使う時に、待ち時間なしで、インジケータ画像が表示されるようにするわけです。

////
// jsgt_Indicator インジケータ オブジェクト 
//
// @author     Toshiro Takahashi 
// @support    http://jsgt.org/mt/archives/01/000906.html
// @download   http://jsgt.org/lib/indicator/
// @version    0.03 jsgt_indicator003.js DOM構築待ちを回避するindi_append
// @license    Public Domain 著作権表示義務無し。商用利用、改造、自由。連絡不要。
// @syntax     oj = new jsgt_Indicator(imagSrc)
// @sample     oj = new jsgt_Indicator('img.gif')
// @method     oj.indi_apend(id)    DOMへ追加 引数はインジケータをappendする要素のID名
// @method     oj.indi_start()    インジケータスタート
// @method     oj.indi_stop()     インジケータスタート
// @property   oj.div             出力するdivオブジェクト
// @property   oj.div.style       スタイルオブジェクト(CSSを利用できます)
// @return     インジケータオブジェクトのインスタンス
//
// @Thanx      Thanx for AJAX Activity indicators http://mentalized.net/activity-indicators/
// 

function jsgt_Indicator(src)
{

  this.div        = setIndicatorDIV(src);

  this.indi_append = indi_append;
  this.indi_start  = indi_start;
  this.indi_stop   = indi_stop;

  this.img = new Image();
  this.img.src = src;

  function setIndicatorDIV(src)
  {
    // インジケータを出力するdiv
    id = "_indicator"+(new Date()).getTime();//idを生成;
    this.div = document.createElement("DIV") ;

    // インジケータ用DIVのデフォルト値(インスタンスで上書き変更できます)
    this.div.style.position = "relative";
    this.div.style.top      = "0px";
    this.div.style.left     = "0px";
    this.div.style.width    = "0px";
    this.div.style.height   = "0px";
    this.div.style.margin  = '0px' ; 
    this.div.style.padding = '0px' ; 
    
    return this.div
  }

  function indi_append(id)
  {
    if(typeof document.getElementById(id) != 'object')return;
    document.getElementById(id).appendChild(this.div);
  }

  //インジケータ スタート
  function indi_start()
  {
    //サイズを与えることで表示する
    this.div.style.height ="12px";
    this.div.style.width ="auto";
    this.div.innerHTML  = '<img src="'+this.img.src+'">' ;
  }

  //インジケータ ストップ
  function indi_stop()
  {
    this.div.style.width ="0px";
    this.div.style.height ="0px";
    this.div.innerHTML  = '' ;
  }
  return this
}

ちなみに、コメントやスペースを除去してファイルサイズを小さくしたソースjsgt_indicator003_c.jsがここにあります。

次に、簡単なAjax処理に組み込んだサンプルを見てみましょう。

→次ページ

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！