Partilhar via

Serviço AJAX com exemplo JSON e XML

  • Artigo

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.

Nota

O procedimento de configuração e as instruções de compilação para este exemplo estão localizados 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 ponto de WebHttpEndpoint extremidade 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 a seguir em Web.config pode ser usada para fazer alterações de configuração adicionais no ponto de extremidade. 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 estilo de corpo nos WebGetAttribute atributos or WebInvokeAttribute , que é específico para o webHttp comportamento e não tem nenhuma relação com 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. Certifique-se de ter executado o procedimento de instalação única 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).

Consulte também