チュートリアル : AJAX 対応の Web サービスの作成と使用

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

Visual Studio 2008 および Microsoft Visual Web Developer Express Edition では、クライアントスクリプトからアクセスできる ASP.NET のカスタム Web サービス (.asmx ファイル) を作成できます。このチュートリアルでは、AJAX 対応の Web サービスを作成し、クライアントスクリプトを使用して Web サービスのメソッドを呼び出します。

ASP.NET Web サービスを作成し、クライアントスクリプトに公開すると、ASP.NET によって、その Web サービスの JavaScript プロキシクラスが自動的に作成されます。JavaScript プロキシクラスの対応するメソッドを呼び出すことにより、Web サービスメソッドを呼び出すことができます。

このチュートリアルでは、次について説明します。

Visual Studio 2008 または Microsoft Visual Web Developer Express Edition で AJAX 対応の Web サービスを作成する方法。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

Visual Studio 2008 または Microsoft Visual Web Developer Express Edition。
Microsoft Internet Information Services (IIS) がローカルコンピュータにインストールされていること。

AJAX 対応の Web サービスの作成

ここでは、AJAX 対応の Web サービスを作成する方法について説明します。

メモ :
このチュートリアルでは、IIS Web サイトを使用する必要があります。

AJAX 対応の Web サービスを作成するには

Visual Studio 2008 または Microsoft Visual Web Developer Express Edition を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします

[新しい Web サイト] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[参照] をクリックします。
[ローカル IIS] をクリックします。
[既定の Web サイト] をクリックします。
右上隅にある [新しい Web アプリケーションの作成] アイコンをクリックします。

Visual Studio によって、新しい IIS Web アプリケーションが作成されます。
HelloWorldService という名前を指定します。

メモ :

作成している Web サイトの名前は重要ではありません。
[開く] をクリックします。

[新しい Web サイト] ダイアログボックスが表示され、右端の [場所] ボックスに新しい Web サイトの名前が表示されます。場所には、プロトコル (http://) と場所 (localhost) が含まれます。これは、ローカルの IIS Web サイトを使用していることを示します。
[言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。

メモ :
作成している Web サイトの名前は重要ではありません。

カスタム Web サービスの記述

ここでは、文字列 "Hello World" と現在のサーバー時刻を返すメソッドのある、AJAX 対応の Web サービスを記述します。

カスタム Web サービスを記述するには

ソリューションエクスプローラで Web サイトの名前 (https://localhost/HelloWorldService) を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web サービス] をクリックします。次に、[名前] ボックスに「HelloWorld.asmx」と入力します。
[別のファイルにコードを書き込む] チェックボックスがオンであることを確認し、[追加] をクリックします。

Visual Studio 2008 によって、2 つのファイルから成る新しい Web サービスが作成されます。HelloWorld.asmx ファイルは、Web サービスメソッドを呼び出すときに使用するファイルです。これは、Web サービスのコードを指し示しています。コード自体は、App_Code フォルダ内のクラスファイル (プログラミング言語に応じて HelloWorld.vb または HelloWorld.cs) に記述されています。コードファイルには、Web サービスのテンプレートが記述されています。

クラスの既存のコードを削除し、次のコードに置き換えます。

Imports System
Imports System.Web
Imports System.Collections
Imports System.Web.Services
Imports System.Web.Services.Protocols

Namespace Samples.Aspnet
    <WebService([Namespace]:="http://mycompany.org/"), _
    WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1), _
    System.Web.Script.Services.ScriptService()> _
    Public Class HelloWorld
        Inherits System.Web.Services.WebService

        Public Sub New()

        End Sub 'New


        'Uncomment the following line if using designed components 
        'InitializeComponent(); 

        <WebMethod()> _
        Public Function Greetings() As String
            Dim serverTime As String = _
                String.Format("Current date and time: {0}.", DateTime.Now)
            Dim greet As String = "Hello World. <br/>" + serverTime
            Return greet

        End Function 'Greetings
    End Class 'HelloWorld

End Namespace

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

namespace Samples.Aspnet
{
    [WebService(Namespace="http://mycompany.org")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // The following attribute allows the service to 
    // be called from script using ASP.NET AJAX.
    [System.Web.Script.Services.ScriptService]
    public class HelloWorld : System.Web.Services.WebService
    {

        public HelloWorld()
        {

            //Uncomment the following line if using designed components 
            //InitializeComponent(); 
        }

        [WebMethod]
        public string Greetings()
        {
            string serverTime =
                String.Format("Current date and time: {0}.", DateTime.Now);
            string greetings = "Hello World! <br/>" + serverTime;
            return greetings;
        }

    }
}

関数宣言の一部として、関数名の前に WebMethodAttribute 属性が指定されています。また、HelloWorld クラスは ScriptServiceAttribute 属性で修飾されています。

これらの属性によって、AJAX 対応 ASP.NET Web ページのスクリプトから Web サービスにアクセスできるようになります。

ファイルを保存して閉じます。

HelloWorld.asmx ファイルを開き、次のディレクティブを追加します。

<%@ WebService Language="VB" CodeBehind="~/App_Code/HelloWorld.vb" Class="Samples.Aspnet.HelloWorld" %>

<%@ WebService Language="C#" CodeBehind="~/App_Code/HelloWorld.cs" Class="Samples.Aspnet.HelloWorld" %>

ファイルを保存して閉じます。

これで、ブラウザで Web サービスをテストできるようになりました。このテストでは、スクリプトによる Web サービスの呼び出しは行いません。Web サービスが正しく動作していることの検証のみを行います。

Web サービスをテストするには

ブラウザを開き、URL「https://localhost/HelloWorldService/HelloWorld.asmx」を入力します。

Web サービスが呼び出され、この Web サービスによって公開されているメソッドを示すページがブラウザに表示されます。
[Greetings] をクリックします。ページに [Invoke] ボタンが表示されます。
[Invoke] ボタンをクリックしてメソッドを呼び出し、返された XML 形式の値を確認します。
ブラウザを閉じます。

AJAX 対応の Web サービスの作成が終わりました。

Web サービスの使用

次の手順では、クライアントスクリプトから Web サービスを呼び出します。

クライアントスクリプトから Web サービスを呼び出すには

ソリューションエクスプローラで Web サイトの名前 (https://localhost/HelloWorldService) を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [JScript ファイル] をクリックします。次に、[名前] ボックスに「HelloWorld.js」と入力します。
[OK] をクリックします。

スクリプトファイルに次のコードを追加します。

var helloWorldProxy;

// Initializes global and proxy default variables.
function pageLoad()
{
    // Instantiate the service proxy.
    helloWorldProxy = new Samples.Aspnet.HelloWorld();

    // Set the default call back functions.
    helloWorldProxy.set_defaultSucceededCallback(SucceededCallback);
    helloWorldProxy.set_defaultFailedCallback(FailedCallback);
}


// Processes the button click and calls
// the service Greetings method.  
function OnClickGreetings()
{
    var greetings = helloWorldProxy.Greetings();
}

// Callback function that
// processes the service return value.
function SucceededCallback(result)
{
    var RsltElem = document.getElementById("Results");
    RsltElem.innerHTML = result;
}

// Callback function invoked when a call to 
// the  service methods fails.
function FailedCallback(error, userContext, methodName) 
{
    if(error !== null) 
    {
        var RsltElem = document.getElementById("Results");

        RsltElem.innerHTML = "An error occurred: " + 
            error.get_message();
    }
}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

このクライアントスクリプトは、HelloWorld サービスメソッドを呼び出すために Default.aspx ページによって使用されます。

Visual Studio 2008 で、Default.aspx ページを開きます。

ページの既存のマークアップを削除し、次のコードに置き換えます。

<%@ Page Language="VB" AutoEventWireup="false" %>

<!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;
                    color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Using AJAX Enabled ASP.NET Service</title>

    </head>

    <body>
        <form id="Form1" runat="server">
            <asp:ScriptManager runat="server" ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="~/HelloWorld.asmx" />
                </Services>
                <Scripts>
                    <asp:ScriptReference Path="~/HelloWorld.js" />
                </Scripts>
            </asp:ScriptManager>
            <div>
                <h3>Using AJAX Enabled ASP.NET Service</h3>

                <table>
                    <tr align="left">
                        <td>Click to call the Hello World service:</td>
                        <td>
                            <button id="Button1" 
                                onclick="OnClickGreetings(); return false;">Greetings</button>
                        </td>
                    </tr>
                </table>
            </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;
                    color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Using AJAX Enabled ASP.NET Service</title>

    </head>

    <body>
        <form id="Form1" runat="server">
            <asp:ScriptManager runat="server" ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="~/HelloWorld.asmx" />
                </Services>
                <Scripts>
                    <asp:ScriptReference Path="~/HelloWorld.js" />
                </Scripts>
            </asp:ScriptManager>
            <div>
                <h3>Using AJAX Enabled ASP.NET Service</h3>

                <table>
                    <tr align="left">
                        <td>Click to call the Hello World service:</td>
                        <td>
                            <button id="Button1" 
                                onclick="OnClickGreetings(); return false;">Greetings</button>
                        </td>
                    </tr>
                </table>
            </div>
        </form>

        <hr/>

        <div>
            <span id="Results"></span>
        </div>   

    </body>

</html>

ページには、ScriptManager コントロールが含まれています。Services セクションの ServiceReference 要素の path 属性では、前に作成した HelloWorld サービスが参照されています。Script セクションの ServiceReference 要素の path 属性では、HelloWorld.js スクリプトが参照されています。

ブラウザを開いて、次の URL を入力します。

http:///HelloWorldService/Default.aspx
表示されたページで、[Greetings] ボタンをクリックします。

これにより、あいさつのメッセージおよび現在のサーバーの日付と時刻を返す Web サービスの呼び出しが生成されます。

次の手順

このチュートリアルでは、Web サービスを作成し、Web ページでクライアントスクリプトからこの Web サービスを呼び出すという基本原則を示しました。より複雑な別の Web サービス機能を試すこともできます。次に行う作業の例を示します。

クライアントから Web サービスにアクセスする方法について説明します。詳細については、「マネージコードを使用した Web サービスへのアクセス」を参照してください。
Web サービスの基本事項について説明します。詳細については、「Web サービスを利用した Web のプログラミング」を参照してください。
ブラウザから Web サービスにアクセスする方法について説明します。詳細については、「方法 : ブラウザから XML Web サービスにアクセスする」を参照してください。

参照

概念

クライアントスクリプトへの Web サービスの公開

クライアントスクリプトからの Web サービスの呼び出し

ASP.NET AJAX での Web サービスの使用

次の方法で共有

チュートリアル : AJAX 対応の Web サービスの作成と使用

前提条件

AJAX 対応の Web サービスの作成

AJAX 対応の Web サービスを作成するには

カスタム Web サービスの記述

カスタム Web サービスを記述するには

Web サービスをテストするには

Web サービスの使用

クライアントスクリプトから Web サービスを呼び出すには

次の手順

参照

概念

その他のリソース

次の方法で共有

チュートリアル : AJAX 対応の Web サービスの作成と使用

前提条件

AJAX 対応の Web サービスの作成

AJAX 対応の Web サービスを作成するには

カスタム Web サービスの記述

カスタム Web サービスを記述するには

Web サービスをテストするには

Web サービスの使用

クライアント スクリプトから Web サービスを呼び出すには

次の手順

参照

概念

その他のリソース

クライアントスクリプトから Web サービスを呼び出すには