Compartilhar via


JSONP

O exemplo JSONP demonstra como dar suporte a JSON com Preenchimento (JSONP) nos serviços REST do WCF. JSONP é uma convenção usada para invocar scripts entre domínios gerando marcas de script no documento atual. O resultado é retornado em uma função callback especificada. O JSONP baseia-se na ideia de que marcas como <script src="http://..." > podem avaliar scripts de qualquer domínio e o script recuperado por essas marcas é avaliado dentro de um escopo no qual outras funções já podem ser definidas.

Demonstra

Script entre domínios com JSONP.

Discussão

O exemplo inclui uma página da Web que adiciona dinamicamente um bloco de script depois que a página é renderizada no navegador. Esse bloco de script chama um serviço REST do WCF que tem uma única operação. GetCustomer O serviço REST do WCF retorna o nome e o endereço de um cliente encapsulados em o nome de uma função de retorno de chamada. Quando o serviço REST do WCF responde, a função de retorno de chamada na página da Web é invocada com os dados do cliente e a função de retorno de chamada exibe os dados na página da Web. A injeção da marca de script e a execução da função de retorno de chamada é tratada automaticamente pelo controle ASP.NET AJAX ScriptManager. O padrão de uso é o mesmo de todos os proxies AJAX ASP.NET, com a adição de uma linha para habilitar JSONP, conforme mostrado no código a seguir:

var proxy = new JsonpAjaxService.CustomerService();
proxy.set_enableJsonp(true);
proxy.GetCustomer(onSuccess, onFail, null);

A página da Web pode chamar o serviço REST do WCF porque o serviço está usando o WebScriptEndpoint, com o crossDomainScriptAccessEnabled definido como true. As duas configurações são feitas no arquivo Web.config no elemento <system.serviceModel>.

<system.serviceModel>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  <standardEndpoints>
    <webScriptEndpoint>
      <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

O ScriptManager gerencia a interação com o serviço e oculta a complexidade de implementar manualmente o acesso JSONP. Quando crossDomainScriptAccessEnabled é definido como true e o formato de resposta de uma operação é JSON, a infraestrutura do WCF inspeciona o URI da solicitação para um parâmetro de cadeia de consulta de retorno de chamada e encapsula a resposta JSON com o valor do parâmetro de cadeia de consulta de retorno de chamada. No exemplo, a página da Web chama o serviço REST do WCF com o URI a seguir.

http://localhost:33695/CustomerService/GetCustomer?callback=Sys._json0

Como o parâmetro de cadeia de caracteres de consulta de retorno de chamada tem um valor de JsonPCallback, o serviço WCF retorna uma resposta JSONP, como mostrado no exemplo a seguir.

Sys._json0({"__type":"Customer:#Microsoft.Samples.Jsonp","Address":"1 Example Way","Name":"Bob"});

Essa resposta JSONP inclui os dados do cliente formatados como JSON, encapsulados com o nome da função de retorno de chamada solicitado pela página da Web. O ScriptManager executará este callback usando uma tag de script para realizar uma solicitação cross-domain e, em seguida, passará o resultado para o manipulador onSuccess que foi passado à operação GetCustomer do proxy AJAX ASP.NET.

O exemplo consiste em dois aplicativos Web ASP.NET: um contém apenas um serviço WCF e outro contém a página da Web .aspx, que chama o serviço. Ao executar a solução, o Visual Studio hospedará os dois sites em portas diferentes, o que cria um ambiente em que o serviço e o cliente residem em domínios diferentes.

Para executar a amostra

  1. Abra a solução para o exemplo JSONP.

  2. pressione F5 para iniciar http://localhost:26648/JSONPClientPage.aspx no navegador.

  3. Observe que, após o carregamento da página, as entradas de texto para "Nome" e "Endereço" são preenchidas por valores. Esses valores foram fornecidos a partir de uma chamada para o serviço WCF depois que o navegador terminou de renderizar a página.