ちょっとAjaxの本を読んでみました

kwakui2006-05-23

ASTERIAはサーバサイドのプロダクトなのでAjaxとは直接関係ありませんけどサーバサイドの仕組みは必要なはずですから、今回は簡単な例で雰囲気だけでもお伝えしましょう。

参考にした書籍は｢入門Ajax(高橋登史朗さん著)｣です。
個人的にはすごい読みやすかったし解説も丁寧だったのでお勧めの本です。
この本のサポートサイトが以下となっています。
http://jsgt.org/js/ajax

こちらのサイトで本に載ってるサンプルの動作が確認できますので、
｢サンプル｣｢入出力エフェクト｣｢半透明DIVへの出力｣を動かしてみてください。

このサンプルはマウスポインターを乗せると現れるサブメニューの中身をサーバに問い合わせて入手し表示するものなんですけど、このサブメニューの中身を渡す部分をASTERIAで作ります。肝のAjax部分はほとんどそのままサンプルを利用させてもらいます。
出来れば書籍を読んでみてください。よく判ると思いますよ。Ajax部分の解説はこのサイトの範疇外ですので・・・。
フロー自体は楽勝ですね。

サンプルではメニューが二つあってそれぞれ違う内容のサブメニューが表示されるようになってますので、フロー側も条件によって２つのパターンでデータを返さなければなりません。Branchでもいいですけど今回はMapper内でChoiceさせてしまいましょう。

作るフローはこんな感じ。

サブメニューデータ生成フロー

配置するコンポーネントは以下の通りです。
｢Start｣→｢Mapper｣→｢EndResponse｣

Startコンポーネント

GETパラメーターで何番目のメニューのデータを返せばいいのか判断しますので、｢arg00/Integer｣をArgumentタブに追加します

Mapperコンポーネント

OutputStreamFormatはHTMLにしておきます。
Choice関数を使って与えられた値によって出力する内容を振り分けます。
Mapper内ではこんなマッピングをします。
[arg00]---1---|-->[Choice]-->[OutputStream]
[CONST1]--2---|
[CONST2]--3---|
[CONST3]--4---|
※線の途中の数字はChoice関数に引き込む順番です。
CONST1は何も設定しません。
CONST2はこんな内容です。
<a href="http://www.yahoo.co.jp">Yahoo</a>
CONST3はこんな内容です。
<a href="http://www.yahoo.co.jp">Yahoo</a>
<a href="http://www.google.co.jp">Google</a>
Choice関数のプロパティBaseは0に設定します。
これにより

１番目に引き込まれた値が0ならCONST1の内容

２番目に引き込まれた値が0ならCONST2の内容

３番目に引き込まれた値が0ならCONST3の内容

を出力するようになります

EndResponse

特に設定なし

例によってコンパイル＆実行設定しておきましょう。

あとはAjax側(クライアントサイド)の用意ですね。

HTML置き場が必要なのでユーザーGuestのホームディレクトリ(｢ASTERIAインストールディレクトリ/home/guest｣)にディレクトリ｢htdocs｣を作ってその中にHTMLを入れることにしましょう。
ユーザーGuestはデフォルト設定でコンテキストパスは｢/guest｣でドキュメントルートが｢htdocs｣になっているはずですので上記ディレクトリを作ってそこにHTMLを置けばhttp://ホスト名:21380/guest/○○○.htmlでアクセスできるようになります。

置き場が用意できたらあとは中身ですね。
著者も本の中で述べてますが、JavaScriptなのでソースは見放題というか勉強し放題です。
ありがたく参考にさせていただきましょう。

冒頭で説明したAjaxサンプルよりCSSおよびJacaScriptを含んだソースが入手できます。あとはその中のURL情報をASTERIAのフローにしてあげればOKですね。

修正箇所はソース内の｢sendRequest｣の部分です。
HTTPメソッドをGETにしてURLを書き換えます。
こんな感じ
'http://localhost:21380/guest/Project1/Ajax_sample?arg00='+num

｢jslb_ajax.js｣
あとこのサンプルソースは外部のスクリプトjslb_ajax.jsを更に呼び出します。
クロスブラウザ対策のスクリプトで著者が提供してます。DLして同じくhtdocsに収めておきましょう。
http://jsgt.org/mt/archives/01/000409.html
ファイル名を変更するかソースの方を書き換えるかする必要があります。

あとは本当ならJPG画像も読み込んでるので用意した方がいいんですけど、それはまぁお好きなようにｗ

準備できたらブラウザーから叩いてみましょう〜
http://ホスト名:21380/guest/○○○.html
私の場合は
http://localhost:21380/guest/sample2.html
となりました。

実行結果を貼っておきます。
またまた小さいですけどこんな感じです！ってゆうのは伝わったかな？