実際に動作を確認しながら、じっくりプログラムを追うと、必ず理解できるようになります。
http://ws.bzen.net/pgtop/rakuten/sample004/
■index.html側
(1)ユーザーが操作を行なうための入力フォームを設置している部分です。
<form id="fm">
<input type="text" id="txtWord" size="30" />
<input type="submit" value="検索する" />
<input type="reset" value="リセット" />
</form>
＊フォームとテキストボックスには id名 を付けています。
(2)フォーム上に設置できるボタンの種類には、サブミット(submit)とリセット(reset)の他に、汎用ボタン(button)があります。
汎用ボタンを使うこともできますが、今回はあえてサブミットとリセットを使いました。これらのボタンがもともと持つ機能を使いたいからです。
(3)通常、サブミットをクリックした時は、method 属性で指定した転送方法(GET または POST)で、action 属性で指定した動作を呼び出します。
<form name="fm" method="POST" action="xxx.php">
action 属性には、データを渡すプログラムを指定することが多いです。この方法では画面遷移がともないます。
しかし今回は Ajax を使って非同期通信を行なうので、method 属性や action 属性は不要です。また prototype.js の $F() を使いたいので、 name ではなく id を使います。両方書いても大丈夫です。
<form id="fm">
■index.js側
(1)サブミットとリセットをクリックした時のイベントハンドラを設定し、無名関数 function () の中で、さらに関数を呼び出している部分です。
function init() {
$('fm').onsubmit = function (){return ( itemDisp() );}
$('fm').onreset = function (){clearDisp();}
省略
}
サブミットとリセットでは、無名関数の中に少し違いがあることに気付きましたか？
(2)サブミットをクリックした時は、呼び出した関数 itemDisp() が処理を行なった後、最後に false を返すようにしています。そのため最終的にはサブミットをキャンセルします。(return が必要)
= function (){return ( false );} となるイメージ
処理が行なわれた後にキャンセルされることがポイントです。
(3)リセットをクリックした時は、呼び出した関数 clearDisp() が処理を行なった後、リセット本来のフォームを初期状態に戻す処理を行ないます。(return は不要)
$('fm').onreset = clearDisp;
と書いても同じです。
(4)リセットをクリックした時に呼び出す関数を定義している部分です。
function clearDisp() {
state.innerHTML = "";
result.innerHTML = "";
}
メッセージを表示する部分と、商品データを表示する部分をクリアしています。リセットはフォーム上の部品だけしかクリアしないため、このような処理が必要です。
■item.js側
(1)非同期通信を行なう前に、商品データをクリアする処理を加えました。
result.innerHTML = "";
(2)フォームのテキストボックスから値を取得して、エンコードしている部分です。
var paramList = "keyword=" + encodeURIComponent($F('txtWord'));
$F()は prototype.js により拡張された機能です。フォーム上の部品から簡単に値を取得できます。
＊id名を指定します。
(3)関数 itemDisp() は、最後に false を返すようにしています。
function itemDisp() {
省略
return false;
}
＊サブミットをキャンセルします。
【ワンポイント】
もし汎用ボタンを使うなら、フォーム上の部品をクリアする処理と、検索キーワードを入力して「Enterキー」を押した時の処理を加えなければなりません。
そのためサブミットとリセットを使ったほうが、簡単というわけです。
