サーバ側の処理結果を待つローディング表示の作り方

昔のデータ整理してたらローディング表示っぽいJavaScriptが出てきたので貼り付け。


やってることは結構簡単で、サーバ側とクライアント側でそれぞれ以下のようなことをしてます。

  • サーバ側
    1. リクエストを受け取ったら、ローディング表示になるHTMLを返し、同時にサーバ側の処理を開始
    2. その時(処理開始時)に一時ファイルを作成
    3. 処理が終わったら一時ファイルを削除
  • クライアント側
    1. 定期的に一時ファイルを確認
    2. ファイルの中身が変わっていればその内容を表示
    3. 変わっていなければ何もしない
    4. 一時ファイルが削除されたら処理完了と見なして、completeと表示

ソース

  • bodyの中身(html部分)
<div id="result">
</div>
<img src="/images/loading.gif">

resultってidを付けたdivを用意し、そのあとにloading画像用のimgタグを配置。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var $filename = "1278421109.txt";
var $result = $('#result');
$.ajaxSetup({
    cache: false,
    error: function() {
        $.data($result.get(0), 'status', '404');
        $result
            .next()
                .remove()
            .end()
            .html('complete!!');
    }
});
(function(){
    if ($.data($result.get(0), 'status') === '404') return;

    $.get($filename, function(response) {
        if ($.data($result.get(0), 'response') === response) return;

        $result.html(response);
        $.data($result.get(0), 'response', response);
    });
    setTimeout(arguments.callee, 5000);
})();
</script>

一時ファイルは適当にリクエスト時の時間名にしてあります。
$.ajaxSetupでajaxの設定をしていて、

  • 通信時にキャッシュが有効にならないように「cache:false」
  • ファイルが取得できなかったときに$.dataを使ってdivに「status='404'」とセット。そのあと、ローディング画像のimgタグを削除し「complete!!」の表示

ということをしてます。



その後の関数は

  1. $.dataを使ってdivのstatusのデータを確認し、'404'だったら(completeになった後だったら)何もせず抜ける
  2. 一時ファイルを取得し、その内容がdivのresponseのデータと同じものなら何もせず抜ける
  3. そうでなければdivの中に内容を表示し、divのresponseにセットする
  4. あとはsetTimeoutで自分自身を5秒毎に実行

という感じ。



わざわざ一時ファイルを作らずにレスポンスデータだけ返すとか、
「処理経過」とかだけ返して、JavaScript側で「〜%」って表示するとか、
そんな感じで色々やれそうな気もするけど、多分ローディング用のjQueryプラグインってたくさんあるだろうからそっちを使った方が手っ取り早そうですね。



多分コレ作った頃は、$.dataで要素にいろんなデータをセットしたりゲットできたりするので、
それ使って遊ぼうとしたような気もします。もう覚えてないけど。