本稿では,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 |
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の要領でプロパティを設定しておきます。
コントロール | プロパティ | 設定値 |
---|---|---|
ScriptManager | (ID) | manager |
Services | Path="~/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); } |
result[0]['Url']
これによって,1番目のYahooResultオブジェクトのUrlプロパティの値を取得できます。先ほど挙げた別稿のサンプル(yahoo.html)でも扱っているようなノードウォーキングに比べ,はるかに直感的なコードで記述できることがおわかりになるはずです。
以上,今回はここまでです。次回は引き続き,ASP.NET AJAXで提供される拡張サーバーコントロールについて,サンプルを交えながら紹介する予定です。