Alain de Klerk – Alain's SharePoint Bloggings

The JavaScript class library for SharePoint 2010 enables developers to create rich SharePoint applications using pure JavaScript. If combined with the jQuery library, the power of JavaScript solutions is limitless,….. or isn’t it.

The Same Origin Policy prevents access to resources on other domains. Put simply; you cannot call a webservice from JavaScript that is hosted on another domain. There is however one exception to this claim; browsers allow the <script>-tag to call JavaScript files that are hosted on another domain. The technique JSONP exploits this opportunity.

JSONP stands for JavaScript Object Notation with Padding. JSON is a text-based standard for system communication. The ‘with Padding’ seems a bit weird here, but I will try to explain.

A normal JSON request would look something like this:

GET http://www.alaindeklerk.com/service?UserId=1 HTTP/1.1
Host: www.alaindeklerk.com
Connection: keep-alive
Cache-Control: no-cache
Origin: http://quahog

If the Same Origin Policy would not be obeyed, a valid response might be:

{
     "firstName": "Alain",
     "lastName" : "de Klerk",
     "age"      : 27,
     "phoneNumber":
     [
         {
           "type"  : "home",
           "number": "555-1234"
         },
         {
           "type"  : "fax",
           "number": "555-4567"
         }
     ]
 }

However, because the Host (www.alaindeklerk.com) and the Origin (http://quahog) are different in our example, the browser throws an exception.

XMLHttpRequest cannot load http://www.alaindeklerk.com.
Origin http://quahog is not allowed by Access-Control-Allow-Origin.

JSONP works slight different. A JSONP-request looks similar to an ordinary JSON-request, the only difference is the is the inclusion of an extra query string parameter; the callback:

http://www.alaindeklerk.com/service?UserId=1&Callback=someFunction

The response of a JSONP call is not your typical JSON formatted document. Instead the JSON data is wrapped in a JavaScript function; hence the with Padding.

someFunction('{
     "firstName": "Alain",
     "lastName" : "de Klerk"
}');

Remind the statement above; JSONP exploits the <script>-tag to communicate with services located in another domain. Look at is this way:

<script type="text/javascript" src="http://other.domain.com/SomeService?param1=555&callback=alert"></script>

The src-attribute of a dynamically generated script-tag points to the service-URL and the service generates a JavaScript file at runtime:

alert('User 555 is ' + 'Alain');

So as long a the callback function is a valid JavaScript function on the current page, the JSON data is retrieved with a service call from another domain and can be used by the JavaScript in the original page.

My next post describes how to call a webservice on another domain by using JSONP. I have written a small SharePoint 2010 WebPart with weather forecast information that uses JSONP to call a public webservice.