オンライン説明会開催中!

携帯ネットショップ運営ガイド TOP > Ajaxの仕組みについて

Ajaxの仕組みについて

2009 年 3 月 18 日   カテゴリー: サイト構築

こんにちは、テクノロジー(開発)担当です。
今回はaishipの携帯サイト作成画面やPCショップなどでも使われている
Ajax(エージャックス)の仕組みを簡単に説明したいと思います。
Aishipの携帯サイト構築・作成の詳細はこちら

▼aishipの携帯サイト作成画面

Ajaxについて

Ajaxは「Asynchronous Javascript + XML」の省略語です。
これを日本語にすると
「非同期通信を利用したJavascriptとXML」
つまりJavascriptを利用して非同期通信を行いXMLデータでサーバーとのやりとりを行うもの、ということです。

簡略化した言い方をすると、現在開いているページを全て更新しなくても
必要な箇所だけを読込んで更新する事を可能とした技術です。

これにより、読込みによる時間が少なくなり直感的に操作が出来るようになります。

Ajaxの処理がどうなっているか

Ajaxの処理の流れを説明する前に同期通信と非同期通信の違いを説明したいと思います。

通信方法について

通常のWEBページでは同期通信が使われているのがほとんどで、
これはクライアントからサーバへリクエストを送り
サーバからデータが返ってくるまでクライアントはそれを待ち続けます。

▼同期通信


同期通信

それに比べて非同期通信では
クライアントからサーバへリクエストを送り
サーバからリクエストが返ってくるのを待たずに他の動きをする事が出来ます。

▼非同期通信


非同期通信

これにより、ページの更新や「送信ボタン」などを押さなくても
WEBページをダイナミックに更新する事が可能となったのです。

Ajaxの中核をなしているJavascript

上記で説明した非同期通信の橋渡しをしている技術がJavascriptとなります。

Ajaxが利用されているソースコードをご覧になられるとわかりますが、
ほとんどがJavascriptで構成されています。

Javascriptの役割としてはサーバへデータを送信するリクエスト処理と
返ってきた処理を受取るレスポンス処理が大きな役割になります。
その他ではレスポンスで返ってきたデータをブラウザ上に表示させる処理などに利用しています。

▼Javascriptのデータ受渡しの例


Javascriptのデータ受渡しの例

Javascriptはあくまでクライアント側(WEBブラウザ)での処理が主になりますので、
サーバへリクエストして送ったデータを処理しているのは別のプログラムになります。

サーバによって処理を行っているプログラムは様々ですがPHPやCGIなどが主に利用されています。

受渡すデータはXML方式

最後にXMLはどこで使われているのかというと、
Javascriptとサーバ間でのやり取りはXMLデータで行っています。

▼XMLデータの受渡しの例


XMLデータの受渡しの例

XMLデータでやり取りを行う事で複数のデータがある場合でも、
どの要素のデータなのかが一発でわかるようになります。

Ajaxが使われている主なサービス

上記で説明した技術を利用した有名なサービスが下記になります。

などなど。

Ajaxサービスを利用してみると
ブラウザがリロードされずに必要なデータが取得出来ているのがわかると思います。

今日のまとめ

昔からある既存の技術を組合わせて産まれたAjaxですが
利用するサービスはこれからももっと増えていくと思います。
Javascriptを利用している為、どうしてもブラウザ依存などの問題は出てきますが
上手く活用してECショップの構築に役立てられればと思います

タグ: , ,