特集

枯れた新しいUI革命「Ajax」をASP.NETで活用する

山田 祥寛（http://www.wings.msn.to/）
2005/08/24

Page1 Page2 Page3 Page4

JavaScriptライブラリ活用で高度なAjax連携

　前節でも紹介したように、XMLデータを利用することで、クライアント／サーバ間で構造データを受け渡しできるようになる。しかし、前節で紹介した方法には、1つ大きな問題点がある。それは、

「DOMによるデータ処理では、コードが冗長になりやすい」

という点だ。読者諸兄もよくご存知のように、DOMはすぐれたXMLアクセス用のAPIであるが、一方でちょっとしたデータを取り出すにも長大なコードが必要になる。

　そこで本節では、「Kawa.net xp」から提供されているJavaScriptライブラリ「JKL.ParseXML」を利用して、サーバ側から取得したXMLデータの処理をより簡素化する方法について紹介する。

　このJKL.ParseXMLは、XMLHttpRequestオブジェクトによるサーバ通信の手続きを隠蔽し、かつ、取得したXMLデータをJavaScriptの配列に変換するライブラリだ。JKL.ParseXMLライブラリを利用することで、XMLHttpRequestオブジェクトの状態や通信ステータスなどを意識することなく、かつ、応答されたXMLデータにより直感的にアクセスできるようになる。

　それではさっそく、JKL.ParseXMLを利用した具体的なコードを見てみることにしよう。

　本節のコードを利用するには、上述したサイトからJavaScriptファイル「jkl-parsexml.js」をダウンロードし、「.aspx」ファイルと同一のフォルダに配置しておく必要がある。なお、サーバ側のサービスには、前節のpostnum_like_server_cs.aspx（postnum_like_server_vb.aspx）を使用するものとする。

<%@ Page ContentType="text/html" Language="VB" %>
<html>
<head>
<title>Ajaxによる郵便番号検索</title>

<!--必要なJavaScriptライブラリをインポート-->
<script language="JavaScript" src="jkl-parsexml.js"></script>

<script language="JavaScript">
<!--
// テキストボックス"postnum"にキー入力されたタイミングで実行
function search(){
  // postnum_like_server_cs.aspxから取得したXMLデータを元に、
  // JKL.ParseXMLオブジェクトを生成
  var jkl = new JKL.ParseXML(
    "postnum_like_server_cs.aspx?postnum="
    + document.fm.postnum.value.replace("-", ""));

  // XMLデータを解析し、JavaScript配列に変換
  var data = jkl.parse();
  contents = "<ol type='square'>";

  // 取得したXMLデータ内の<Data>要素を順に取得
  for (i = 0; i < data['Result']['Data'].length;i++) {
    contents += "<li><a href='JavaScript: void(0)' onclick=\"document.fm.postnum.value="
    + data['Result']['Data'][i]['PostNum']
    + ";document.fm.address.value='"
    + data['Result']['Data'][i]['Address']
    + "';\">"
    + data['Result']['Data'][i]['PostNum']
    + "&nbsp;"
    + data['Result']['Data'][i]['Address']
    + "</a></li>";
  }
  contents += "</ol>";
  result.innerHTML = contents;
}
-->
</script>
</head>
<body>
<h1>郵便番号による住所検索</h1>
<form name="fm">
  郵便番号：
  <input type="text" name="postnum" size="10" maxlength="8"
    onkeyup="search()" />
  <input type="text" name="address" size="40" />
  <div id="result" />
</form>
</body>
</html>
JKL.ParseXMLを使ってpostnum_like_server_cs.aspx（postnum_like_server_vb.aspx）から取得した住所情報を反映するWebフォーム（postnum_like_client2.aspx）

　以上のコードで注目していただきたいのは、コード内における太字の部分だ。

　JKL.ParseXMLオブジェクトを利用することで、サーバ側から取得したXMLデータをJavaScriptで利用可能な配列の形式に変換することができる。

　JKL.ParseXMLオブジェクトのコンストラクタには、XMLデータの取得先――つまり、ここでは応答としてXMLデータを返すpostnum_like_server_cs.aspx（postnum_like_server_vb.aspx）を指定すればよい。あとは、parseメソッドを呼び出すだけでXMLデータの変換処理を行うことができる。変換済みの配列からデータを取り出すには、例えば以下のように記述すればよい。

data['Result']['Data'][0]['Address']
XMLデータから変換された配列データへのアクセス例
この例は、<Result>要素配下の1番目の<Data>要素の<Address>要素を取得している。

　これで、<Result>要素配下の1番目の<Data>要素の<Address>要素を取得できる。XMLデータを直接にDOM解析するのに比べると、直感的に要素値に取得できるようになったのがお分かりになるはずだ。そのほか、JKL.ParseXMLオブジェクトで利用可能なメソッドについては、前掲のダウンロード・ページを参照していただきたい。

［参考］JKL.Dumperオブジェクトによる配列内容の確認

　JKL.ParseXMLオブジェクトで変換された配列の内容を確認したいという場合には、同サイトで公開されている「JKL.Dumperオブジェクト」を利用すればよい。

　JKL.Dumperオブジェクトは、構造データをJSON（JavaScript Object Notation）形式テキストにダンプする。JSONとはJavaScriptで利用可能なデータ交換用のフォーマットで、C#やJava、PHPをはじめ、さまざまなプラットフォームで利用可能な変換ライブラリが提供されているのが特徴だ。

　例えば、以下のように記述することで、変換内容（変数data）の内容をテキストエリア内に表示することができる。デバッグ時などに有効なので、是非、併せて活用してみるとよいだろう。

var dumper = new JKL.Dumper();
document.write("<textarea rows='30' cols='70'>"
  + dumper.dump(data) + "</textarea>");
JKL.Dumperオブジェクトの利用例
　
上記コードによるJKL.Dumperオブジェクトの出力

　以上を理解したら、サンプル・アプリケーションを動作してみよう。前項同様の結果を得られれば成功だ。

　なお、JavaScriptによるHTMLの生成は時として冗長になりがちであるが、そのような場合には、前掲のサイトで提供されているJKL.HinaのようなJavaScript用のテンプレート・エンジン利用を検討してもよいだろう。

　このようなテンプレート・エンジンを利用することで、データの処理とレイアウトとを分離でき、よりスマートなコードを既述することが可能となる。興味のある方は、併せてご利用いただきたい。

まとめ

　以上、Ajax＋ASP.NETを利用したアプリケーションの例を見てきた。既存技術の組み合わせであるAjaxを利用することがさほどに難しくないことはお分かりいただけたことと思う。

　しかし、Ajax技術にも問題がないわけではない。というのも、Ajaxのコア技術であるJavaScriptは、もともとがクライアント側のちょっとした動的な制御や、せいぜい入力値検証など、アプリケーションを構築するうえではごく補助的な役割を担うためのものにすぎない。つまり、複雑なアプリケーション開発に、JavaScriptは（少なくとも現時点では）不向きであるということだ。

　このため、少し複雑なアプリケーションを構築しようとすると、途端に開発生産性が低下する可能性がある。サーバ側でいうところのASP.NETやStrutsのようなアプリケーション・フレームワーク、また、Visual StudioやEclipseのような統合開発環境は、現時点では整えられていないのだ。今後、Ajaxがより普及するに当たっては、こうした開発環境の整備は欠かせないだろう。

　ちなみに、現時点で利用可能なASP.NET＋Ajaxフレームワークといえば、フリーで提供されているAjax.NETがある。

　また、次期ASP.NET 2.0ではAjax的なアプローチを「クライアント・コールバック」という機能で提供しているので、こちらも請うご期待だ（詳細は「ASP.NET 2.0が変えるWebアプリ開発の世界 第8回」を参照していただきたい）。

　はたまた、先日、ASP.NETの開発責任者であるScott Guthrie氏のBlogでは、ASP.NET 2.0で利用可能なAjaxフレームワークとして「Atlas」プロジェクトの開発が進行中であることが触れられている。詳細はいまだ不明であるが、ASP.NET 2.0で提供されるクライアント・コールバックの仕組み的な難しさを隠ぺいし、開発生産性を高めるサーバ・コントロールやクライアント側サービスなどが提供されることになりそうだ。

　Atlasフレームワークの初期バージョンは、9月にロサンゼルスで開催される「PDC 2005」で正式発表される予定であり、こちらも今後に期待したい。Ajaxの普及は、いままさにこれから始まろうとしている。End of Article

　

　INDEX
　 ［特集］枯れた新しいUI革命「Ajax」をASP.NETで活用する
　   1．Ajax技術の基本的な仕組みとアプリケーション例
　   2．Ajax＋ASP.NETによる郵便番号検索（テキスト通信）
　   3．Ajax＋ASP.NETによる郵便番号あいまい検索（XML通信）
  4．JavaScriptライブラリ活用で高度なAjax連携
　


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT