Ajaxで作ったWebアプリケーションで有名なのは、GoogleマップやGoogleサジェストですが、これらは一度は使ったことがあると思います。そこで今回は私が楽天Webサービスを使用して作った、簡単なAjaxの例を紹介します。
最初の例はキーワードを入力すると、楽天Webサービスから商品データを取得して表示するシステムです。楽天のサーバーとのやりとりにAjaxを使っています。
＊動作確認は Microsoft Internet Explorer バージョン6 で行なっています。
【1】以下のURLをクリックし、「楽天シンプル検索」にアクセスします。
http://ws.bzen.net/rakuten/
【2】検索ボックスに「カステラ」と入力し、「検索」ボタンをクリックします。
【3】検索結果が表示されました。
＊アドレスは変わっていないことに注目してください。画像を表示する部分だけが動的に変わっています。
【4】どれか商品画像をクリックしてください。
【5】楽天の商品詳細ページが開きました。
【6】「次を表示」ボタンをクリックします。
【7】商品画像が切り替わりました。
＊ここでもアドレスは変わっていません。画像を表示する部分だけが動的に変わっています。
次はもう一つ別の例を見てみましょう。
都道府県を選択すると、該当する市町村が絞り込まれるようになっています。全国に市町村は1900以上もあるため、すべて表示するのは大変です。そこでAjaxの技術を使い、バックグランドでサーバーと通信して市町村を表示しているわけです。
楽天から商品データを取得する部分は最初の例と同じです。
【8】以下のURLをクリックし、「全国の特産品検索」にアクセスします。
http://ws.bzen.net/tokusan/
都道府県のオプションメニューははじめからあるのではなく、ページを開いた段階で、サーバーと通信してデータを取得し表示しています。
【9】都道府県のオプションメニューから「宮城県」を選択します。
【10】すると市町村のオプションメニューが表示されます。該当する市町村だけが表示されていますので「仙台市青葉区」を選択します。
＊アドレスは変わっていないことに注目してください。市町村を表示する部分だけが動的に変わっています。
【11】選択した市町村に関連する商品が表示されました。
＊ここでもアドレスは変わっていません。画像を表示する部分だけが動的に変わっています。
【12】どれか商品画像をクリックしてください。
【13】楽天の商品詳細ページが開きました。
今回はAjaxを使った簡単な例でしたが、これを応用するといろいろ出来そうです。市町村の絞込みなどは、顧客管理システムにも使えそうですね。またGoogleマップと組み合わせると、ホテル検索システムなどができます。
Ajaxはアイデア次第で、いろいろなWebアプリケーションが作れる面白い技術なのです。
