WebアプリケーションにAJAX機能を追加する
ここまでで、ASP.NET MVCアプリケーションの初期バージョンをIIS Webサーバに展開して、エミュレートネットワーク接続を設定し、Pocket Internet Explorerブラウザを通じてこのアプリケーションにアクセスすることができたので、いよいよこのWebアプリケーションに実際の機能を追加する番です。サーバの応答に基づいてDIV要素を更新できるボタンを実装してみましょう。これは非常に基本的な操作ですが、すべてのAJAXアプリケーションの基礎的な構成要素となるものです。
通常のASP.NET MVCアプリケーションなら、このような機能はAJAXヘルパーオブジェクトで簡単に追加できます。しかし、こうした既製のスクリプトで問題になるのは、Windows Mobile WebブラウザのJavaScriptエンジンの機能が不十分で、デスクトップPC用に書かれたスクリプトにうまく対処できないため、AJAXヘルパーオブジェクトを直接使用できないという点です。
従って、その点は我慢して、必要なJavaScriptを自分で書く必要があります。まず、入力値に基づいて「Hello, World」タイプのメッセージを返す次のようなコントローラメソッドを書くことを考えます。もちろん、実際のアプリケーションではこのような文字列の代わりに、JSONエンコードデータベースオブジェクトなど任意のデータを返すことができます。今回は簡単なデモンストレーションを見せることが目的なので、単純な文字列で済ませることにします。
public string AJAXMessage(string country)
{
return "Hello, World from " + country + "!";
}
次に、適切なビューページ（.aspxファイル）にJavaScriptコードを書き込む必要があります。デスクトップブラウザ用のスクリプトを書くのであれば、次のようなタグを書くことができます。
<%= AJAX.ActionLink("Show AJAX Message", "AJAXMessage",
new { country="Finland" },
new AJAXOptions { UpdateTargetId = "hello-message" }) %>
しかし、Windows Mobile Webブラウザは高度なJavaScript関数を実行できないので、Windows Mobileオペレーティングシステムに含まれているMsxml2.XMLHTTPオブジェクトに直接アクセスする必要があります。ボタンクリックへの応答としてmobileAJAXResponseのidを更新したければ、次のようなHTMLコードを書くことができます。
<input type="button" value="Call AJAX" id="callAJAX" name="callAJAX" onclick="return callAJAXMethod();"> <p> </p> <div id="mobileAJAXResponse"></div>
ボタンのOnClickイベントハンドラは、callAJAXMethodと呼ばれるJavaScript関数に関連付けられています。この関数の実装は次のようになります。
<script language="javascript" type="text/javascript">
function callAJAXMethod()
{
alert("Starting to call AJAX method");
req = new ActiveXObject("Msxml2.XMLHTTP");
req.onreadystatechange = showAJAXResponseOnScreen;
req.Open("GET", "/mobileAJAX/home/"+
"AJAXmessage?country=Finland", true);
req.Send();
alert("AJAX method returns: " + req.responseText);
return true;
}
...
Alertメッセージボックスの呼び出しは別にして、ActiveXObjectの呼び出しにより、AJAX呼び出しを行うことができる要求オブジェクトが作成されます。その後、非同期のAJAX呼び出しの結果を収集できるように、OnReadyStateChangeイベントが割り当てられます。要求オブジェクトのOpenメソッドは、正しいエンドポイントURLを選択します。ホスト名を指定する必要がないことに注意してください。相対URLが常にHTMLコードの送信元の同じサーバを指すので開発が楽になります。
応答が返ってくると、要求オブジェクトはOnReadyStateChangeイベントが指している関数を呼び出します。このサンプルアプリケーションの場合、このイベントハンドラの実装は次のようになります。
function showAJAXResponseOnScreen()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
alert("showAJAXResponse Step 1");
mobileAJAXResponse.innerText = req.responseText;
alert("showAJAXResponse Step 2");
}
}
}
ShowAJAXResponseOnScreen関数は、AJAX要求が処理されてサーバに送信され、サーバからの応答が取得されるときに、何度も呼び出されます。ReadyStateプロパティは現在の状態（単純な整数値）を表すもので、4という値は呼び出しが成功して、サーバからの応答が読み取られたことを意味します。なお、Statusプロパティは応答のHTTPステータスコードを表します。よく知られた200というコードは成功を意味し、404や500といったコードは失敗を意味します。
要求の状態が4で、ステータスが200なら、選択されたDIVタグの内部テキストは、サーバの応答テキストと同じものに設定されます。JavaScriptコード内で適切なid属性を持つ任意の要素を直接使用できることに注意してください。そのため、開発が容易になります。
この時点で、ユーザーインターフェースはサーバの応答に従って更新されています。これで今回のサンプルアプリケーションの目的は達成です。Windows MobileブラウザのJavaScriptサポートは基礎的なものにすぎません。そのため、とりわけJavaScriptの問題をデバッグするのが難しくなる可能性があります。例えば、構文エラーがあっても、JavaScriptの実行が失敗するだけで、画面にエラーメッセージやアイコンが表示されることはありません。単純ながら効果的なAlertメッセージボックスを重要な箇所で使用すれば、デバッグに要する時間が大幅に短縮されることが多いはずです。
まとめ
この記事では、Windows Mobileデバイスとそれに搭載されている軽量版のInternet Explorerブラウザでも利用できる、現代的なAJAX対応Webアプリケーションの作成方法を紹介しました。こうしたWebアプリケーションのテストには何段階もの手順が必要になることもありますが、Webアプリケーションを実際のWebサーバに展開して、携帯電話エミュレータをGPRSデータ接続に接続すれば、準備万端整ったことになります。
Webアプリケーションでは、今のところ必要なJavaScriptコードをすべて自分で書かなければなりません。しかし、これは20行程度のコードにすぎません。このコードを用意すれば、AJAX要求とサーバ応答に基づいてユーザーインターフェースの一部を簡単に更新できます。開発側は、限定的なHTMLサポートと限られた画面サイズに気を配らねばなりませんが、これは携帯電話ユーザーにさまざまなメリットをもたらします。開発の際に、ユーザーがWindows Mobile phoneと本格的なデスクトップブラウザのどちらを使用しているのかを判別するコードを追加することもできます。そうすれば、1つのコードベースで両方の使用シナリオに対応できます。
サーバ側について言えば、ASP.NET MVCはAJAX呼び出しとJSONエンコードに対する組み込みサポートを含む優れたテクノロジです。より伝統的なWebFormsテクノロジも同様に簡単に使用できますが、MVCパターンなら単体テストも容易になります。
