Serviço AJAX com exemplo JSON e XML

O exemplo XmlAjaxService demonstra como usar o Windows Communication Foundation (WCF) para criar um serviço JavaScript e XML assíncrono (AJAX) que retorna JavaScript Object Notation (JSON) ou dados XML. Você pode acessar um serviço AJAX usando o código JavaScript de um cliente de navegador da Web. Este exemplo se baseia no exemplo de serviço AJAX básico .

Ao contrário dos outros exemplos AJAX, este exemplo não usa ASP.NET AJAX e o ScriptManager controle. Com alguma configuração adicional, os serviços WCF AJAX podem ser acessados de qualquer página HTML por meio de JavaScript, e esse cenário é mostrado aqui. Para obter um exemplo de como usar o WCF com ASP.NET AJAX, consulte Exemplos de AJAX.

Este exemplo mostra como alternar o tipo de resposta de uma operação entre JSON e XML. Essa funcionalidade está disponível independentemente de o serviço estar configurado para ser acessado por ASP.NET AJAX ou por uma página de cliente HTML/JavaScript.

Para habilitar o uso de clientes AJAX que não sejam ASP.NET, use WebServiceHostFactory (não WebScriptServiceHostFactory) no arquivo .svc. WebServiceHostFactory adiciona um endpoint padrão ao serviço. O ponto de extremidade é configurado em um endereço vazio relativo ao arquivo .svc; Isso significa que o endereço do serviço é http://localhost/ServiceModelSamples/service.svc, sem sufixos adicionais além do nome da operação.

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

A seção subsequente em Web.config pode ser usada para fazer alterações de configuração adicionais no endpoint. Ele pode ser removido se não forem necessárias alterações extras.

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

O formato de dados padrão para WebHttpEndpoint é XML, enquanto o formato de dados padrão para WebScriptEndpoint é JSON. Para obter mais informações, consulte Criando serviços WCF AJAX sem ASP.NET.

O serviço no exemplo a seguir é um serviço WCF padrão com duas operações. Ambas as operações requerem o Wrapped formato do corpo nos atributos WebGetAttribute ou WebInvokeAttribute, que é específico para o comportamento webHttp e não tem impacto sobre a opção de formato de dados JSON/XML.

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

O formato de resposta para a operação é especificado como XML, que é a configuração padrão para o <comportamento webHttp> . No entanto, é uma boa prática especificar explicitamente o formato da resposta.

A outra operação usa o WebInvokeAttribute atributo e especifica explicitamente JSON em vez de XML para a resposta.

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

Observe que, em ambos os casos, as operações retornam um tipo complexo, MathResultque é um tipo de contrato de dados WCF padrão.

A página da Web do cliente XmlAjaxClientPage.htm contém código JavaScript que invoca uma das duas operações anteriores quando o usuário clica nos botões Executar cálculo (retornar JSON) ou Executar cálculo (retornar XML) na página. O código para invocar o serviço constrói um corpo JSON e o envia usando HTTP POST. A solicitação é criada manualmente em JavaScript, ao contrário do exemplo Basic AJAX Service e dos outros exemplos que usam 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);

Quando o serviço responde, a resposta é exibida sem qualquer processamento adicional em uma caixa de texto na página. Isso é implementado para fins de demonstração para permitir que você observe diretamente os formatos de dados XML e JSON usados.

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

Para configurar, compilar e executar o exemplo

1. Verifique se você executou o procedimento de instalação do One-Time para os exemplos do Windows Communication Foundation.

2. Crie a solução XmlAjaxService.sln conforme descrito em Criando os exemplos do Windows Communication Foundation.

3. Navegue até http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (não abra XmlAjaxClientPage.htm no navegador a partir do diretório do projeto).

Ver também

• Serviço AJAX usando HTTP POST