Servicio AJAX con ejemplo JSON y XML

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.

A diferencia de la otra muestra AJAX, este ejemplo no utiliza AJAX de ASP.NET ni el control ScriptManager. Con alguna configuración adicional, se puede tener acceso a los servicios de AJAX de WCF 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 AJAX Samples.

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 el acceso mediante AJAX de ASP.NET o una página de cliente de 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 clientes AJAX que no son de ASP.NET, utilice WebServiceHostFactory (no WebScriptServiceHostFactory) en el archivo .svc. WebServiceHostFactory agrega un extremo estándar WebHttpEndpoint al servicio. El extremo se configura en una dirección vacía relacionada con el archivo .svc; esto significa que la dirección del servicio es https://localhost/ServiceModelSamples/service.svc, sin ningún sufijo adicional, exceptuando 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 en Web.config se puede utilizar para realizar cambios de configuración adicionales al extremo. Se puede quitar si no se necesita ningún cambio adicional.

<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 de for T:System.ServiceModel.Description.WebScriptEndpoint es JSON. Para obtener más información, vea Creación de servicios AJAX WCF sin 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 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;
     }
}

Nota:

Puede que los ejemplos ya estén instalados en su equipo. Compruebe el siguiente directorio (valor predeterminado) antes de continuar. <InstallDrive>:\WF_WCF_Samples Si no existe este directorio, vaya a la página de ejemplos de Windows Communication Foundation (WCF) y Windows Workflow Foundation (WF) Samples para .NET Framework 4 para descargar todos los ejemplos de Windows Communication Foundation (WCF) y WF. Este ejemplo se encuentra en el siguiente directorio. <InstallDrive>:\WF_WCF_Samples\WCF\Basic\AJAX\XmlAjaxService

Para configurar, compilar y ejecutar el ejemplo

1. Asegúrese de realizar los Procedimiento de instalación única para los ejemplos de Windows Communication Foundation.

2. Compile el PostAjaxService.sln de la solución tal y como se describe en Compilación de los 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).

Vea también

Tareas

Servicio AJAX mediante HTTP POST