JSONP is always a popular way to use the open policy of the SCRIPT HTML element to implement the cross-domain access by a lot of developers. However, most of their knowledge blogs are just the segments of one of the integrated solutions. In this article, we will introduce a whole integrated solution to implement the cross-domain access to WCF Service in SharePoint Site Collection by HTTPS protocol. After finishing the configuration, we can start to implement the service program and client-side Ajax request code.
1. JSONP WCF Service
After completing the above steps, we can start the code the WCF REST service to support the JSONP call. At first we need add attribute to the Service implementation Class to allow the ASP.NET compatibility:
[AspNetCompatibilityRequirements(
RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
It looks like there’s some duplicate configuration. However, it will be necessary. Sometimes, the same configuration in configuration file will not work very well. Besides, we also need add another attribute for Operation Contract Method of Service:
[WebInvoke(Method =“GET”, UriTemplate =
“GetData?param1={ param1}&callback={callback}”, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
This attribute will declare the method of the HTTP request invoke and configure the request and response message format. The most important is to define the URI template for each service operation to identify the parameter list. For JSONP, we need to pay more attention to the parameter settings. It is very important to define implicitly a parameter for the callback. The parameter will be used to create JSONP callback function for client-side. Of course, you can rename it by your choice. After all the attribute appending, we can code the service implementation. For an example, we have a service operation to get data with several parameter passed. So we can code like this:
[WebInvoke(Method = “GET”, UriTemplate = “GetData?param1={param1}&callback={callback}”, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
public void GetData(string param1, string callback)
{
//To do…
if (string.IsNullOrEmpty(callback))
{
HttpContext.Current.Response.Write(JsonConvert.Serialize(result));
}
else
{
HttpContext.Current.Response.Write(string.Format(“{0}({1})”, callback, JsonConvert.Serialize(result)));
}
2. Client-side JSONP Call
After the steps specified in the above sections, we have finished the server-side coding and configuration. In this section, we will focus on the client-side coding. Here, we take JS code as an example. You can translate it into other language you want.
There is a sample of client-side JSONP code. Please see the diagram 5-1. In the below sample, you will see the similar Ajax code to common jQuery Ajax call. However, we need to pay attention to several part. At first, we need to generate a random callback name as the first line of the below sample code shows. Because there is a confliction for two same requests with the same URL and parameters. So it is better to set a random text. Another difference is the value of data type of the Ajax call. It should be the ‘JSONP’. Besides, the ‘jsonp’ and ‘jsonpCallBack’ options are very important. The ‘jsonp’ option is to control the callback parameter name which will be passed in URL as the format ‘parameter name=’. It should be the same as the callback parameter name of WCF service method mentioned in the above section. The ‘jsonpCallBack’ is to set the value of callback parameter. Its value is the real client-side callback name. Either the ‘jsonp’ or the ‘jsonpCallback’ option is empty. Then the success callback event will not be executed.
Figure 5-1: JSONP Sample Code
