2008年04月14日

Ajax - データ処理中にインジケータを表示

FLASHやAJAXでのデータ処理中に、「しばらくお待ちください」とかインジケータ画像が出て、処理が終わるとそれらが消えて終わった旨を伝えるというものがあります。

静止画像や文字列だけであれば、CSSやJavascript(非AJAX)+PHPでなんとか出来るんですがアニメーションgifだとどうしても処理中は画像が止まってしまいます。

そこで今回はAJAXを利用して、データ処理中もアニメーション画像が動きつづけるように試してみました。





【Ajax】データ処理中にインジケータを表示してみた

テキストボックスに任意の文字列を入力して実行ボタンを押すとサーバで処理が行われて処理終了後、2秒待ってから処理終了の旨をメッセージ表示するというものです。

なんで2秒待つかというと、文字列を渡して受け取るだけなので、処理としては一瞬で終わってしまうのです。
だからインジケータ画像が表示されないんです(笑)
というわけで2秒程待つという処理を加えています。

なのでPHPファイルの処理はたったこれだけです↓



<?php
//データ受け取る
$data = htmlspecialchars($_GET['data'],ENT_QUOTES);
//$n秒待つ
$n = 2;
usleep($n*1000000);
echo "サーバは ".$data." を受信して、".$n."秒待ってから送出しました。"
?>



ですがAjax処理&表示部分については、結果はたいしたことなくてもどうしてもソースは長くなりますね;;

これからはこういった些細な部分にも気を使わなきゃいけなくなってくるんですかねぇ・・・



何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/93358735

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。