Tutorial: Crear y usar servicios web habilitados para AJAX

Artículo
10/22/2014

Actualización: noviembre 2007

Visual Studio 2008 y Microsoft Visual Web Developer Express permiten crear servicios web ASP.NET (archivos .asmx) personalizados a los que puede tener acceso desde script de cliente. En este tutorial, creará un servicio web habilitado para AJAX y llamará a sus métodos con script de cliente.

Cuando crea servicios web ASP.NET y los expone al script de cliente, ASP.NET crea automáticamente clases de proxy de JavaScript para los servicios web. Para llamar a un método del servicio web, llama al método correspondiente de la clase de proxy de JavaScript.

Este tutorial muestra:

Cómo crear un servicio web habilitado para AJAX en Visual Studio 2008 o Microsoft Visual Web Developer Express.

Requisitos previos

Para realizar las tareas de este tutorial, necesitará:

Visual Studio 2008 o Microsoft Visual Web Developer Express.
Microsoft Internet Information Services (IIS) instalado localmente en el equipo.

Crear un servicio web habilitado para AJAX

En esta sección se describe cómo crear un servicio web habilitado para AJAX.

Nota:
Debe utilizar un sitio Web de IIS para este tutorial.

Para crear un servicio web habilitado para AJAX

Abra Visual Studio 2008 o Microsoft Visual Web Developer Express.
En el menú Archivo, haga clic en Nuevo sitio Web.

Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
Haga clic en Examinar.
Haga clic en IIS local.
Haga clic en Sitio Web predeterminado.
En la esquina superior derecha, haga clic en el icono Crear nueva aplicación web.

Visual Studio crea una nueva aplicación web de IIS.
Especifique el nombre HelloWorldService.

Nota:

El nombre del sitio web que crea no es importante.
Haga clic en Abrir.

Aparece el cuadro de diálogo Nuevo sitio web, con el nombre del nuevo sitio web en la lista Ubicación situada más a la derecha. La ubicación incluye el protocolo (http://) y la ubicación (localhost). Esto indica que está trabajando con un sitio Web de IIS local.
En la lista Lenguaje, seleccione el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.

Nota:
El nombre del sitio web que crea no es importante.

Escribir el servicio web personalizado

En esta sección se describe cómo escribir un servicio web habilitado para AJAX que proporciona un método que devuelve la cadena "Hello World" y la hora actual del servidor.

Para escribir el servicio web personalizado

En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web (https://localhost/HelloWorldService) y, a continuación, haga clic en Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Servicio web y, a continuación, en el cuadro Nombre, escriba HelloWorld.asmx.
Asegúrese de que está activada la casilla Colocar el código en un archivo independiente y, a continuación, haga clic en Agregar.

Visual Studio 2008 crea un nuevo servicio web que consta de dos archivos. El archivo HelloWorld.asmx es el archivo que se puede invocar para llamar a los métodos del servicio web. Señala al código del servicio web. El propio código está en un archivo de clase (HelloWorld.vb o HelloWorld.cs), dependiendo del lenguaje de programación) en la carpeta App_Code. El archivo de código contiene una plantilla para un servicio Web

Elimine el código existente en la clase y reemplácelo con el código siguiente:

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

    }
}

Observe que los nombres de función aparecen precedidos con el atributo WebMethodAttribute como parte de la declaración de función. Además, la clase HelloWorld se completa con el atributo ScriptServiceAttribute.

Estos atributos permiten llamar el servicio web desde script en páginas web ASP.NET habilitadas para AJAX.

Guarde el archivo y ciérrelo.

Abra el archivo HelloWorld.asmx y agregue la directiva siguiente:

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

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

Guarde el archivo y ciérrelo.

A continuación, puede probar el servicio web en el explorador. Esta prueba no utiliza script para llamar a los métodos del servicio web. Sólo se utiliza para comprobar que el servicio web funciona correctamente.

Para probar el servicio Web

Abra el explorador y escriba la siguiente dirección URL: https://localhost/HelloWorldService/HelloWorld.asmx.

Se invoca el servicio Web y aparece en el explorador una página que muestra los métodos que el servicio Web expone.
Haga clic en Greetings. Aparece una página con el botón Invoke.
Haga clic en el botón Invoke para llamar al método y ver el valor devuelto en formato XML.
Cierre el explorador.

Ha terminado de crear el servicio web habilitado para AJAX.

Utilizar el servicio Web

El paso siguiente es llamar al servicio web desde script de cliente.

Para llamar al servicio web desde script de cliente

En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web (https://localhost/HelloWorldService) y, a continuación, haga clic en Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Archivo JScript y, a continuación, en el cuadro Nombre, escriba HelloWorld.js.
Haga clic en Aceptar.

Agregue el siguiente código al archivo de 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();

La página Default.aspx utilizará este script de cliente para llamar a los métodos del servicio HelloWorld.

En Visual Studio 2008, abra la página Default.aspx.

Elimine el marcado existente en la página y reemplácelo con el código siguiente:

<%@ 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 página contiene un control ScriptManager. El atributo path del elemento ServiceReference de la sección Services hace referencia al servicio HelloWorld que generó previamente. El atributo path del elemento ServiceReference de la sección Script hace referencia al script HelloWorld.js.

Abra el explorador y escriba la dirección URL siguiente:

http://<localhost>/HelloWorldService/Default.aspx
En la página que se muestra, haga clic en el botón Greetings.

De esta forma genera una llamada al servicio web que devuelve un mensaje de saludo y la fecha y hora actuales del servidor.

Pasos siguientes

Este tutorial ha mostrado los principios básicos de la creación de un servicio web y su llamada en una página web desde script de cliente. Quizás desee experimentar con características de servicios Web más complejas. Las sugerencias para la exploración adicional incluyen lo siguiente:

Entender cómo los clientes tienen acceso a los servicio web. Para obtener más información, vea Obtener acceso a servicios web en código administrado.
Entender los principios de los servicios web. Para obtener más información, vea Programar la Web con servicios web.
Entender cómo se tiene acceso a los servicios web desde un explorador. Para obtener más información, consulte Cómo: Tener acceso a servicios web XML desde un explorador.

Vea también

Conceptos

Exponer servicios web a script de cliente

Llamar a servicios web desde script de cliente

Usar servicios web en ASP.NET para AJAX

Compartir a través de