Procedura dettagliata: creazione e utilizzo di un servizio Web con supporto AJAX

Articolo
10/22/2014

Aggiornamento: novembre 2007

Visual Studio 2008°e°Microsoft Visual Web Developer Express Edition°consentono di creare servizi Web ASP.NET personalizzati (file .asmx) accessibili dallo script client. In questa procedura dettagliata verrà creato un servizio Web con supporto AJAX e verranno chiamati i relativi metodi°mediante lo script client.

Quando i servizi Web ASP.NET vengono creati ed esposti a script client, ASP.NET crea automaticamente classi proxy JavaScript per tali servizi. Per chiamare un metodo del servizio Web, è possibile chiamare il metodo corrispondente della classe proxy JavaScript.

In questa procedura dettagliata viene illustrato quanto segue:

Come creare un servizio Web con supporto AJAX in Visual Studio 2008°o Microsoft Visual Web Developer Express Edition.

Prerequisiti

Per completare questa procedura dettagliata, è necessario quanto segue:

Visual Studio 2008 o Microsoft Visual Web Developer Express Edition.
Microsoft Internet Information Services (IIS) installato nel computer locale.

Creazione di un servizio Web con supporto AJAX

In questa sezione viene descritto come creare un servizio Web con supporto AJAX.

Nota:
Per questa procedura dettagliata, è necessario utilizzare un sito Web IIS.

Per creare un servizio Web con supporto AJAX

Aprire Visual Studio 2008°o°Microsoft Visual Web Developer Express Edition.
Scegliere Nuovo sito Web dal menu File.

Verrà visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati scegliere Sito Web ASP.NET.
Scegliere Sfoglia.
Fare clic su IIS locale.
Fare clic su Sito Web predefinito.
Fare clic sull'icona Crea nuova applicazione Web nell'angolo superiore destro.

In Visual Studio°viene creata una nuova applicazione Web IIS.
Specificare il nome HelloWorldService.

Nota:

Il nome del sito Web che si sta creando non è importante.
Scegliere Apri.

Verrà visualizzata la finestra di dialogo Nuovo sito Web con il nome del nuovo sito Web nell'elenco Percorso all'estrema destra. Nel percorso sono inclusi il protocollo (http://) e il percorso (localhost). Quindi si utilizza un sito Web IIS locale.
Nell'elenco Linguaggio selezionare il linguaggio di programmazione da utilizzare.
Scegliere OK.

Nota:
Il nome del sito Web che si sta creando non è importante.

Scrittura del servizio Web personalizzato

In questa sezione viene illustrato come scrivere un servizio Web con supporto AJAX in grado di fornire un metodo che restituisca la stringa "Hello World" e l'ora del server corrente.

Per scrivere il servizio Web personalizzato

In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web https://localhost/HelloWorldService, quindi scegliere Aggiungi nuovo elemento.
In Modelli Visual Studio installati fare clic su Servizio Web, quindi digitare HelloWorld.asmx nella casella Nome.
Accertarsi che la casella di controllo Inserisci codice in file separato sia stata selezionata, quindi fare clic su Aggiungi.

In Visual Studio 2008°viene creato un nuovo servizio Web costituito da due file. Il file HelloWorld.asmx può essere richiamato per eseguire la chiamata ai metodi del servizio Web. Fa riferimento al codice del servizio Web, contenuto in un file di classe (HelloWorld.vb°o°HelloWorld.cs, a seconda del linguaggio di programmazione) nella cartella App_Code. Nel file di codice è contenuto un modello per un servizio Web.

Eliminare il codice esistente nella classe e sostituirlo con il seguente codice:

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

    }
}

I nomi di funzione sono preceduti dall'attributo WebMethodAttribute come parte della dichiarazione di funzione. Inoltre, la classe HelloWorld è qualificata con l'attributo ScriptServiceAttribute.

Questi attributi consentono di chiamare il servizio Web da script nelle pagine Web ASP.NET con supporto AJAX.

Salvare e chiudere il file.

Aprire il file HelloWorld.asmx e aggiungere la seguente direttiva:

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

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

Salvare e chiudere il file.

Ora è possibile verificare il servizio Web nel browser in uso. In questo test non viene utilizzato lo script per chiamare i metodi del servizio Web. Serve unicamente a verificare che il servizio Web funzioni correttamente.

Per eseguire il test del servizio Web

Aprire il browser e immettere l'URL seguente: https://localhost/HelloWorldService/HelloWorld.asmx

Viene richiamato il servizio Web e viene visualizzata una pagina nel browser in cui sono illustrati i metodi esposti dal servizio Web.
Scegliere Greetings. Verrà visualizzata una pagina con il pulsante Richiama.
Fare clic sul pulsante Richiama per chiamare il metodo e visualizzare il valore restituito in formato XML.
Chiudere il browser.

La procedura di creazione del servizio Web con supporto AJAX è terminata.

Utilizzo del servizio Web

Il passaggio successivo consiste nella chiamata al servizio Web da script client.

Per chiamare il servizio Web da script client

In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web (https://localhost/HelloWorldService), quindi scegliere Aggiungi nuovo elemento.
In Modelli Visual Studio installati fare clic su File JScript, quindi digitare HelloWorld.js nella casella Nome.
Scegliere OK.

Aggiungere il seguente codice al file script:

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

Questo script client verrà utilizzato dalla pagina Default.aspx per chiamare i metodi del servizio HelloWorld.

In Visual Studio 2008, aprire la pagina Default.aspx.

Eliminare il markup esistente nella pagina e sostituirlo con il seguente codice:

<%@ 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>

La pagina contiene un controllo ScriptManager. L'attributo path nell'elemento ServiceReference della sezione Services fa riferimento al servizio HelloWorld precedentemente compilato. L'attributo path nell'elemento ServiceReference della sezione Script fa riferimento allo script HelloWorld.js.

Aprire il browser e immettere il seguente URL:

http://<localhost>/HelloWorldService/Default.aspx
Nella pagina visualizzata fare clic sul pulsante Saluti.

Verrà generata una chiamata al servizio Web che restituisce un messaggio di saluto, oltre alla data e all'ora correnti del server.

Passaggi successivi

In questa procedura dettagliata sono stati illustrati i principi di base per la creazione di un servizio Web e la relativa chiamata in una pagina Web da script client. È possibile provare a utilizzare ulteriori funzionalità, più complesse del servizio Web. Di seguito sono riportati alcuni suggerimenti per ulteriori esplorazioni:

Accesso dei client ai servizi Web. Per ulteriori informazioni, vedere la classe Accesso a servizi Web in codice gestito.
Principi fondamentali dei servizi Web. Per ulteriori informazioni, vedere la classe Programmazione di siti Web con i servizi Web.
Accesso ai servizi Web da un browser. Per ulteriori informazioni, vedere Procedura: Accesso ai servizi Web XML da un browser.

Vedere anche

Concetti

Esposizione di servizi Web a script client

Chiamata a servizi Web da script client

Utilizzo dei servizi Web in ASP.NET AJAX

Condividi tramite