Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ASP.NET AJAXでリッチクライアントWebアプリケーションを作成する(前編)

リッチクライアントの革命児AJAXのアーキテクチャ

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/06/15 13:03

本記事では、リッチクライアント分野で高い開発力を持つインフラジスティックスが、昨今のリッチクライアント市場において爆発的影響力を生み出し、Web 2.0やRIAの火付け役ともなった「AJAX」とその周辺技術「ASP.NET AJAX」を紹介します。前編では、AJAXの初心者を対象に、AJAXの基礎知識について解説します。

目次

はじめに

 Web 2.0以前のWebアプリケーションでは、Webサイトのボタンを押下すると、すべての処理が終了して新たにページがリフレッシュされるまで操作ができないことが常識でした。しかし、AJAXの登場により、Web 2.0ではインタラクティブな(対話型の)アプリケーションが現れ、従来のWebアプリケーションより操作性の良いアプリケーションの構築が可能となりました。

 前編である本記事では、リッチクライアント分野で世界トップのコンポーネントスイート「NetAdvantage」を開発し、同業界で20年近く世界的リーディングカンパニーであり続けるインフラジスティックスが、昨今のリッチクライアント市場において爆発的影響力を生み出し、Web 2.0やRIAの火付け役ともなった「AJAX」とその周辺技術「ASP.NET AJAX」を紹介します。「ASP.NET AJAX」についての詳細は後編で触れます。

対象読者

 本記事は、次のような方を対象としております。

  • HTTP、HTML、JavaScriptを使用した開発を行ったことがある方
  • AJAXについて興味がある方

AJAXの概要

 AJAXはWebアプリケーションのユーザーエクスペリエンスを向上させ、よりインタラクティブなアプリケーションを構築するために不可欠な技術です。既存の技術の組み合わせではありますが、使用方法を一つ間違うと、まったく使えないアプリケーションになる危険性があります。

AJAXとは

 AJAX(Asynchronous JavaScript And XML)とは、2005年2月18日にJesse James Garrent氏によって名付けられた非同期通信を行うためのユーザーインターフェイス構築技術です。このAJAXとは新しいテクノロジーではなく、既存の技術を集めて名付けられたものに過ぎません。

 その証拠に、1997年にGoogle社によって既に使用されていましたし、インフラジスティックスにおいてもAJAXという名前が生まれる以前から製品(NetAdvantageなど)にAJAX技術を組み込んでおりました。他社製品でも同様で、AJAXと名付けられた際に機能を変えず「AJAX対応」としただけで爆発的に売れた経緯があります。

AJAXの長所と短所

 従来のWebアプリケーションと比較した、AJAXの長所と短所は次のとおりです。

  • 長所
    • 必要とするデータのみ送受信
    • 更新が必要なページの一部分のみ更新
    • 非同期通信のため、ページが更新される間もユーザーの作業を止めずにデータ取得が可能
  • 短所
    • クロスブラウザ(ブラウザ互換性)の問題
    • 最新のブラウザ機能が必要(クライアント側XMLパーサー、DOMなど)

標準的なWebクライアント/サーバ処理モデル

 今まで標準であったWebアプリケーションのモデルは、ボタン処理などでポストバックが発生すると、HTTPリクエストがサーバに発行され、サーバからはHTTPレスポンスとしてHTMLページ全体が返ってくる形でした(図1)。

図1 - 標準的なWebクライアント/サーバ処理モデル
図1 - 標準的なWebクライアント/サーバ処理モデル

 このモデルには次のような問題点がありました。

  • データの大小に関わらず、ページ全体のサーバへの往復が必要
  • 内容が変更されていなくても、全UIが更新されるため、負荷が増大
  • ページがポストバックから戻るまでの間、ユーザーの作業が停止

AJAXを使用したクライアント/サーバ処理モデル

 同期通信によってページ全体の更新を行う標準的なモデルに対して、AJAXを使用したモデルでは、非同期に通信を行い、必要なデータのみを返す形になります(図2)。

図2 - AJAXを使用したクライアント/サーバ処理モデル
図2 - AJAXを使用したクライアント/サーバ処理モデル

 AJAXを使用したモデルは、標準的なモデルの問題点を解消する手法として注目を浴びていますが、あらゆる場合に必ずしも有効なわけではないため、Webアプリケーションの一つのモデルとして、ケースバイケースで使い分けを行うことが最良の選択と言えるでしょう。そのため、ここでは敢えてこのモデルの問題点も挙げてみたいと思います。

  • Webプログラム言語以外にJavaScriptの使用が必要
  • Webサービスと直接連携は不可――JavaScriptにはWebサービス用の関数が用意されていない
  • 非同期通信は定期的に通信を行うため、AJAXを使用する領域のデータ量とネットワーク回線領域を考慮しないと、パフォーマンスが大幅に低下

AJAXアプリケーションの作成

 AJAXアプリケーションを作成するにはHTTPRequestではなく、XMLHTTPRequestを使用する必要があります。そのため、通信に必要なXMLパーサーのインスタンスの作成は次のようになります。

リスト1 - XMLHTTPRequestインスタンス作成
// Works in Mozilla (Firefox) and Safari
var  oXml  =  new  XMLHttpRequest();

// Works in Internet Explorer
var  oXml  =  new  ActiveXObject ("Microsoft.XMLHTTP");

 インスタンス生成後、サーバに新しいHTTPリクエストを作成するためのXMLオブジェクトの使用方法は次のようになります。

リスト2 - XMLオブジェクトの使用方法
oXml.Open ("GET",  "Endpoint.aspx",  true);

 クライアント側にコールバックメソッドを割り当てるためには、XMLオブジェクトのonreadystatechangeプロパティを使用してください。

 後は、これらにクライアント側/サーバ側の両方の処理を記載するだけでAJAXアプリケーションを作成することができます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 松原 晋啓(マツバラ ノブアキ)

    アーティサン株式会社 取締役副社長兼CRM事業部長(CRMエバンジェリスト) SE、アーキテクト、コンサルタント、エバンジェリスト(Microsoft MVP for Dynamics CRM)、マイクロソフトのソリューションスペシャリスト(Dynamics CRM製品担当)を経て、現在はDy...

バックナンバー

連載:ASP.NET AJAXでリッチクライアントWebアプリケーションを作成する

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5