WCF et JsonP – faire des requetes AJAX cross domain facilement
Je vous avais parlé il y a quelques temps de JSONP, une solution permettant de faire communiquer un navigateur avec un serveur autre que le serveur d’origine de la page actuelle : une sorte de requête XmlHttpRequest cross domain.
J’ai recemment eu besoin de mettre en place cette solution avec un service WCF. Après quelques recherches, je suis tombé sur un exemple de Microsoft implémentant JsonP sous forme d’un behavior WCF : JSON with Padding (AJAX) [MSDN]
Arès avoir téléchargé l’exemple, vous pouvez alors décorer votre méthode de l’attribut JSONPBehavior
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class WSPouet
{
[WebGet]
[OperationContract]
[JSONPBehavior(callback = "jsonp")]
public PouetData GetData(key url) { }
}
Au niveau de la configuration, vous devez avoir ceci :
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="WSPouetAspNetAjaxBehavior">
<enableWebScript/>
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
<services>
<service name="WSPouet">
<endpoint address="" behaviorConfiguration="WSPouetAspNetAjaxBehavior"
binding="customBinding" bindingConfiguration="jsonpBinding" contract="WSPouet"/>
</service>
</services>
<bindings>
<customBinding>
<binding name="jsonpBinding">
<jsonpMessageEncoding/>
<httpTransport manualAddressing="true"/>
</binding>
</customBinding>
</bindings>
<extensions>
<bindingElementExtensions>
<add name="jsonpMessageEncoding"
type="MyCompany.ServiceModel.JsonpBindingExtension, MyCompany.ServiceModel.JsonpExtension"/>
</bindingElementExtensions>
</extensions>
</system.serviceModel>
L’argument callback de l’attribut JsonPBehavior permet de spécifier le nom de l’argument contenant la fonction de callback. Ainsi vous pouvez accéder à votre service en allant sur l’url WSPouet.svc/MyMethod?jsonp=mycallback&key=mykey.
Si vous utilisez jQuery, côté client vous pouvez accèder à votre service en utilisant :
$.getJSON('http://pouet.com/WSPouet.svc/MyMethod?key=pouet&jsonp=?', function(data) {
alert(data.d);
});
Pour en savoir plus sur JsonP (JavaScript Object Notation with Padding), je vous invite à lire l’article suivant : JSONP : comment faire des requete JSON cross-domain