Serviço de AJAX com exemplo de JSON e XML

  • Artigo

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

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

Observação

O procedimento de instalação e as instruções de compilação dessa amostra estão no final deste tópico.

Para habilitar o uso de non-ASP.NET clientes AJAX, use WebServiceHostFactory (não WebScriptServiceHostFactory) no arquivo .svc. WebServiceHostFactory adiciona um WebHttpEndpoint ponto de extremidade padrão ao serviço. O ponto de extremidade é configurado em um endereço vazio em relação 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 a seguir no Web.config pode ser usada para fazer alterações de configuração adicionais no ponto de extremidade. Ele poderá ser removido se nenhuma alteração adicional for necessária.

<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 AJAX do WCF sem ASP.NET.

O serviço no exemplo a seguir é um serviço WCF padrão com duas operações. Ambas as operações exigem o estilo do corpo Wrapped nos atributos WebGetAttribute ou WebInvokeAttribute, que é específico para o comportamento webHttp e não tem nenhuma influência no comutador 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 de resposta.

A outra operação usa o atributo WebInvokeAttribute 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, MathResult, que é 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 no JavaScript, ao contrário do exemplo básico do Serviço AJAX e dos outros exemplos usando 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 nenhum 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 única para os exemplos do Windows Communication Foundation.

  2. Crie a solução XmlAjaxService.sln conforme descrito em criação de amostras do Windows Communication Foundation.

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

Confira também