Servicio AJAX con ejemplo JSON y XML

Download sample

Este ejemplo muestra cómo utilizar Windows Communication Foundation (WCF) para crear un servicio JavaScript y XML asincrónico (AJAX) que devuelva o bien la notación del objeto de JavaScript (JSON) o los datos XML. Puede tener acceso a un servicio de AJAX utilizando el código JavaScript de un cliente del explorador web. Este ejemplo parte del ejemplo Servicio AJAX básico.

Nota

Para generar y ejecutar este ejemplo, 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.

A diferencia de la otra muestra AJAX, este ejemplo no utiliza AJAX de ASP.NET ni el control ScriptManager. Con alguna configuración adicional, WCF los servicios de AJAX se pueden utilizar desde cualquier página HTML a través de JavaScript y este escenario se muestra aquí. Para obtener un ejemplo sobre cómo usar WCF con AJAX de ASP.NET, consulte Ejemplos de AJAX.

Este ejemplo muestra cómo intercambiar el tipo de respuesta de una operación entre JSON y XML. Esta funcionalidad está disponible sin tener en cuenta si el servicio se configura para ser utilizado a través de AJAX de ASP.NET o por una página de cliente de HTML/JavaScript simple.

Nota

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

Para habilitar el uso de clientes no ASP.NET, el ejemplo utiliza la sección de configuración siguiente:

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

Tenga en cuenta el uso del comportamiento <webHttp> en lugar del comportamiento<enableWebScript>. El formato de datos predeterminado para el comportamiento webHttp es XML, mientras el formato de datos predeterminado para el comportamiento enableWebScript es JSON. Para obtener más información las especificaciones del comportamiento webHttp, consulte Creating WCF AJAX Services without ASP.NET.

El servicio en el ejemplo siguiente es un servicio estándar WCF con dos operaciones. Ambas operaciones requieren el estilo de cuerpo Wrapped en WebGetAttribute o los atributos WebInvokeAttribute, que es concreto al comportamiento webHttp y no están afectados por el cambio de formato de JSON/XML.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathXml(double n1, double n2);

El formato de respuesta para la operación se especifica como XML, que es el valor predeterminado para el comportamiento <webHttp>. No obstante, es conveniente especificar de forma explícita al formato de respuesta.

La otra operación utiliza el atributo WebInvokeAttribute y explícitamente especifica JSON en lugar de XML para la respuesta.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathJson(double n1, double n2);

Tenga en cuenta que en ambos casos las operaciones devuelven un tipo complejo, MathResult, que es un tipo de contrato de datos WCF estándar.

La página web cliente XmlAjaxClientPage.htm contiene código JavaScript que invoca una de las dos operaciones anteriores, cuando el usuario hace clic en los botones Realizar cálculo (devuelve JSON) o Realizar cálculo (devuelve XML) en la página. El código para invocar el servicio construye un cuerpo de JSON y lo envía utilizando HTTP POST, de manera similar al ejemplo. La solicitud se crea manualmente en JavaScript, a diferencia de la muestra Servicio AJAX básico y los otros ejemplos utilizando AJAX de ASP.NET.

// Create HTTP request
var xmlHttp;
// Request instantiation code omitted…
// Result handler code omitted…

// Build the operation URL
var url = "service.svc/ajaxEndpoint/";
url = url + operation;

// Build the body of the JSON message
var body = '{"n1":';
body = body + document.getElementById("num1").value + ',"n2":';
body = body + document.getElementById("num2").value + '}';
  
// Send the HTTP request
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/json");
xmlHttp.send(body);

Cuando el servicio responde, la respuesta se muestra sin más procesamientos en un cuadro de texto en la página. Esto se implementa a efectos de demostración para permitir que poder observar directamente los formatos de datos de JSON y XML utilizados.

// Create result handler 
xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState == 4){
          document.getElementById("result").value = xmlHttp.responseText;
     }
}

Para configurar, generar y ejecutar el ejemplo

1. Asegúrese de que ha realizado el Procedimiento de instalación único para ejemplos de Windows Communication Foundation.

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

3. Desplácese por https://localhost/ServiceModelSamples/ XmlAjaxClientPage.aspx (no abra XmlAjaxClientPage.aspx en el explorador del directorio de proyecto).

Consulte también

Otros recursos

Servicio AJAX mediante HTTP POST

Copyright © 2007 Microsoft Corporation. Reservados todos los derechos.