Compartir a través de

Servicio AJAX básico

  • Artículo

Download sample

Este ejemplo muestra cómo utilizar Windows Communication Foundation (WCF) para crear un servicio básico asincrónico de ASP.NET de JavaScript y XML (AJAX) (un servicio que se puede consumir utilizando el código JavaScript de un cliente del explorador web). El servicio utiliza el atributo WebGetAttribute para asegurarse de que el servicio responde a las solicitudes HTTP GET y de que está configurado para utilizar el formato de datos de Notación de objeto de JavaScript (JSON) para las respuestas.

La compatibilidad de AJAX en WCF se optimiza para su uso con AJAX de ASP.NET a través del control ScriptManager. Para obtener un ejemplo sobre cómo usar WCF con AJAX de ASP.NET, consulte Ejemplos de AJAX.

Nota

En este ejemplo, para generar y ejecutar, es necesario que esté instalado .NET Framework versión 3.5. Para abrir los archivos de solución y proyecto se necesita Visual Studio 2008.

Nota

El procedimiento de instalación y las instrucciones de compilación de este ejemplo se encuentran al final de este tema.

En el código siguiente, el atributo WebGetAttribute se aplica a la operación Add para asegurarse de que el servicio responde a las solicitudes HTTP GET. Los usos del código GET para simplicidad (puede construir una solicitud HTTP GET de cualquier explorador web). También puede utilizar GET para habilitar el almacenamiento en caché. HTTP POST es el valor predeterminado en la ausencia del atributo WebGetAttribute.

[ServiceContract(Namespace = "SimpleAjaxService")]
public interface ICalculator
{
    [OperationContract]
    [WebGet]
    double Add(double n1, double n2);
    //Other operations omitted…
}

Puede crear un extremo de AJAX en el servicio utilizando el enlace estándar <webHttpBinding> y el comportamiento <enableWebScript> en el archivo de configuración de servicio.

<system.serviceModel>
    <behaviors>
        <endpointBehaviors>
            <behavior name="Microsoft.Ajax.Samples.CalculatorServiceAspNetAjaxBehavior">
                <enableWebScript />
            </behavior>
        </endpointBehaviors>
    </behaviors>
    <services>
        <service name="Microsoft.Ajax.Samples.CalculatorService">
            <endpoint address=" "
                behaviorConfiguration="Microsoft.Ajax.Samples.CalculatorServiceAspNetAjaxBehavior" 
                binding="webHttpBinding"
                contract="Microsoft.Ajax.Samples.ICalculator" />
        </service>
    </services>
</system.serviceModel>

El comportamiento enableWebScript establece el formato de datos predeterminado para el servicio en JSON en lugar de XML. Para invocar el servicio, navegue en https://localhost/ServiceModelSamples/service.svc/Add?&n2=200 del n1=100 después de completar los pasos de compilación e instalación siguientes. El uso de una solicitud HTTP GET habilita esta funcionalidad de la prueba simple.

La página web del cliente SimpleAjaxClientPage.aspx contiene el código de ASP.NET para invocar el servicio siempre que el usuario haga clic en uno de los botones de operación en la página. El control ScriptManager se utiliza para realizar un proxy al servicio, accesible a través de JavaScript:

<asp:ScriptManager ID="ScriptManager" runat="server">
     <Services>
          <asp:ServiceReference Path="service.svc" />
     </Services>
</asp:ScriptManager>

Se crean instancias del proxy local y las operaciones se invocan utilizando el código de JavaScript siguiente:

// Code for extracting arguments n1 and n2 ommitted…
// Instantiate a service proxy
var proxy = new SimpleAjaxService.ICalculator();
// Code for selecting operation ommitted…
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

Si la llamada del servicio tiene éxito, el código invoca el controlador onSuccess y el resultado de la operación se muestra en un cuadro de texto:

function onSuccess(mathResult){
     document.getElementById("result").value = mathResult;
}

Para configurar, generar y ejecutar el ejemplo

  1. Asegúrese de que lleva a cabo las instrucciones de instalación de Procedimiento de instalación único para ejemplos de Windows Communication Foundation.

  2. Genere la solución SimpleAjaxService.sln tal y como se describe en Generación de ejemplos de Windows Communication Foundation.

  3. Navegue en https://localhost/ServiceModelSamples/ SimpleAjaxClientPage.aspx (no abra SimpleAjaxClientPage.aspx en el explorador del directorio de proyecto).

Footer image

Copyright © 2007 Microsoft Corporation. Reservados todos los derechos.