Compartir a través de

Servicio AJAX con JSON y ejemplo XML

En el ejemplo XmlAjaxService se muestra cómo usar Windows Communication Foundation (WCF) para crear un servicio Asincrónico de JavaScript y XML (AJAX) que devuelve notación de objetos JavaScript (JSON) o datos XML. Puede acceder a un servicio AJAX mediante código JavaScript desde un cliente del explorador web. Este ejemplo se basa en el ejemplo de servicio AJAX básico .

A diferencia de los otros ejemplos de AJAX, este ejemplo no usa ASP.NET AJAX y el ScriptManager control . Con alguna configuración adicional, se puede acceder a los servicios AJAX de WCF desde cualquier página HTML a través de JavaScript y este escenario se muestra aquí. Para obtener un ejemplo del uso de WCF con ASP.NET AJAX, consulte Ejemplos de AJAX.

En este ejemplo se muestra cómo cambiar el tipo de respuesta de una operación entre JSON y XML. Esta funcionalidad está disponible independientemente de si el servicio está configurado para acceder a él ASP.NET AJAX o mediante una página de cliente HTML/JavaScript.

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 non-ASP.NET clientes de AJAX, use WebServiceHostFactory (no WebScriptServiceHostFactory) en el archivo .svc. WebServiceHostFactory agrega un WebHttpEndpoint punto de conexión estándar al servicio. El punto de conexión se configura en una dirección vacía relativa al archivo .svc; esto significa que la dirección del servicio es http://localhost/ServiceModelSamples/service.svc, sin sufijos adicionales que no sean el nombre de la operación.

<%@ServiceHost language="c#" Debug="true" Service="Microsoft.Samples.XmlAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

La siguiente sección de Web.config se puede usar para realizar cambios de configuración adicionales en el punto de conexión. Se puede quitar si no se necesitan cambios adicionales.

<system.serviceModel>
  <standardEndpoints>
    <webHttpEndpoint>
      <!-- Use this element to configure the endpoint -->
      <standardEndpoint name="" />
    </webHttpEndpoint>
  </standardEndpoints>
</system.serviceModel>

El formato de datos predeterminado para WebHttpEndpoint es XML, mientras que el formato de datos predeterminado para WebScriptEndpoint es JSON. Para obtener más información, consulte Creación de servicios AJAX de WCF sin ASP.NET.

El servicio del ejemplo siguiente es un servicio WCF estándar con dos operaciones. Ambas operaciones requieren el Wrapped estilo de cuerpo en los WebGetAttribute atributos o WebInvokeAttribute , que es específico del webHttp comportamiento y no tiene ningún efecto en el modificador de formato de datos JSON/XML.

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

El formato de respuesta de la operación se especifica como XML, que es la configuración predeterminada para el <comportamiento webHttp> . Sin embargo, se recomienda especificar explícitamente el formato de respuesta.

La otra operación usa el WebInvokeAttribute atributo y especifica explícitamente 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, , MathResultque es un tipo de contrato de datos WCF estándar.

La página web del 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 (devolver JSON) o Realizar cálculo (devolver XML) de la página. El código para invocar el servicio construye un cuerpo JSON y lo envía mediante HTTP POST. La solicitud se crea manualmente en JavaScript, a diferencia del ejemplo del servicio AJAX básico y los otros ejemplos mediante ASP.NET AJAX.

// 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 ningún procesamiento adicional en un cuadro de texto de la página. Esto se implementa con fines de demostración para permitirle observar directamente los formatos de datos XML y JSON usados.

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

Para configurar, compilar y ejecutar el ejemplo

  1. Asegúrese de que ha realizado el procedimiento de instalación única para los ejemplos de Windows Communication Foundation.

  2. Compile la solución XmlAjaxService.sln tal y como se describe en Compilar ejemplos de Windows Communication Foundation.

  3. Vaya a http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (no abra XmlAjaxClientPage.htm en el navegador desde el directorio del proyecto).

Consulte también