プログレスバーサンプル

JavaScript AJAX prototype.js

画像は、下記から失敬。
http://mentalized.net/activity-indicators/

sanple.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>progres bar sumple</title>
<script type="text/javascript" src="/js/prototype.js"></script>

<script>
  function getHTML () {
    var value = '日本語'.escapeHTML();
    var param = 'message=' + value;

    new Ajax.Updater(
      { success: 'sample' },
      'http://hogehoge.com/echo.cgi',
      {
        method:     'post',
        parameters: param,
        onFailure:  reportError
      }
    );
  }

  function reportError (request) {
    $('sample').innerHTML = '<font color="red">error</font>';
  }
</script>

</head>
<body onLoad="getHTML()">
progres bar sumple<br>
<div id="sample"><img src="/img/indicator.white.gif"></div>
</body>
</html>
  • Ajax.Updater 利用。
  • escapeHTML で日本語をエスケープ。

echo.cgi

#!/usr/bin/perl
use CGI;
sleep 3;
my $q = CGI->new;
print $q->header( -charset => q{utf8} );
print '<font color="blue">', $q->param( q{message} ), '</font>';
  • クライアントから設定されたパラメータ文字列は utf8 となる(smaple.html が euc でも関係ない)。