Compartir a través de

JSONP

  • Artículo

El ejemplo JSONP muestra cómo admitir JSON con relleno (JSONP) en los servicios REST de WCF. JSONP es una convención usada para invocar scripts entre dominios generando las etiquetas de scripts en el documento actual. El resultado se devuelve en una función de devolución de llamada especificada. JSONP se basa en la idea de que etiquetas como <script src="http://..." > pueden evaluar scripts de cualquier dominio, y el script recuperado por estas etiquetas se evalúa dentro de un ámbito en el que se pueden haber definido otras funciones.

Muestra

Scripting a través de dominios con JSONP.

Debate

El ejemplo incluye una página web que agrega dinámicamente un bloque de script una vez representada la página en el explorador. Este bloque de script llama a un servicio REST de WCF que tiene una sola operación: GetCustomer. El servicio REST de WCF devuelve el nombre y la dirección de un cliente encapsulados en un nombre de función de devolución de llamada. Cuando el servicio REST de WCF responde, se invoca la función de devolución de llamada en la página web con los datos del cliente y la función muestra los datos en la página web. El control ScriptManager de ASP.NET AJAX administra automáticamente la inyección de la etiqueta de script y la ejecución de la función de devolución de llamada. El patrón de uso es igual que el de todos los servidores proxy AJAX de ASP.NET, aunque incorpora una línea para habilitar JSONP, como se muestra en el siguiente código:

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

La página web puede llamar al servicio REST de WCF porque el servicio usa el objeto WebScriptEndpoint con crossDomainScriptAccessEnabled establecido en true. Ambas configuraciones se efectúan en el archivo Web.config, en el elemento <system.serviceModel>.

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

El ScriptManager administra la interacción con el servicio y oculta la complejidad de la implementación manual del acceso JSONP. Cuando crossDomainScriptAccessEnabled se establece en true y el formato de respuesta de una operación es JSON, la infraestructura de WCF inspecciona el URI de la solicitud para buscar un parámetro de cadena de una consulta de devolución de llamada y encapsula la respuesta JSON con el valor de dicho parámetro. En el ejemplo, la página web llama al servicio REST de WCF con el siguiente URI.

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

Dado que el parámetro de cadena de una consulta de devolución de llamada tiene el valor JsonPCallback, el servicio WCF devuelve una respuesta JSONP que se muestra en el siguiente ejemplo.

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

Esta respuesta JSONP incluye los datos del cliente con formato JSON, ajustados con el nombre de la función de devolución de llamada que la página web solicitó. El ScriptManager ejecutará esta devolución de llamada utilizando una etiqueta de script para lograr la solicitud a través de los dominios y, a continuación, pasará el resultado al controlador onSuccess que se pasó a la operación GetCustomer del proxy AJAX de ASP.NET.

El ejemplo está compuesto de dos aplicaciones web de ASP.NET: una contiene simplemente un servicio WCF y la otra contiene la página web .aspx, que llama al servicio. Al ejecutar la solución, Visual Studio hospeda los dos sitios web en puertos diferentes, lo que crea un entorno donde el servicio y el cliente están en dominios distintos.

Para ejecutar el ejemplo

  1. Abra la solución para obtener el ejemplo de JSONP.

  2. Presione F5 para lanzar http://localhost:26648/JSONPClientPage.aspx en el explorador.

  3. Observe que, después de cargarse la página, las entradas de texto de "Nombre" y "Dirección" están rellenas con valores. Estos valores se proporcionaron en una llamada al servicio WCF, una vez que el explorador terminó de representar la página.