SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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アプリケーションを作成することができます。

次のページ
JSONとXMLの構文比較

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET AJAXでリッチクライアントWebアプリケーションを作成する連載記事一覧
この記事の著者

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

アーティサン株式会社 取締役副社長 兼 CRM事業部長(CRMエバンジェリスト)リベルダージ合同会社 社長 兼 最高経営責任者(ドローンインストラクター)SE、アーキテクト、コンサルタント、エバンジェリスト(Microsoft MVP for Dynamics CRM)、マイクロソフトのソリューションスペシャリスト(Dynamics CRM製品担当)を経て、現在はDynamics CRMを専門に扱うデリバリーチームを...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1404 2008/07/14 19:32

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング