• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

リッチクライアントの中心技術「Ajax」を学ぶ

Part1 利点,注意点,ソースコードの概要

大澤文孝 テクニカル・ライター/プログラマ 2006/12/14 日経SYSTEMS
出典:日経システム構築 2006年2月号120ページより
(記事は執筆時の情報に基づいており、現在では異なる場合があります)
目次一覧

Webアプリケーションは,クライアントからサーバーに要求を送信し,その結果をブラウザ内に表示するという流れが一般的だ。それに対してAjaxでは,ページの一部だけを差し替えたり,マウスの移動をきっかけにコンテンツを動かせたりする。そうしたメリットがある一方で,標準外の技術を利用するのでWebブラウザの種類に依存してしまう。

 Webアプリケーション開発の新手法として注目を集める「Ajax(エイジャックス)」。Part1とPart2の2回に分けて,Ajaxの基本的な仕組みや特徴,周辺技術などを解説する。Part1では,Ajaxの利点と利用する際の注意点,そして仕組みを理解するために肝となるソースコードの概要を説明する。

JavaScriptが主役

 Ajaxとは「Asynchronous JavaScript and XML」の略。特定の仕様やAPIではなく,仕組みの総称である。Ajaxを利用したアプリケーションの例として米Googleが提供する「Google Maps」(画面1)がある。Google Mapsは地図表示を提供するサービスで,マウスのドラッグによって地図の拡大や縮小,スクロールができる。また,スクロール操作が生じたときには,画像全体を返さずにスクロールされた部分だけを返す。従来の1枚の画像として地図を返すWebアプリケーションよりも動作が軽快である。

画面1●Google Mapsの画面
場所を検索したり航空写真を見たりできる地図サービス。Ajaxアプリケーションとして構成されており,地図はマウスでスクロールできる
[画像のクリックで拡大表示]

 こうしたAjaxアプリケーションと従来のWebアプリケーションの大きな違いは,Ajaxでは通信を指示するのがユーザーではないという点だ(図1)。Webアプリケーションでは,ユーザーが入力フォームの送信ボタンをクリックした場合などに,WebブラウザからWebサーバーに要求を送信する。この要求に対して,Webサーバーから処理結果がHTMLページで返される。返されたHTMLページはWebブラウザによってレンダリングされ,それをユーザーが見るという流れになる。

図1●従来のWebアプリケーションとAjaxアプリケーションとの違い
Ajaxアプリケーションは,WebブラウザではなくJavaScriptがWebサーバーと通信する。送受信されるデータ形式はHTMLではなく,XMLまたはテキスト形式になる
[画像のクリックで拡大表示]

 それに対してAjaxアプリケーションでは,Webサーバーに要求を出すのはユーザーではなく,クライアント・サイドで実行されるJavaScriptである。Ajaxアプリケーションでは,ユーザーがマウスを動かすなど何らかの操作をしたときに,JavaScriptのプログラムが動くように実装する。

 JavaScriptのプログラムはWebサーバーに要求を送信し,Webサーバーは何らかの処理をしてその結果を返す。このとき返されるのは,HTML形式ではなくXML形式やテキスト形式のデータである。JavaScriptはその結果をWebブラウザにフィードバックする。具体的には,ページの一部を書き換えたりメッセージボックスを表示したりといった処理をする。

 Ajaxのサーバー側のアプリケーションは,HTMLページではなく断片的な任意のデータを返すので,これはWebサービスと言える。Ajaxアプリケーションとは,「JavaScriptが,Webサーバーに置かれたWebサービスを呼び出してデータを得て,それを加工してユーザーにフィードバックするもの」と考えると分かりやすい。

ここから先はITpro会員(無料)の登録が必要です。

次ページ ●利点ユーザーを待たせない
  • 1
  • 2
  • 3
  • 4

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

ネットワーク/通信サービス

セキュリティ

もっと見る