JSONP

  • Articolo

In questo esempio JSONP viene illustrato come supportare JSONP(JSON with Padding) nei servizi WCF REST. JSONP è una convenzione usata per richiamare script tra domini mediante la generazione di tag script nel documento corrente. Il risultato viene restituito in una funzione di callback specificata. JSONP si basa sul concetto che tag quali <script src="http://..." > siano in grado di valutare script da ogni dominio e che lo script recuperato da tali tag venga valutato all'interno di un ambito in cui possono essere già definite altre funzioni.

Dimostra

Generazione di script tra domini con JSONP.

Discussione

Nell'esempio è inclusa una pagina Web che aggiunge dinamicamente un blocco di script dopo il rendering della pagina nel browser. Questo blocco di script chiama un servizio WCF REST che dispone di una sola operazione, ovvero GetCustomer. Il servizio WCF REST restituisce il nome e l'indirizzo di un cliente incapsulati in un nome di funzione di callback. Quando il servizio WCF REST risponde, la funzione di callback nella pagina Web viene richiamata con i dati del cliente e la funzione di callback visualizza i dati nella pagina Web. L'inserimento del tag script e l'esecuzione della funzione di callback vengono gestite automaticamente dal controllo ScriptManager di AJAX ASP.NET. Il modello di utilizzo è lo stesso di tutti i proxy AJAX ASP.NET, con l'aggiunta di una riga per l'abilitazione di JSONP, come illustrato nel codice seguente:

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

La pagina Web può chiamare il servizio WCF REST perché il servizio sta usando WebScriptEndpoint con crossDomainScriptAccessEnabled impostato su true. Entrambe le configurazioni vengono eseguite nel file Web.config nell'elemento <system.serviceModel>.

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

ScriptManager gestisce l'interazione con il servizio non rivelando la complessità dell'implementazione manuale dell'accesso JSONP. Quando crossDomainScriptAccessEnabled è impostato su true e il formato di risposta per un'operazione è JSON, l'infrastruttura WCF controlla l'URI della richiesta per un parametro della stringa di query di callback ed esegue il wrapping della risposta JSON, con il valore del parametro della stringa di query di callback. Nell'esempio la pagina Web chiama il servizio WCF REST con l'URI seguente:

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

Poiché il parametro della stringa di query di callback dispone di un valore JsonPCallback, il servizio WCF restituisce la risposta JSONP illustrata nell'esempio seguente.

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

Questa risposta JSONP include i dati del cliente formattati come JSON, di cui è stato eseguito il wrapping con il nome della funzione di callback richiesta dalla pagina Web. ScriptManager eseguirà questo callback usando un tag script per portare a termine la richiesta tra domini, quindi passerà il risultato al gestore onSuccess passato all'operazione GetCustomer del proxy AJAX ASP.NET.

L'esempio è costituito da due applicazioni Web ASP.NET: una contiene solo un servizio WCF e un'altra contenente la pagina Web .aspx, che chiama il servizio. Quando si esegue la soluzione, Visual Studio ospiterà i due siti Web su porte diverse, creando un ambiente in cui il servizio e il client risiedono in domini diversi.

Per eseguire l'esempio

  1. Aprire la soluzione per l'esempio relativo a JSONP.

  2. Premere F5 per avviare http://localhost:26648/JSONPClientPage.aspx nel browser.

  3. Si noti che dopo il caricamento della pagina, gli input di testo per "Name" e "Address" vengono popolati con i valori. Questi valori sono stati forniti da una chiamata al servizio WCF dopo che il browser abbia eseguito il rendering della pagina.