跨域脚本问题和JSONP

Question

Our Client requires that we supply Widgits for their site. They want to link to us to get Html & the jQuery required to manipulate the Html and do asynchronous requests. I understand that there are cross-domain security limitations that would prevent this from being a possibility, but that some of those limitations are aleviated by using JSONP as the data transfer format.

I'm finding it difficult in finding an explanation of what's possible in the context of what I'm trying to achieve. Could somebody please fill me in?

Answer 1

In short, all AJAX requests (and cross-window scripting) are subject to the Same Origin Policy . JSONP ( JSON with Padding ) isn't subject to the Same Origin Policy because it involves adding a script from an external domain to the DOM, the script itself contains a call to a known function that already exists on the client, with the JSON as the function call's argument.

JSONP can't return HTML or XML directly, but it could pass an object that contains a string of HTML or XML data, which in turn could be added to the DOM or parsed by the client.

For instance, a JSONP might return:

jsonp_callback({"Errors":"none","Data":"<div id='externalWidget'>Hello!</div>"});

When this script is added to the page, the function jsonp_callback will be executed with the JSON object as its argument. That function would then add the HTML code to the page.

There are other ways of achieving what you want. For instance, if the client doesn't need to manipulate the data in any way, you could provide a widget via a HTML document that would be iframed by your client's page:

<iframe id="widget" src="http://mysite.com/widget/v1/" />

If they did need to manipulate the data, they would blocked by the Same Origin Policy as outlined above.

Answer 2

As far as I know, JSONP utilises SCRIPT tags to load content that is external to the domain that your calling page is being loaded from. Using a SCRIPT tag allows you to reference external URLs. Once this external 'script' has been loaded, data will be returned to a specific callback function which was passed through the location of the external script.

jQuery: http://www.insideria.com/2009/03/what-in-the-heck-is-jsonp-and.html

MooTools: http://www.clientcide.com/wiki/cnet-libraries/06-request/00-jsonp

Answer 3

It sounds like you could use easyXDM ( http://easyxdm.net/ ) for your purpose. Its a library that gives you cross-domain messaging and RPC.

You can easily use it to set up an iframe based widget (like the one the build int Widget class does http://consumer.easyxdm.net/current/example/widgets.html ) or use it only to get raw data.

You can also take a look at the xhr sample that gives access to cross-domain ajax at http://consumer.easyxdm.net/current/example/xhr.html , or the generic RPC sample at http://consumer.easyxdm.net/current/example/methods.html