にたまごほうれん草アーカイブ

はてなダイアリーで書いてた「にたまごほうれん草」という日記のアーカイブです。現在は「にたまごほうれん草ブログ」を運営中です。

ちょっとしたAjaxおみくじの作り方（クライアント側）

ajax

先日の管理システムで選択した月によって日付を変えるというのを、Ajaxでやりたくなって（単にJavascriptで出来るのでしょうが）、練習ついでにprototype.jsを使ってこんなものを作ってしまいました。
それなりに何箇所か苦労したのでメモ。

まずはHTMLのBODY部分。（一部省略）

<body onLoad="getPage()">
<div id="disp"></div>
<form>
<input type="button" value="らーこ？" onClick="getPage()">
</form>
</body>

ページのロード時とボタンクリック時にgetPage()関数を呼ぶようにしています。
その関数によって取得される内容が、

<div id="disp"></div>

の部分に格納されます。
次に、getPage()関数を含むJavascript部は以下のような感じ。

<script type="text/javascript" src="prototype.js"></script>
<script language="javascript">
<!--
function getPage() {
  var url = './rako_ajax.php';
  var req = new Ajax.Updater ( disp, url,
    { method: 'get', onFailure: reportError });
  $('disp').innerHTML = '<img src="indicator_remembermilk_orange.gif"/>';
}

function reportError() { alert('sorry'); }
// -->
</script>

順番に見ていくと、まず、

<script type="text/javascript" src="prototype.js"></script>

の部分で、prototype.jsを読み込みます。これのおかげで、非同期通信部の記述がかなり楽になります。
次に、自作関数のgetPage()の内容ですが、prototype.jsのメソッドを使って通信を行っています。
通信対象のURLと適用先と、エラー発生時に実行するreportError()関数を設定して、Ajax.Updaterメソッドを呼びます。

var req = new Ajax.Updater ( disp, url,
  { method: 'get', onFailure: reportError });

通信中に回転する画像（スピナー）を表示するには、その後にdisp領域に画像表示タグを追加しておけばよいようです。ちなみに、$('disp')はprototype.jsの関数で、document.getElementById() 関数へのショートカットです。

$('disp').innerHTML = '<img src="indicator_remembermilk_orange.gif"/>';

このスピナーは、AJAX Activity Indicatorsから取って来ました。今はわざわざスピナーを表示したいがために、サーバ側でレスポンスまでに0.5秒待機するようにしています。一応サーバ側での連打予防として作ったつもりでしたが、なんか遅れて効いてしまうみたいで、連打すると自動遷移しているように見えてしまいます。

続いてサーバ側、と思ったのですが長いので次のエントリに書くことにします。（簡単ですけども）