スポンサード リンク

Ajaxで作ったWebアプリケーションを体験してみる。

Ajax の特徴は、「非同期通信」と「動的にページを書き換える」ことですが、言葉だけで説明すると難しく感じますので、実際に体験してみることにしましょう。すぐに「そういうことか!」と実感できます。

Ajaxで作ったWebアプリケーションで有名なのは、GoogleマップやGoogleサジェストですが、これらは一度は使ったことがあると思います。そこで今回は私が楽天Webサービスを使用して作った、簡単なAjaxの例を紹介します。

最初の例はキーワードを入力すると、楽天Webサービスから商品データを取得して表示するシステムです。楽天のサーバーとのやりとりにAjaxを使っています。

*動作確認は Microsoft Internet Explorer バージョン6 で行なっています。


【1】以下のURLをクリックし、「楽天シンプル検索」にアクセスします。

http://ws.bzen.net/rakuten/

ajax-31.gif


【2】検索ボックスに「カステラ」と入力し、「検索」ボタンをクリックします。

ajax-32.gif


【3】検索結果が表示されました。

ajax-33.gif

*アドレスは変わっていないことに注目してください。画像を表示する部分だけが動的に変わっています。


【4】どれか商品画像をクリックしてください。

ajax-34.gif


【5】楽天の商品詳細ページが開きました。

ajax-35.gif


【6】「次を表示」ボタンをクリックします。

ajax-36.gif


【7】商品画像が切り替わりました。

ajax-37.gif

*ここでもアドレスは変わっていません。画像を表示する部分だけが動的に変わっています。


次はもう一つ別の例を見てみましょう。

都道府県を選択すると、該当する市町村が絞り込まれるようになっています。全国に市町村は1900以上もあるため、すべて表示するのは大変です。そこでAjaxの技術を使い、バックグランドでサーバーと通信して市町村を表示しているわけです。

楽天から商品データを取得する部分は最初の例と同じです。

【8】以下のURLをクリックし、「全国の特産品検索」にアクセスします。

http://ws.bzen.net/tokusan/

ajax-38.gif

都道府県のオプションメニューははじめからあるのではなく、ページを開いた段階で、サーバーと通信してデータを取得し表示しています。


【9】都道府県のオプションメニューから「宮城県」を選択します。

ajax-39.gif


【10】すると市町村のオプションメニューが表示されます。該当する市町村だけが表示されていますので「仙台市青葉区」を選択します。

ajax-40.gif

*アドレスは変わっていないことに注目してください。市町村を表示する部分だけが動的に変わっています。


【11】選択した市町村に関連する商品が表示されました。

ajax-41.gif

*ここでもアドレスは変わっていません。画像を表示する部分だけが動的に変わっています。


【12】どれか商品画像をクリックしてください。

ajax-42.gif


【13】楽天の商品詳細ページが開きました。

ajax-43.gif


今回はAjaxを使った簡単な例でしたが、これを応用するといろいろ出来そうです。市町村の絞込みなどは、顧客管理システムにも使えそうですね。またGoogleマップと組み合わせると、ホテル検索システムなどができます。

Ajaxはアイデア次第で、いろいろなWebアプリケーションが作れる面白い技術なのです。


スポンサード リンク






Ajax初心者入門講座TOPへ