Partilhar via

JSONP

  • Artigo

O exemplo JSONP demonstra como dar suporte a JSON com preenchimento (JSONP) em serviços WCF REST. 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. JSONP baseia-se na ideia de que tags como <script src="http://..." > podem avaliar scripts de qualquer domínio e o script recuperado por essas tags é avaliado dentro de um escopo no qual outras funções já podem ser definidas.

Demonstra

Scripts entre domínios com JSONP.

Debate

O exemplo inclui uma página da Web que adiciona dinamicamente um bloco de script após a página ter sido renderizada no navegador. Este bloco de script chama um serviço WCF REST que tem uma única operação, GetCustomer. O serviço WCF REST 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 WCF REST 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 são tratadas 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 o 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 WCF REST porque o serviço está usando o WebScriptEndpoint com crossDomainScriptAccessEnabled definido como true. Ambas as configurações são feitas no arquivo Web.config sob o <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 da implementação manual do acesso JSONP. Quando crossDomainScriptAccessEnabled é definido como true e o formato de resposta para uma operação é JSON, a infraestrutura WCF inspeciona o URI da solicitação para um parâmetro de cadeia de caracteres de consulta de retorno de chamada e encapsula a resposta JSON com o valor do parâmetro de cadeia de caracteres de consulta de retorno de chamada. No exemplo, a página da Web chama o serviço WCF REST com o seguinte URI.

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 , o serviço WCF retorna uma resposta JSONP mostrada JsonPCallbackno 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 que a página da Web solicitou. O ScriptManager executará esse retorno de chamada usando uma marca de script para realizar a solicitação entre domínios e, em seguida, passará o resultado para o manipulador onSuccess que foi passado para a operação GetCustomer do proxy AJAX ASP.NET.

O exemplo consiste em dois ASP.NET aplicativos Web: um contém apenas um serviço WCF e outro contém a .aspx página da Web, 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 vivem em domínios diferentes.

Para executar o exemplo

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

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

  3. Observe que depois que a página é carregada, 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.