例2

例1では自前ですべてを作ってしまいました。 ここでは Prototype というフレームワークを使って同じことをしてみましょう。

解説

クライアント側の head には次のように書いてあります。

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
function doit() {
  new Ajax.Updater('result', 'ex1.php', { parameters: $('myform').serialize(true) });
}
// ]]>
</script>

Prototype で定義されている Ajax.Updater() は，第1引数が出力用の場所のid，第2引数が呼び出すURL，オプションの第3引数が送信データとオプションです。 ここではやはり Prototype で定義されている serialize() を使って，myform という名前のフォームの入力値をシリアライズしています。 単に $('myform').serialize() とすれば 名前1=値1&名前2=値2&... という形にシリアライズされますが，Prototype 1.5 以降では $('myform').serialize(true) として使うことが推奨されています。こうすると {名前1:値1, 名前2:値2, ...} というオブジェクト（ハッシュ）の形に変換されるだけで，最終的なシリアライズは Ajax.Updater に任されます。

body には次のように書いてあります。

<form action="#" id="myform" onsubmit="doit();return false;">
<p>お名前：<input type="text" name="user" />
<input type="submit" value="送信" /></p>
</form>

<div id="result"></div>

サーバ側は 例1 と同じです。

参考サイト

• Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications

奥村晴彦

Last modified: 2007-07-01 12:36:54