インナーフレーム(iframe)のように、DIVタグ内にHTMLコンテンツを動的に読み込みます。
(インナーフレームでいいじゃんという気もするが。)
一覧表示のリンクをクリックすると、右側の詳細表示エリアに動的に読み込みます。
別のリンクをクリックすると更新されます。
説明
様々なイベントに応じて、Ajax通信を行い指定したコンテンツを書き換えることができます。
サンプルではアンカータグによるリンクのクリックで、処理をしていますが、マウスオーバーイベントにしたり、アンカータグではなく、ラジオボタンから1つを選んだイベントで行ったりすることができます。
インナーフレームを使えば実現できることなので、特に「このタグでなければ」使い道というのが分からないのですが。。。
注意点として取得するコンテンツはutf-8にしたほうが無難でした。IEなどではAjax通信時で取得するデータがutf-8以外だと上手く動かないことがありました。
属性
selectタグなどの場合は、1つで済むのでsource属性でIDを1つ指定します。
アンカータグが複数ある場合は、IDを複数指定できないので、次のsourceClassでスタイルシートのクラス名を指定します。
イベント発生元が複数ある場合には、sourceタグで指定できないので、こちらで指定します。
普通はdivタグのIDを指定します。
{ajaxParameter}という予約語が使えます。これをパラメータに指定すると、
クリックしたタグのコンテンツが送信されます。
例えば”blur”と指定すると、フォーカスロストしたタイミングで通信します。(あまり使用することはないと思います)