前回は,ASP.NET AJAXで単純な文字列データを非同期通信する方法について紹介しました。しかし,もちろん,ASP.NET AJAXでやり取りできるのは,文字列や数値のような単一値ばかりではありません。例えば,オブジェクトや配列(リスト)のような複合的な情報(構造データ)を扱うことも可能です。

 本稿では,Yahoo! ウェブ検索Webサービスをアプリケーションから利用する例を通じて,ASP.NET AJAXから構造データを扱う方法について紹介することにします(図1)。

 なお,Yahoo! ウェブ検索Webサービスについては,別稿「AjaxでYahoo! ウェブ検索Webサービスを利用してみよう(サーバーサイド編)」で詳説しています。こちらの別稿ではASP.NET AJAXを利用「しない」場合のAjaxアプリケーションも紹介していますので,比較しながら見ていくことでより理解が深まるはずです。

図1:キーワードを入力して[検索]ボタンをクリックすると,Yahoo!での検索結果(サイトリンクのリスト)を表示する

 それではさっそく構築の手順を追っていきます。

サーバーサイドの処理を実装する

 本連載第3回でも述べたように,「Yahoo! ウェブ検索Webサービス」へのアクセスを担うサーバー機能を提供するのは「.asmx」ファイルの役割です。ソリューションエクスプローラから新規の「.asmx」ファイルを作成したうえで,リスト1の要領でコードを入力してください。なお,「.asmx」ファイルの名前はYahooSearch.asmxとしておきます。

リスト1:YahooSearch.asmx(横スクロールできます)


<%@ WebService Language="VB" Class="YahooSearch" %>

Imports System.Collections.Generic
Imports System.Data
Imports System.Data.Common
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports Microsoft.Web.Script.Services
Imports Microsoft.Web.Script.Serialization

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
Public Class YahooSearch
  Inherits System.Web.Services.WebService

  <WebMethod()> _
  Public Function GetResultsByKeyword(ByVal keywd As String) _
    As List(Of YahooResult)
    Dim result As New List(Of YahooResult)
     ' データセットに「Yahoo! ウェブ検索Webサービス」からの結果XMLを読み込み
    Dim ds As New DataSet()
    ds.ReadXml("http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?appid=wings-project&query=" & keywd)

     ' <Result>要素の内容を取り出し,DbDataReaderオブジェクトに変換
    Dim reader As DbDataReader = ds.Tables("Result").CreateDataReader()

     ' DbDataReaderオブジェクトからYahooResultオブジェクトに情報をセット
    Do While reader.Read()
      Dim yah As New YahooResult()
      yah.Title = reader("Title")
      yah.Url = reader("Url")
      result.Add(yah)
    Loop
    Return result
  End Function

End Class

 ' 検索結果情報(ページタイトルとURL)を保持するためのYahooResultクラス
Public Class YahooResult
    Private _title As String
    Private _url As String
  
    Public Property Title() As String
      Get
        Return Me._title
      End Get
      Set(ByVal value As String)
        Me._title = value
      End Set
    End Property
    Public Property Url() As String
      Get
        Return Me._url
      End Get
      Set(ByVal value As String)
        Me._url = value
      End Set
    End Property
End Class

 連載第2回で紹介した以上のASP.NET AJAX構文は利用していませんので,「.asmx」ファイルの詳細については省略します。ここでは入力された値(引数keywd)をもとに問い合わせURLを作成し,その結果をAmazonResultオブジェクト配列として取得しているとだけ理解しておけば良いでしょう。

 DataSet.ReadXmlメソッドは,指定されたURLにアクセスした結果をデータセットに取り込むための命令です。.NET Frameworkでは,ReadXmlメソッドを利用することでDOM(Document Object Model)のような複雑なAPIを利用することなく,XMLデータを読み込むことができます。

 YahooSearch.asmxのテストページからGetResultsByKeywordメソッドを実行し,以下のような結果を得られれば成功です(図2)。

図2:テストページからGetResultsByKeywordメソッドを確認した結果(クリックで拡大表示します)

クライアントサイドの処理を実装する

 次に,YahooSearch.asmxにアクセスするための「.aspx」ファイルを実装します。ソリューションエクスプローラから新規のYahooSearch.aspxを作成し,図3のようにコントロールを配置してください。

図3:YahooSearch.aspxのフォームレイアウト

 また,それぞれのコントロールに対して,表1の要領でプロパティを設定しておきます。

表1:YahooSearch.aspxのプロパティ設定
コントロールプロパティ設定値
ScriptManager(ID)manager
ServicesPath="~/YahooSearch.asmx"
Input(Text)(Id)txtKeywd
Input(Button)(Id)btnSearch
Value検索
Div(Id)ltrResult
Style△(ブランク)

 これでサーバーサイド機能にアクセスするための準備が整いました。次に,[検索]ボタンがクリックされたタイミングで実行されるクライアントサイドのコードを記述します。フォームデザイナ上に配置したボタンをダブルクリックすると,コードエディタが開きます。コードエディタには,デフォルトで最低限のコードが自動生成されています。リスト2のように,コードを入力してみましょう(追記部分は太字)。

リスト2:YahooSearch.aspx(横スクロールできます)

<script language="javascript" type="text/javascript">
<!--
function btnSearch_onclick() {
  YahooSearch.GetResultsByKeyword($get('txtKeywd').value, OnComplete);
}

function OnComplete(result){ var ctt=""; if(result.length==0){ ctt="お探しのサイトは見つかりませんでした。"; } else { for (i =0; i < result.length; i++) { ctt += "<li><a target='_blank' href='" + result[i]['Url'] + "'>" + result[i]['Title'] + "</a></li>"; } } $get('ltrResult').innerHTML=ctt; } // --> </script>

 YahooSearch.GetResultsByKeywordメソッドのコールバック関数であるOnComplete関数に注目してみましょう。GetResultsByKeywordメソッドの戻り値であるYahooResultオブジェクト配列にアクセスするには,以下のように記述するだけです。

result[0]['Url']

 これによって,1番目のYahooResultオブジェクトのUrlプロパティの値を取得できます。先ほど挙げた別稿のサンプル(yahoo.html)でも扱っているようなノードウォーキングに比べ,はるかに直感的なコードで記述できることがおわかりになるはずです。

 以上,今回はここまでです。次回は引き続き,ASP.NET AJAXで提供される拡張サーバーコントロールについて,サンプルを交えながら紹介する予定です。

 本連載はASP.NET AJAX β2リリース(2006年11月06日時点)の情報を基に執筆しています。今後のRelease Candidate版,正式版などでは仕様が変更される可能性がありますのでご注意ください。