JSONPJSONP

In diesem Beispiel wird erläutert, wie JSON mit Padding (JSONP) in WCF REST-Diensten unterstützt wird.This sample demonstrates how to support JSON with Padding (JSONP) in WCF REST services. JSONP ist eine Konvention, die zum Aufrufen domänenübergreifender Skripts durch das Generieren von Skripttags im aktuellen Dokument verwendet wird.JSONP is a convention used to invoke cross-domain scripts by generating script tags in the current document. Das Ergebnis wird in einer festgelegten Rückruffunktion zurückgegeben.The result is returned in a specified callback function. JSONP basiert auf dem Konzept, dass z. B. tags <script Src = "http:/ /..." > Skripts aus einer beliebigen Domäne auswerten können und das durch diese Tags abgerufene Skript innerhalb eines Bereichs, in dem andere Funktionen möglicherweise bereits definiert, ausgewertet wird.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.

VeranschaulichtDemonstrates

Domänenübergreifende Skripterstellung mit JSONPCross-domain scripting with JSONP.

DiskussionDiscussion

Das Beispiel enthält eine Webseite, für die dynamisch ein Skriptblock hinzugefügt wird, nachdem die Seite im Browser gerendert wurde.The sample includes a Web page that dynamically adds a script block after the page has been rendered in the browser. Dieser Skriptblock ruft einen WCF REST-Dienst auf, der nur über den einen Vorgang GetCustomer verfügt.This script block calls a WCF REST service that has a single operation, GetCustomer. Der WCF REST-Dienst gibt den Namen und die Adresse eines Kunden durch Wrapping in einen Rückruffunktionsnamen zurück.The WCF REST service returns a customer’s name and address wrapped in a callback function name. Wenn der WCF REST-Dienst antwortet, wird die Rückruffunktion auf der Webseite mithilfe der Kundendaten aufgerufen, und die Rückruffunktion zeigt die Daten auf der Webseite an.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. Die Einfügung des Skripttags und die Ausführung der Rückruffunktion werden automatisch vom ASP.NET AJAX ScriptManager-Steuerelement behandelt.The injection of the script tag and the execution of the callback function is automatically handled by the ASP.NET AJAX ScriptManager control. Das Verwendungsmuster stimmt mit dem aller ASP.NET AJAX-Proxys überein, allerdings mit einer zusätzlichen Zeile zur Aktivierung von JSONP. Dies wird im folgenden Code dargestellt: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);  

Die Webseite kann den WCF REST-Dienst aufrufen, da der Dienst den WebScriptEndpoint verwendet, wobei crossDomainScriptAccessEnabled auf true festgelegt wurde.The Web page can call the WCF REST service because the service is using the WebScriptEndpoint with crossDomainScriptAccessEnabled set to true. Bei beiden Konfigurationen fertig sind, in der Datei "Web.config" unter dem <system.serviceModel >-Element.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>  

ScriptManager verwaltet die Interaktion mit dem Dienst und macht damit die Komplexität, die mit einer manuellen Implementierung des JSONP-Zugriffs verbunden ist, überflüssig.ScriptManager manages the interaction with the service and hides away the complexity of manually implementing JSONP access. Wenn crossDomainScriptAccessEnabled auf true festgelegt ist und das Antwortformat eines Vorgangs JSON lautet, uberprüft die WCFWCF-Infrastruktur einen Zeichenfolgenparameter für eine Rückrufabfrage und führt ein Wrapping der JSON-Antwort mit dem Wert des Zeichenfolgenparameters für die Rückrufabfrage aus.When crossDomainScriptAccessEnabled is set to true and the response format for an operation is JSON, the WCFWCF 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. Im Beispiel ruft die Webseite den WCF REST-Dienst mit dem folgenden URI auf.In the sample, the Web page calls the WCF REST service with the following URI.

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

Da der Zeichenfolgenparameter der Rückrufabfrage über den Wert JsonPCallback verfügt, gibt der WCF-Dienst die im folgenden Beispiel dargestellte JSONP-Antwort zurück.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"});  

Diese JSONP-Antwort enthält die als JSON formatierten Kundendaten, für die mit dem von der Webseite angeforderten Rückruffunktionsnamen ein Wrapping ausgeführt wurde.This JSONP response includes the customer data formatted as JSON, wrapped with the callback function name that the Web page requested. ScriptManager führt diesen Rückruf mithilfe eines Skripttags aus, um die domänenübergreifende Anforderung zu ermöglichen und danach das Ergebnis an den onSuccess-Handler zu übergeben, der an die GetCustomer-Operation des ASP.NET AJAX-Proxys übergeben wurde.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.

Das Beispiel besteht aus zwei ASP.NET-Webanwendungen. Eine Anwendung enthält nur einen WCFWCF-Dienst, die andere enthält die ASPX-Webseite, mit der der Dienst aufgerufen wird.The sample consists of two ASP.NET web applications: one contains just a WCFWCF service, and another one contains the .aspx webpage, which calls the service. Während der Ausführung der Projektmappe hostet Visual Studio 2012Visual Studio 2012 die zwei Websites auf unterschiedlichen Ports. Auf diese Weise wird eine Umgebung erstellt, in der der Dienst und der Client sich in zwei verschiedenen Domänen befinden.When running the solution, Visual Studio 2012Visual Studio 2012 will host the two websites on different ports, which creates an environment where the service and client live on different domains.

Wichtig

Die Beispiele sind möglicherweise bereits auf dem Computer installiert.The samples may already be installed on your machine. Suchen Sie nach dem folgenden Verzeichnis (Standardverzeichnis), bevor Sie fortfahren.Check for the following (default) directory before continuing.

<InstallDrive>:\WF_WCF_Samples

Wenn dieses Verzeichnis nicht vorhanden ist, rufen Sie Windows Communication Foundation (WCF) and Windows Workflow Foundation (WF) Samples for .NET Framework 4 auf, um alle Windows Communication Foundation (WCF)Windows Communication Foundation (WCF) - und WFWF -Beispiele herunterzuladen.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)Windows Communication Foundation (WCF) and WFWF samples. Dieses Beispiel befindet sich im folgenden Verzeichnis.This sample is located in the following directory.

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

So führen Sie das Beispiel ausTo run the sample

  1. Öffnen Sie die Projektmappe für das JSONP-Beispiel.Open the solution for the JSONP Sample.

  2. Drücken Sie F5, um die HYPERLINK "Http://localhost:26648/JSONPClientPage.aspx" Http://localhost:26648/JSONPClientPage.aspx im Browser zu starten.Press F5 to launch HYPERLINK "http://localhost:26648/JSONPClientPage.aspx" http://localhost:26648/JSONPClientPage.aspx in the browser.

  3. Beachten Sie, dass nach dem Laden der Seite die Texteingaben für "Name" und "Address" mit Werten aufgefüllt werden.Notice that after the page loads, the text inputs for "Name" and "Address" are populated by values. Diese Werte wurden von einem Aufruf des WCFWCF-Diensts angegeben, nachdem der Browser das Rendern der Seite beendet hat.These values were supplied from a call to the WCFWCF service after the browser finished rendering the page.