クライアント スクリプトへの Web サービスの公開
更新 : 2007 年 11 月
ASP.NET の AJAX 機能により、クライアント スクリプトを使用して、ブラウザから ASP.NET Web サービス (.asmx ファイル) を呼び出すことができます。これにより、Web アプリケーションのユーザー エクスペリエンスを向上させることができます。ブラウザと Web サーバーの間ではデータのみが転送されるため、ポストバックとページ全体の更新を行わなくても、サーバー ベースのメソッドを呼び出すことができます。
このトピックでは、ブラウザで実行される JavaScript で Web サービスを利用できるようにする方法を説明します。
ASP.NET では、Web サービスの JavaScript プロキシ クラスが自動的に作成されます。プロキシ クラスは Sys.Net.WebServiceProxy クラスから派生します。JavaScript プロキシ クラスの対応するメソッドを呼び出すことにより、Web サービス メソッドを呼び出すことができます。詳細については、「クライアント スクリプトからの Web サービスの呼び出し」を参照してください。
スクリプトから Web サービスへのアクセスを可能にする
スクリプトから Web サービスへアクセスできるようにするには、Web サービス クラスが ScriptServiceAttribute 属性で修飾された .asmx Web サービスを使用する必要があります。スクリプトから呼び出される個々のメソッドは、WebMethodAttribute 属性で修飾されたメソッドである必要があります。
Web サービス コード内のこれらの属性の例を次に示します。
[ScriptService]
public class SimpleWebService : System.Web.Services.WebService
{
[WebMethod]
public string EchoInput(String input)
{
// Method code goes here.
}
}
<ScriptService> _
Public Class SimpleWebService
Inherits System.Web.Services.WebService
<WebMethod> _
Public Function EchoInput(ByVal input As String) As String
' Method code goes here.
End Function
End Class
スクリプトから Web サービスを呼び出すことができるようにするには、アプリケーションの Web.config ファイルに ScriptHandlerFactory HTTP ハンドラを登録する必要があります。このハンドラがスクリプトから .asmx Web サービスへの呼び出しを処理します。ハンドラを追加する Web.config 要素の例を次に示します。
.gif "メモ") メモ : |
|---|
これらの構成設定は、Microsoft Visual Studio 2005 で作成した AJAX 対応の新しい Web サイトの Web.config ファイル テンプレートには既に設定されています。 |
<system.web>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx"
type="System.Web.Script.Services.ScriptHandlerFactory"
validate="false"/>
</httpHandlers>
<system.web>
ASP.NET AJAX スクリプト以外から発行された Web サービスの呼び出しの場合、その呼び出しは ScriptHandlerFactory ハンドラによって、JSON 形式ではなく SOAP 形式を使用する既定のハンドラに委任されます。委任は自動的に行われるので、Web サービスでの SOAP プロトコルの使用を無効にする場合を除き、ユーザーの操作は必要ありません。Web サービスでの SOAP プロトコルの使用を無効にする場合は、次の構成設定を Web.config ファイルに入力する必要があります。
<system.web>
<webServices> <protocols> <clear/> </protocols> </webServices>
</system.web>
ASP.NET Web ページのクライアント スクリプトへの Web サービスの公開
ASP.NET Web ページのクライアント スクリプトから .asmx Web サービスを呼び出すことができるようにするには、ScriptManager コントロールをページに追加する必要があります。asp:ServiceReference 子要素を ScriptManager コントロールに追加して、サーバー参照の path 属性を Web サービスの URL に設定すると、Web サービスを参照できます。ServiceReference オブジェクトは、指定された Web サービスをクライアント スクリプトから呼び出す JavaScript プロキシ クラスを生成するよう、ASP.NET に指示します。
ASP.NET Web ページのクライアント スクリプトから SimpleWebService.asmx という名前の Web サービスを呼び出すことができるようにする方法を次の例に示します。
<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference
path="~/WebServices/SimpleWebService.asmx" />
</Services>
</asp:ScriptManager>
ServiceReference オブジェクトが参照できるのは、ページと同じドメイン内の Web サービスだけです。Web サービスのパスは、相対パス、アプリケーション相対パス、ドメイン相対パス、絶対パスのいずれかになります。絶対パスの場合は、同じドメイン内にパスが存在することを確認する必要があります。
この ScriptManager コントロールを含むページが表示されるとき、ページは SimpleWebService.asmx Web サービスの JavaScript プロキシ クラスを作成します。このプロキシ クラスには、SimpleWebService.asmx サービスの Web メソッドに対応するメソッドが含まれます。ページには、Web サービス メソッドの入力パラメータまたは戻り値として使用されるサーバーのデータ型に対応する JavaScript プロキシ クラスも含まれます。これにより、これらのパラメータを初期化するクライアント スクリプトを記述して、メソッド呼び出しに渡すことができます。
ServiceReference オブジェクトの InlineScript プロパティは、JavaScript プロキシ クラスをページに含める方法を指定します。InlineScript が false に設定されている場合 (既定)、プロキシ スクリプトは別の要求を作成することによって取得されます。複数のページで同じサービスを参照する場合、およびブラウザ キャッシュが有効になっている場合は、このオプションが役に立ちます。
InlineScript が true に設定されている場合、プロキシ クラス スクリプトは、ページ内にインライン スクリプト ブロックとして含まれます。これにより、ネットワーク要求の数が減り、パフォーマンスが向上します。これは、1 つのページに多数のサービス参照があり、その他のページには同じサービスの参照がない場合に特に効果的です。InlineScript が true に設定されている場合は、相対パスを使用する必要があります。パスがドメイン相対パスである場合は、同じ Web アプリケーションを参照する必要があります。
ユーザー入力を表示し、現在のサーバー時刻を返すスクリプトから呼び出される単純な Web サービスの例を次に示します。クライアント スクリプトからサービス呼び出しを実行するページを次の例に示します。
<%@ 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">
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
<title>Simple Web Service</title>
<script type="text/javascript">
// This function calls the Web Service method.
function EchoUserInput()
{
var echoElem = document.getElementById("EnteredValue");
Samples.AspNet.SimpleWebService.EchoInput(echoElem.value,
SucceededCallback);
}
// This is the callback function that
// processes the Web Service return value.
function SucceededCallback(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference path="SimpleWebService_VB.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h2>Simple Web Service</h2>
<p>Calling a simple service that echoes the user's input and
returns the current server time.</p>
<input id="EnteredValue" type="text" />
<input id="EchoButton" type="button"
value="Echo" onclick="EchoUserInput()" />
</div>
</form>
<hr/>
<div>
<span id="Results"></span>
</div>
</body>
</html>
<%@ 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">
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
<title>Simple Web Service</title>
<script type="text/javascript">
// This function calls the Web Service method.
function EchoUserInput()
{
var echoElem = document.getElementById("EnteredValue");
Samples.AspNet.SimpleWebService.EchoInput(echoElem.value,
SucceededCallback);
}
// This is the callback function that
// processes the Web Service return value.
function SucceededCallback(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference path="SimpleWebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h2>Simple Web Service</h2>
<p>Calling a simple service that echoes the user's input and
returns the current server time.</p>
<input id="EnteredValue" type="text" />
<input id="EchoButton" type="button"
value="Echo" onclick="EchoUserInput()" />
</div>
</form>
<hr/>
<div>
<span id="Results"></span>
</div>
</body>
</html>
クライアント スクリプトから呼び出されるサービスを次の例に示します。
<%@ WebService Language="VB" Class="Samples.AspNet.SimpleWebService" %>
Imports System.Web
Imports System.Web.Services
Imports System.Xml
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Namespace Samples.AspNet
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
Public Class SimpleWebService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function EchoInput(ByVal input As String) As String
Dim inputString As String = Server.HtmlEncode(input)
If Not String.IsNullOrEmpty(inputString) Then
Return String.Format("You entered {0}. The " + _
"current time is {1}.", inputString, DateTime.Now)
Else
Return "The input string was null or empty."
End If
End Function 'EchoInput
End Class 'SimpleWebService
End Namespace
<%@ WebService Language="C#" Class="Samples.AspNet.SimpleWebService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
namespace Samples.AspNet
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class SimpleWebService : System.Web.Services.WebService
{
[WebMethod]
public string EchoInput(String input)
{
string inputString = Server.HtmlEncode(input);
if (!String.IsNullOrEmpty(inputString))
{
return String.Format("You entered {0}. The "
+ "current time is {1}.", inputString, DateTime.Now);
}
else
{
return "The input string was null or empty.";
}
}
}
}
ASP.NET Web ページ内の静的メソッドの呼び出し
ASP.NET ページに静的ページ メソッドを追加し、これらのメソッドを Web メソッドとして指定できます。これらのメソッドは、個別の .asmx ファイルを作成することなく、Web サービスに組み込まれているサービスのようにそのページのスクリプトから呼び出すことができます。ページ内に Web メソッドを作成するには、System.Web.Services 名前空間をインポートし、公開する各静的メソッドに WebMethodAttribute 属性を追加します。ページ メソッドは、ページ メソッド呼び出しを実行しているページで定義する必要があります。
静的ページ メソッドを Web メソッドとして呼び出すには、ScriptManager コントロールの EnablePageMethods 属性を true に設定する必要があります。
セッション状態の値の書き込みおよび読み取りを行うために、クライアント スクリプトから静的ページ メソッドを呼び出す方法の例を次に示します。次の例では、ページ メソッドを示します。
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
<WebMethod()> _
Public Shared Function GetSessionValue(ByVal key As String) As String
' Get session state value.
Return CStr(HttpContext.Current.Session(key))
End Function 'GetSessionValue
<WebMethod()> _
Public Shared Function SetSessionValue(ByVal key As String, _
ByVal value As String) As String
' Set session state value.
HttpContext.Current.Session(key) = value
Return CStr(HttpContext.Current.Session(key))
End Function 'SetSessionValue
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Using Page Methods with Session State</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<h2>Using Page Methods with Session State</h2>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="PageMethod.js"/>
</Scripts>
</asp:ScriptManager>
</form>
<center>
<table>
<tr align="left">
<td>Write current date and time in session state:</td>
<td>
<input type="button"
onclick="SetSessionValue('SessionValue', Date())"
value="Write" />
</td>
</tr>
<tr align="left">
<td>Read current date and time from session state:</td>
<td>
<input type="button"
onclick="GetSessionValue('SessionValue')"
value="Read" />
</td>
</tr>
</table>
</center>
<hr/>
<span style="background-color:Aqua" id="ResultId"></span>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
[WebMethod]
// Get session state value.
public static string GetSessionValue(string key)
{
return (string)HttpContext.Current.Session[key];
}
[WebMethod]
// Set session state value.
public static string SetSessionValue(string key, string value)
{
HttpContext.Current.Session[key] = value;
return (string)HttpContext.Current.Session[key];
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Using Page Methods with Session State</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<h2>Using Page Methods with Session State</h2>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="PageMethod.js"/>
</Scripts>
</asp:ScriptManager>
</form>
<center>
<table>
<tr align="left">
<td>Write current date and time in session state:</td>
<td>
<input type="button"
onclick="SetSessionValue('SessionValue', Date())"
value="Write" />
</td>
</tr>
<tr align="left">
<td>Read current date and time from session state:</td>
<td>
<input type="button"
onclick="GetSessionValue('SessionValue')"
value="Read" />
</td>
</tr>
</table>
</center>
<hr/>
<span style="background-color:Aqua" id="ResultId"></span>
</body>
</html>
ページ メソッドの呼び出しに使用されるスクリプトを次の例に示します。
// PageMethods.js
var displayElement;
// Initializes global variables and session state.
function pageLoad()
{
displayElement = $get("ResultId");
PageMethods.SetSessionValue("SessionValue", Date(),
OnSucceeded, OnFailed);
}
// Gets the session state value.
function GetSessionValue(key)
{
PageMethods.GetSessionValue(key,
OnSucceeded, OnFailed);
}
//Sets the session state value.
function SetSessionValue(key, value)
{
PageMethods.SetSessionValue(key, value,
OnSucceeded, OnFailed);
}
// Callback function invoked on successful
// completion of the page method.
function OnSucceeded(result, userContext, methodName)
{
if (methodName == "GetSessionValue")
{
displayElement.innerHTML = "Current session state value: " +
result;
}
}
// Callback function invoked on failure
// of the page method.
function OnFailed(error, userContext, methodName)
{
if(error !== null)
{
displayElement.innerHTML = "An error occurred: " +
error.get_message();
}
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
セッション状態の詳細については、「ASP.NET セッション状態の概要」を参照してください。
参照
処理手順
UpdatePanel コントロールと Web サービスの使用