Compartilhar via

Serviço AJAX com exemplo de JSON e XML

O exemplo XmlAjaxService demonstra como usar o WCF (Windows Communication Foundation) para criar um serviço JavaScript e XML (AJAX) assíncrono que retorna dados JSON (JavaScript Object Notation) ou 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 básico do Serviço AJAX .

Ao contrário dos outros exemplos do AJAX, este exemplo não usa ASP.NET AJAX e o ScriptManager controle. Com algumas configurações adicionais, os serviços 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 exemplos do 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 build para este exemplo estão localizados no final deste tópico.

Para habilitar o uso de clientes AJAX não ASP.NET, use WebServiceHostFactory (não WebScriptServiceHostFactory) no arquivo .svc. WebServiceHostFactory adiciona um ponto de extremidade WebHttpEndpoint 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 utilizada para realizar alterações adicionais de configuração no endpoint. 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 é WebHttpEndpoint XML, enquanto o formato de dados padrão é WebScriptEndpoint JSON. Para obter mais informações, consulte Como criar 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 de corpo Wrapped nos atributos WebGetAttribute ou WebInvokeAttribute, que é específico para o comportamento webHttp e não tem influência sobre a mudança do formato de dados JSON/XML.

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

O formato de resposta da 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 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 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 avulsa dos exemplos do Windows Communication Foundation.

  2. Crie a solução XmlAjaxService.sln conforme descrito na criação dos exemplos do Windows Communication Foundation.

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

Consulte também