Servicio AJAX con ejemplo JSON y XML
El ejemplo de XmlAjaxService muestra cómo usar Windows Communication Foundation (WCF) a fin de crear un servicio JavaScript y XML (AJAX) asincrónico que devuelva datos de notación de objetos JavaScript (JSON) o XML. Puede tener acceso a un servicio de AJAX utilizando el código JavaScript de un cliente del explorador web. Este ejemplo se basa en el ejemplo de 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 WCF AJAX desde cualquier página HTML a través de JavaScript, y este escenario se muestra aquí. Para obtener un ejemplo sobre el procedimiento para usar WCF con ASP.NET AJAX, 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 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 los clientes de AJAX de ASP.NET, use WebServiceHostFactory (no WebScriptServiceHostFactory) en el archivo .svc. WebServiceHostFactory agrega un extremo WebHttpEndpoint estándar al servicio. El punto de conexión se configura en una dirección vacía relativa al archivo .svc; lo que significa que la dirección del servicio es http://localhost/ServiceModelSamples/service.svc, sin ningún sufijo adicional, excepto 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 utilizar para realizar cambios de configuración adicionales en el punto de conexión. 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 de WebHttpEndpoint es XML, mientras que el formato de datos predeterminado de WebScriptEndpoint es JSON. Para obtener más información, consulte Creación de servicios WCF AJAX sin ASP.NET.
El servicio del ejemplo siguiente es un servicio WCF estándar 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 la configuración predeterminada 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 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 (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 de forma manual en JavaScript, a diferencia del ejemplo de servicio AJAX básico y los otros ejemplos en los que se usa 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 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;
}
}
Configurar, compilar y ejecutar el ejemplo
Asegúrese de que ha realizado el procedimiento de instalación única para los ejemplos de Windows Communication Foundation.
Compile la solución XmlAjaxService.sln tal y como se describe en Compilación de los ejemplos de Windows Communication Foundation.
Vaya a
http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm(no abra XmlAjaxClientPage.htm en el explorador del directorio del proyecto).