Microsoft ASP.NET AJAXを使う5 †

▲ ▼

WebサービスのメソッドをJavaScriptから呼び出す †

これまではUpdatePanelコントロールを中心にASP.NET AJAXを説明してきました。それらの方法では、Webサービスを自分で作成する必要がありませんでした。

ここでもう一度原点に返って、自分で作成したWebサービスを利用してAjaxを実現する方法について説明します。ASP.NET AJAXを利用すれば、これも驚くほど簡単です。

ここでは、第78号で紹介した「.NETの機能を使用せずに、Ajaxを使用する方法」と全く同じ事を行うアプリケーションをASP.NET AJAXを利用して作成します。

▲ ▼

Webサービス †

まずは、Webサービスの作成です。「.NETの機能を使用せずに、Ajaxを使用する方法」で紹介したWebサービスのクラスに、新たにScriptServiceAttribute属性を適用します。それ以外は、変更なしです。ファイル名は、"WebService.asmx"とします。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

<%@ WebService Language="VB" Class="WebService" %>
 
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
 
<WebService(Namespace := "http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService> _
Public Class WebService
    Inherits System.Web.Services.WebService 
    
    <WebMethod()> _
    Public Function GetYoupackFee(ByVal packSize As Integer) As Integer
        '（省略）
    End Function
End Class
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18

<%@ WebService Language="C#" Class="WebService" %>
 
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService  : System.Web.Services.WebService
{
    [WebMethod]
    public int GetYoupackFee(int packSize)
    {
        //（省略）
    }
}

「.NETの機能を使用せずに、Ajaxを使用する方法」では、Web.configを書き換えてWebサービスにHTTP GETでアクセスできるようにしましたが、その必要はありません。

ただし、Web.configに以下のような設定を追加して、ScriptHandlerFactory HTTPハンドラを登録する必要があります。もしVisual Studio 2008でプロジェクトを作成したか、Visual Studio 2005で「ASP.NET AJAX-Enabled Web Site」テンプレートを使用してプロジェクトを作成したのであれば、この設定はすでにされていますので、気にする必要はありません。

<system.web>
  <httpHandlers>
    <remove verb="*" path="*.asmx"/>
    <add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/>
  </httpHandlers>
<system.web>
▲ ▼

ページ †

次に、Webサービスを呼び出すページを作成します。前回との違いは、ScriptManagerコントロールを配置する点です。

そして、ScriptManagerのServicesプロパティに先ほど作成したWebサービスを追加します。また、ScriptManagerのScriptsプロパティにJavaScriptファイルを追加します。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47

<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>ゆうパック送料検索</title>
</head>
<body>
    <h1>ゆうパック送料検索</h1>
    <p>同一都道府県内への配達、重量30kgまで</p>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="ajax.js" />
            </Scripts>
            <Services>
                <asp:ServiceReference Path="WebService.asmx" />
            </Services>
        </asp:ScriptManager>
        
        <asp:Label
            ID="Label1"
            runat="server"
            Text="荷物の大きさ（縦・横・高さの合計）: "
            AssociatedControlID="PackageSizeList">
        </asp:Label>
        <asp:DropDownList
            ID="PackageSizeList"
            runat="server">
            <asp:ListItem Value="0">（選択してください）</asp:ListItem>
            <asp:ListItem Value="60">60cmまで</asp:ListItem>
            <asp:ListItem Value="80">80cmまで</asp:ListItem>
            <asp:ListItem Value="100">100cmまで</asp:ListItem>
            <asp:ListItem Value="120">120cmまで</asp:ListItem>
            <asp:ListItem Value="140">140cmまで</asp:ListItem>
            <asp:ListItem Value="160">160cmまで</asp:ListItem>
            <asp:ListItem Value="170">170cmまで</asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:Label ID="ResultLabel" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47

<%@ Page Language="C#" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>ゆうパック送料検索</title>
</head>
<body>
    <h1>ゆうパック送料検索</h1>
    <p>同一都道府県内への配達、重量30kgまで</p>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="ajax.js" />
            </Scripts>
            <Services>
                <asp:ServiceReference Path="WebService.asmx" />
            </Services>
        </asp:ScriptManager>
        
        <asp:Label
            ID="Label1"
            runat="server"
            Text="荷物の大きさ（縦・横・高さの合計）: "
            AssociatedControlID="PackageSizeList">
        </asp:Label>
        <asp:DropDownList
            ID="PackageSizeList"
            runat="server">
            <asp:ListItem Value="0">（選択してください）</asp:ListItem>
            <asp:ListItem Value="60">60cmまで</asp:ListItem>
            <asp:ListItem Value="80">80cmまで</asp:ListItem>
            <asp:ListItem Value="100">100cmまで</asp:ListItem>
            <asp:ListItem Value="120">120cmまで</asp:ListItem>
            <asp:ListItem Value="140">140cmまで</asp:ListItem>
            <asp:ListItem Value="160">160cmまで</asp:ListItem>
            <asp:ListItem Value="170">170cmまで</asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:Label ID="ResultLabel" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>
▲ ▼

ServiceReference.InlineScriptプロパティ †

この例では、Servicesプロパティに追加するServiceReferenceオブジェクトにはPathプロパティの値しか指定しておらず、InlineScriptプロパティはデフォルトのfalseのままとしました。

InlineScriptプロパティがfalseのときは、後述するプロキシクラスを作成するJavaScriptを外部ファイルとして（<javascript>タグのscr属性に設定して）呼び出します。InlineScriptプロパティがtrueのときは、ページ内にJavaScriptが埋め込まれます。また、InlineScriptプロパティがtrueのときは、Pathプロパティは相対パスである必要があります。

つまり、InlineScriptプロパティがfalseのときは、サーバーへの要求数が増えますが、ブラウザのキャッシュ機能が使われる可能性があり、trueのときは、ページのサイズが大きくなります。

▲ ▼

JavaScript †

最後に、Webサービスを呼び出すJavaScriptを作成します。前回とほぼ同じ事を行っていますが、劇的にシンプルになることをご確認ください。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46

var msgElement, listElement;
 
//アプリケーションのloadイベントハンドラを追加
Sys.Application.add_load(ApplicationLoad)
 
//アプリケーションのloadイベントハンドラ
function ApplicationLoad(sender, args)
{
    msgElement = $get('ResultLabel');
    listElement = $get('PackageSizeList');
    //DropDownListのonchangeイベントハンドラを追加する
    $addHandler(listElement, 'change', onChange);
}
 
//リストのonchangeイベントハンドラ
function onChange()
{
    if (listElement.value == "0")
    {
        msgElement.innerHTML = "";
        return;
    }
    
    msgElement.innerHTML = "読み込み中...";
 
    //Webサービスにアクセスする
    WebService.GetYoupackFee(listElement.value, OnSucceeded, OnFailed);
}
 
//成功したとき
function OnSucceeded(result, userContext, methodName)
{
    msgElement.innerHTML = "料金は " + result + "円";
}
 
//失敗したとき
function OnFailed(error, userContext, methodName)
{
    if(error != null)
    {
        msgElement.innerHTML = "エラー: " + error.get_message();
    }
}
 
//スクリプトの読み込みが完了したことをScriptManagerに知らせる
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

loadイベントハンドラでは、DropDownList"PackageSizeList"のonchangeイベントハンドラを追加しています。前回はaddEventListenerを使うか、attachEventを使うかなどを調べていましたが、ASP.NET AJAXでは$addHandlerを使って一発でできます。

▲ ▼

プロキシクラス †

onchangeイベントハンドラでWebサービスを呼び出しています。ご覧の通り、まるでWebサービスのメソッドをJavaScriptから直接呼び出しているかのように、Webサービスにアクセスできます。この例ではWebサービスのクラスに名前空間がありませんでしたが、名前空間がある場合は名前空間も付けて呼び出す必要があります（例えば名前空間が「MyNameSpace」であれば、「MyNameSpace.WebService.GetYoupackFee(...)」のように）。

なぜこれだけ簡単にWebサービスメソッドを呼び出せるかというと、ASP.NET AJAXが自動的にプロキシクラスを作成してくれるからです。この例では、WebServiceクラスがプロキシクラスです。プロキシクラスにはWebサービスメソッドを呼び出すためのメソッドが作成されており、メソッドの名前は対応するWebサービスメソッドと同じです。

プロキシクラスのメソッドのパラメータには、まず対応するWebサービスメソッドのパラメータを渡します。上記の例ではWebサービスメソッドのパラメータ数は1つだけですが、複数ある場合はその数だけ渡します。

その次のパラメータには、Webサービスへの要求が成功したときに呼び出されるコールバック関数を指定します。上の例では、OnSucceeded関数がそれです。このパラメータは省略できます。

その次のパラメータには、失敗したときに呼び出されるコールバック関数を指定します。上の例では、OnFailed関数がそれです。このパラメータも省略できます。

上の例では省略しましたが、さらに次のパラメータに、ユーザーコンテキストを指定できます。ここで指定したコンテキストは、成功/失敗コールバック関数で取得できます。Webサービスメソッドがどこから呼び出されたのかを区別したいときなどに有用です。

プロキシクラスのtimeoutプロパティに、タイムアウトの時間を設定することもできます。

補足：成功コールバック関数、失敗コールバック関数、ユーザーコンテキストは、プロキシクラスのdefaultSucceededCallbackプロパティ、defaultFailedCallbackプロパティ、defaultUserContextプロパティに設定することもできます。

成功コールバック関数では、Webサービスメソッドが返した値（resultパラメータ）、ユーザーコンテキスト（userContextパラメータ）、呼び出されたWebサービスメソッド名（methodNameパラメータ）を取得できます。

失敗コールバック関数では、エラー情報をerrorパラメータで取得できます。これは、Sys.Net.WebServiceErrorオブジェクトです。例えばエラーメッセージは、上記の例のように、messageプロパティで取得できます。

▲ ▼

Sys.Net.WebServiceProxyクラス †

プロキシクラスは、Sys.Net.WebServiceProxyクラスから派生しています。クライアント側で呼び出すWebサービスのパスが直前まで分からないとき（ScriptManagerのServicesに登録されていないWebサービスを呼び出すとき）には、WebServiceProxyクラスを直接使ってWebサービスにアクセスすることができます。

上記の例を改造して、ScriptManagerのServicesにWebサービスが登録されていないときに、WebService.GetYoupackFeeメソッドを呼び出すスクリプト（メソッドを呼び出す部分のみ）を以下に示します。

  1
  2
  3
  4
  5
  6
  7
  8

Sys.Net.WebServiceProxy.invoke('WebService.asmx',
    'GetYoupackFee',
    false,
    {'packSize':listElement.value},
    OnSucceeded,
    OnFailed,
    null,
    60000);

このようにWebServiceProxy.invokeメソッドでWebサービスメソッドを呼び出せます。3番目のパラメータは、Webサービスへの要求をGETで行うかを指定します。falseの場合はPOSTとなります。4番目のパラメータには、Webサービスに渡すパラメータを連想配列で指定します。7番目のパラメータはユーザーコンテキストです。8番目のパラメータはタイムアウト時間（単位はミリ秒）です。

▲ ▼

参考 †

▲ ▼

コメント †


▲ ▼
ページ情報
[ トップ ]   [ 編集 | 凍結 | 差分 | バックアップ | 添付 | 複製 | 名前変更 | リロード ]   [ 新規 | 子ページ作成 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]