JSONPJSONP

Esta amostra demonstra como apoiar json com preenchimento (JSONP) em serviços WCF REST.This sample demonstrates how to support JSON with Padding (JSONP) in WCF REST services. JSONP é uma convenção usada para invocar scripts de domínio cruzado gerando tags de script no documento atual.JSONP is a convention used to invoke cross-domain scripts by generating script tags in the current document. O resultado é retornado em uma função de retorno de chamada especificada.The result is returned in a specified callback function. O JSONP baseia-se na <script src="http://..." > ideia de que tags como podem avaliar scripts de qualquer domínio e o script recuperado por essas tags é avaliado dentro de um escopo no qual outras funções podem já ser definidas.JSONP is based on the idea that tags such as <script src="http://..." > can evaluate scripts from any domain and the script retrieved by those tags is evaluated within a scope in which other functions may already be defined.

DemonstraDemonstrates

Scripting de domínio cruzado com JSONP.Cross-domain scripting with JSONP.

DiscussãoDiscussion

A amostra inclui uma página da Web que adiciona dinamicamente um bloco de script após a página ter sido renderizada no navegador.The sample includes a Web page that dynamically adds a script block after the page has been rendered in the browser. Este bloco de script soca um serviço GetCustomerWCF REST que tem uma única operação, .This script block calls a WCF REST service that has a single operation, GetCustomer. O serviço WCF REST retorna o nome e endereço de um cliente embrulhado em um nome de função de retorno de chamada.The WCF REST service returns a customer’s name and address wrapped in a callback function name. 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.When the WCF REST service responds, the callback function on the Web page is invoked with the customer data and the callback function displays the data on the Web page. A injeção da tag de script e a execução da função de retorno de chamada são automaticamente manuseadas pelo ASP.NET controle AJAX ScriptManager.The injection of the script tag and the execution of the callback function is automatically handled by the ASP.NET AJAX ScriptManager control. O padrão de uso é o mesmo que todos os proxies ajax ASP.NET, com a adição de uma linha para habilitar JSONP, como mostrado no código a seguir:The usage pattern is the same as with all ASP.NET AJAX proxies, with the addition of one line to enable JSONP, as shown in the following code:

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

A página da Web pode chamar o serviço WebScriptEndpoint WCF REST porque o serviço está usando o conjunto com crossDomainScriptAccessEnabled true.The Web page can call the WCF REST service because the service is using the WebScriptEndpoint with crossDomainScriptAccessEnabled set to true. Ambas as configurações são feitas no arquivo Web.config o <elemento system.serviceModel>.Both of these configurations are done in the Web.config file under the <system.serviceModel> element.

<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.ScriptManager manages the interaction with the service and hides away the complexity of manually implementing JSONP access. Quando crossDomainScriptAccessEnabled é true definido e o formato de resposta para uma operação é JSON, a infra-estrutura WCF inspeciona o URI da solicitação de um parâmetro de seqüência de consulta de chamada e envolve a resposta JSON com o valor do parâmetro de string de consulta de chamada.When crossDomainScriptAccessEnabled is set to true and the response format for an operation is JSON, the WCF infrastructure inspects the URI of the request for a callback query string parameter and wraps the JSON response with the value of the callback query string parameter. Na amostra, a página da Web chama o serviço WCF REST com o seguinte URI.In the sample, the Web page calls the WCF REST service with the following URI.

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

Como o parâmetro de seqüência de JsonPCallbackseqüeique de chamada de chamada tem um valor de , o serviço WCF retorna uma resposta JSONP mostrada no exemplo a seguir.Because the callback query string parameter has a value of JsonPCallback, the WCF service returns a JSONP response shown in the following example.

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

Esta resposta JSONP inclui os dados do cliente formatados como JSON, embrulhados com o nome da função de retorno de chamada que a página da Web solicitou.This JSONP response includes the customer data formatted as JSON, wrapped with the callback function name that the Web page requested. O ScriptManager executará esse retorno de chamada usando uma tag de script para realizar a solicitação de domínio cruzado e, em seguida, passará o resultado para o manipulador onSuccess que foi passado para a operação GetCustomer do proxy ASP.NET a AJAX.ScriptManager will execute this callback using a script tag to accomplish the cross-domain request, and then pass the result to the onSuccess handler that was passed to the GetCustomer operation of the ASP.NET AJAX proxy.

A amostra consiste em dois ASP.NET aplicações web: uma contém apenas um serviço WCF e outra contém a página web .aspx, que chama o serviço.The sample consists of two ASP.NET web applications: one contains just a WCF service, and another one contains the .aspx webpage, which calls the service. Ao executar a solução, o Visual Studio 2012 hospedará os dois sites em diferentes portas, o que cria um ambiente onde o serviço e o cliente vivem em diferentes domínios.When running the solution, Visual Studio 2012 will host the two websites on different ports, which creates an environment where the service and client live on different domains.

Importante

Os exemplos podem já estar instalados no seu computador.The samples may already be installed on your machine. Verifique o seguinte diretório (padrão) antes de continuar.Check for the following (default) directory before continuing.

<InstallDrive>:\WF_WCF_Samples

Se esse diretório não existir, vá para a Windows Communication Foundation (WCF) e para o Windows Workflow Foundation (WF) Amostras para .NET Framework 4 para baixar todas as Amostras e amostras da WFWF Windows Communication Foundation (Windows Communication Foundation).If this directory does not exist, go to Windows Communication Foundation (WCF) and Windows Workflow Foundation (WF) Samples for .NET Framework 4 to download all Windows Communication Foundation (WCF) and WFWF samples. Este exemplo está localizado no seguinte diretório.This sample is located in the following directory.

<InstallDrive>:\WF_WCF_Samples\WCF\Basic\AJAX\JSONP

Para executar a amostraTo run the sample

  1. Abra a solução para a amostra JSONP.Open the solution for the JSONP Sample.

  2. Pressione F5 http://localhost:26648/JSONPClientPage.aspx para iniciar no navegador.Press F5 to launch http://localhost:26648/JSONPClientPage.aspx in the browser.

  3. Observe que após as cargas da página, as entradas de texto para "Nome" e "Endereço" são preenchidas por valores.Notice that after the page loads, the text inputs for "Name" and "Address" are populated by values. Esses valores foram fornecidos a partir de uma chamada para o serviço WCF depois que o navegador terminou de renderizar a página.These values were supplied from a call to the WCF service after the browser finished rendering the page.