Exemplarische Vorgehensweise: Erstellen und Verwenden eines AJAX-fähigen Webdiensts

Artikel
10/22/2014

Aktualisiert: November 2007

Mit Visual Studio 2008 und Microsoft Visual Web Developer Express Edition können Sie benutzerdefinierte ASP.NET-Webdienste (ASMX-Dateien) erstellen, die mittels Clientskript aufgerufen werden können. In dieser exemplarischen Vorgehensweise erstellen Sie einen AJAX-fähigen Webdienst und rufen die zugehörigen Methoden mit Clientskript auf.

Wenn Sie ASP.NET-Webdienste erstellen und diese für Clientskript verfügbar machen, werden von ASP.NET automatisch JavaScript-Proxyklassen für die Webdienste erstellt. Sie können eine Webdienstmethode aufrufen, indem Sie die entsprechende Methode der JavaScript-Proxyklasse aufrufen.

In dieser exemplarischen Vorgehensweise wird Folgendes gezeigt:

Erstellen eines AJAX-fähigen Webdiensts in Visual Studio 2008 oder Microsoft Visual Web Developer Express Edition.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

Visual Studio 2008 oder Microsoft Visual Web Developer Express Edition.
Auf dem Computer lokal installierte Microsoft Internetinformationsdienste (IIS).

Erstellen eines AJAX-fähigen Webdiensts

In diesem Abschnitt wird beschrieben, wie ein AJAX-fähiger Webdienst erstellt wird.

Hinweis:
Sie müssen für diese exemplarische Vorgehensweise eine IIS-Website verwenden.

So erstellen Sie einen AJAX-fähigen Webdienst

Öffnen Sie Visual Studio 2008 oder Microsoft Visual Web Developer Express Edition.
Klicken Sie im Menü Datei auf Neue Website.

Das Dialogfeld Neue Website wird angezeigt.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.
Klicken Sie auf Durchsuchen.
Klicken Sie auf Lokale IIS.
Klicken Sie auf Standardwebsite.
Klicken Sie in der oberen rechten Ecke auf das Symbol Neue Webanwendung erstellen.

Visual Studio erstellt eine neue IIS-Webanwendung.
Geben Sie den Namen HelloWorldService an.

Hinweis:

Der Name der Website, die Sie erstellen, ist nicht relevant.
Klicken Sie auf Öffnen.

Das Dialogfeld Neue Website wird angezeigt. Darin befindet sich der Name der neuen Website ganz rechts in der Liste Speicherort. Der Speicherort schließt das Protokoll (http://) und den Speicherort (localhost) ein. Damit wird angegeben, dass Sie mit einer lokalen IIS-Website arbeiten.
Wählen Sie in der Liste Sprache die Programmiersprache aus, in der Sie arbeiten möchten.
Klicken Sie auf OK.

Hinweis:
Der Name der Website, die Sie erstellen, ist nicht relevant.

Schreiben des benutzerdefinierten Webdiensts

In diesem Abschnitt wird beschrieben, wie ein AJAX-fähiger Webdienst mit einer Methode geschrieben wird, die die Zeichenfolge "Hello World" sowie die aktuelle Serverzeit zurückgibt.

So schreiben Sie den benutzerdefinierten Webdienst

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website (https://localhost/HelloWorldService), und klicken Sie dann auf Neues Element hinzufügen.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf Webdienst, und geben Sie dann im Feld Name die Zeichenfolge HelloWorld.asmx ein.
Stellen Sie sicher, dass das Kontrollkästchen Code in eigener Datei platzieren aktiviert ist, und klicken Sie dann auf Hinzufügen.

Visual Studio 2008 erstellt einen neuen Webdienst, der aus zwei Dateien besteht. HelloWorld.asmx ist die Datei, die zum Aufrufen von Webdienstmethoden ausgeführt werden kann. Sie verweist auf den Webdienstcode. Der Code selbst befindet sich in einer Klassendatei (je nach Programmiersprache HelloWorld.vb oder HelloWorld.cs) im Ordner App_Code. Die Codedatei enthält eine Vorlage für einen Webdienst.

Löschen Sie den vorhandenen Code in der Klasse, und ersetzen Sie ihn durch den folgenden Code:

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;
        }

    }
}

Beachten Sie, dass vor den Funktionsnamen das WebMethodAttribute-Attribut als Teil der Funktionsdeklaration steht. Außerdem wird die HelloWorld-Klasse mit dem ScriptServiceAttribute-Attribut qualifiziert.

Aufgrund dieser Attribute kann der Webdienst von Skript in AJAX-fähigen ASP.NET-Webseiten aufgerufen werden.

Speichern und schließen Sie die Datei.

Öffnen Sie die Datei HelloWorld.asmx, und fügen Sie die folgende Direktive hinzu:

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

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

Speichern und schließen Sie die Datei.

Jetzt können Sie den Webdienst in Ihrem Browser testen. In diesem Test wird kein Skript zum Aufrufen der Webdienstmethoden verwendet. Es wird lediglich überprüft, ob der Webdienst ordnungsgemäß funktioniert.

So testen Sie den Webdienst

Öffnen Sie den Browser, und geben Sie folgende URL ein: https://localhost/HelloWorldService/HelloWorld.asmx

Der Webdienst wird aufgerufen, und es wird im Browser eine Seite angezeigt, auf der die vom Webdienst verfügbar gemachten Methoden dargestellt werden.
Klicken Sie auf Greetings. Eine Seite mit der Schaltfläche Invoke wird angezeigt.
Klicken Sie auf die Schaltfläche Invoke, um die Methode aufzurufen und den zurückgegebenen Wert im XML-Format anzuzeigen.
Schließen Sie den Browser.

Sie haben den AJAX-fähigen Webdienst erstellt.

Verwenden des Webdiensts

Im nächsten Schritt wird der Webdienst über ein Clientskript aufgerufen.

So rufen Sie den Webdienst über ein Clientskript auf

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website (https://localhost/HelloWorldService), und klicken Sie dann auf Neues Element hinzufügen.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf JScript-Datei, und geben Sie dann im Feld Name die Zeichenfolge HelloWorld.js ein.
Klicken Sie auf OK.

Fügen Sie der Skriptdatei folgenden Code hinzu:

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();

Dieses Clientskript wird von der Seite Default.aspx verwendet, um die HelloWorld-Dienstmethoden aufzurufen.

Öffnen Sie in Visual Studio 2008 die Seite Default.aspx.

Löschen Sie das vorhandene Markup auf der Seite, und ersetzen Sie es durch den folgenden Code:

<%@ 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" >
        <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" >
            <asp:ScriptManager  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" >
        <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" >
            <asp:ScriptManager  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>

Die Seite enthält ein ScriptManager-Steuerelement. Das path-Attribut des ServiceReference-Elements im Abschnitt Services verweist auf den HelloWorld-Dienst, den Sie zuvor erstellt haben. Das path-Attribut des ServiceReference-Elements im Abschnitt Script verweist auf das HelloWorld.js-Skript.

Öffnen Sie den Browser, und geben Sie folgende URL ein:

http://<localhost>/HelloWorldService/Default.aspx
Klicken Sie auf der angezeigten Seite auf die Schaltfläche Greetings.

Dadurch wird ein Aufruf an den Webdienst generiert, der eine Grußnachricht sowie die aktuelle Zeit und das Datum des Servers zurückgibt.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden die Grundprinzipien für das Erstellen eines Webdiensts und dessen Aufruf auf einer Webseite mittels Clientskript veranschaulicht. Möglicherweise möchten Sie mit weiteren, komplexeren Webdienstfeatures experimentieren. Sie können sich u. a. folgendermaßen weiter mit dem Thema befassen:

Zugriff von Clients auf Webdienste. Weitere Informationen hierzu finden Sie unter Zugriff auf Webdienste in verwaltetem Code.
Grundlagen von Webdiensten. Weitere Informationen hierzu finden Sie unter Webprogrammierung mit Webdiensten.
Zugriff auf Webdienste über einen Browser. Weitere Informationen finden Sie unter Gewusst wie: Zugreifen auf XML-Webdienste von einem Browser aus.

Siehe auch

Konzepte

Verfügbarmachen von Webdiensten für Clientskript

Aufrufen von Webdiensten vom Clientskript

Verwenden von Webdiensten in ASP.NET-AJAX

Freigeben über