Compartilhar via

JSONP

  • Artigo

O exemplo de JSONP demonstra como dar suporte ao JSONP (JSON com Preenchimento) nos serviços REST do WCF. O 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 de retorno de chamada 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 só operação, GetCustomer. O serviço REST do WCF retorna o nome e o endereço de um cliente encapsulados em um nome de 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 do ASP.NET AJAX, com a adição de uma linha para habilitar o JSONP, conforme mostrado no seguinte código:

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 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 consulta de retorno de chamada tem um valor igual a JsonPCallback, o serviço WCF retorna uma resposta JSONP mostrada 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 solicitada pela página da Web. O ScriptManager executará esse retorno de chamada usando uma marca de script para realizar a solicitação entre domínios e transmitirá o resultado para o manipulador onSuccess que foi transmitido para a operação GetCustomer do proxy do ASP.NET AJAX.

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 no exemplo de 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 de uma chamada para o serviço WCF depois que o navegador terminou de renderizar a página.