JSONP

  • Article

L’exemple JSONP montre comment prendre en charge JSONP (JSON with Padding) dans les services WCF REST. JSONP est une convention servant à appeler des scripts entre domaines en générant des balises de script dans le document actif. Le résultat est retourné dans une fonction de rappel spécifiée. JSONP repose sur le principe que les balises telles que <script src="http://..." > peuvent évaluer des scripts de n’importe quel domaine, et que le script extrait par ces balises est évalué dans une étendue dans laquelle d’autres fonctions sont peut-être déjà définies.

Illustre le

Script entre domaines avec JSONP.

Discussion

L'exemple inclut une page Web qui ajoute dynamiquement un bloc de script après que la page a été rendue dans le navigateur. Ce bloc de script appelle un service WCF REST qui a une seule opération, GetCustomer. Le service WCF REST retourne le nom et l’adresse d’un client encapsulés dans un nom de fonction de rappel. Lorsque le service WCF REST répond, la fonction de rappel de la page web est appelée avec les données client et la fonction de rappel affiche les données dans la page web. L'injection de la balise de script et l'exécution de la fonction de rappel sont gérées automatiquement par le contrôle ASP.NET AJAX ScriptManager. Le modèle d’utilisation est le même qu’avec tous les proxys ASP.NET AJAX, mais comprend une ligne supplémentaire pour activer JSONP, comme le montre le code suivant :

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

La page web peut appeler le service WCF REST, car le service utilise le WebScriptEndpoint avec crossDomainScriptAccessEnabled ayant la valeur true. Ces deux configurations s’effectuent dans le fichier Web.config sous l’élément <system.serviceModel>.

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

ScriptManager gère l'interaction avec le service et cache la complexité de l'implémentation manuelle de l'accès JSONP. Lorsque crossDomainScriptAccessEnabled a la valeur true et que le format de réponse d’une opération est JSON, l’infrastructure WCF recherche dans l’URI de la requête un paramètre de chaîne de requête de rappel, et inclut la réponse JSON dans un wrapper avec la valeur du paramètre de chaîne de requête de rappel. Dans l'exemple, la page Web appelle le service WCF REST avec l'URI suivant.

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

Étant donné que le paramètre de chaîne de requête de rappel a la valeur JsonPCallback, le service WCF retourne une réponse JSONP représentée dans l'exemple suivant.

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

Cette réponse JSONP inclut les données client mises au format JSON et encapsulées avec le nom de la fonction de rappel que la page web a demandée. ScriptManager exécute ce rappel à l'aide d'une balise de script pour effectuer la demande entre domaines, puis passe le résultat au gestionnaire onSuccess qui a été passé à l'opération GetCustomer du proxy ASP.NET AJAX.

L’exemple se compose de deux applications web ASP.NET : l’une contient juste un service WCF, tandis que l’autre contient la page web .aspx qui appelle le service. Lors de l’exécution de la solution, Visual Studio héberge les deux sites web sur des ports différents, ce qui crée un environnement où le service et le client résident dans des domaines différents.

Exécution de l'exemple

  1. Ouvrez la solution de l'exemple JSONP.

  2. Appuyez sur F5 pour lancer http://localhost:26648/JSONPClientPage.aspx dans le navigateur.

  3. Notez qu’une fois la page chargée, des valeurs viennent renseigner les zones de texte « Name » et « Address ». Ces valeurs ont été fournies à partir d’un appel au service WCF une fois que le navigateur avait effectué le rendu de la page.