How to make JSONP calls from browser based Dart?

[Brett Morgan]

Hi all,

I'm trying to retrieve content from Blogger's JSON API. In a traditional JS app, I'd use JSONP to avoid the cross origin constraints. Is there a suggested approach in Dart for dealing with cross domain content loading?

Another alternative is to use a dart server to act as a proxy. Is there a suggested method for creating combined dart client/server apps in the Dart Editor?

brett

[Dimitar G.]

I don't think there is a JsonP support.

I have similar issues but hitting google credential services and
pulling data from private gdocs spreadsheets and right now it ain't
pretty.

Since app needs to be loaded from a local browser (file:///), and
JsonP does not fly in case remote service does not support local
calls, I decided to use 'dart:io' and more specific HttpServer/
HttpClient/HttpResponse/HttpClient, etc. as a embedded app server to
handle similar calls. Thing is dart is still under heavy development/
testing and many things (at least of the mentioned classes above) are
troublesome and you may end up giving up. At least I left this course
for now until at least first beta is on the horizon.

My advice (which I chose anyway as a temp solution) is writing a node
js script to handle any client calls from my dart scripts and
returning remote service call data to them.


But maybe if Blogger support local browser calls (i.e. a header key/
value = origin:'null') or your app will be uploaded on a live server,
then maybe better idea is to write a dart util class for dealing with
JsonP calls. There are plenty of Javascript examples/tutorials which
can be used as a reference guide to write your own Dart version.

Best case scenario would be Dart team to add such support but you
never know.

[Seth Ladd]

Hi Brett,

Too bad Blogger API doesn't support CORS. :(

Here's the crazy thing, if you compile your Dart app into JavaScript, this basically of works. Behold:

#import('dart:html');

foo(results) {

  print(results);

}

void main() {

  var f = foo;

  Element script = new Element.tag("script");

  script.src = "https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=barack%20obama&callback=foo";

  document.body.elements.add(script);

}

Of course, this doesn't work if you want to run this Dart code in Dartium. But it turns out there is a way to get JSONP going even for Dartium.

Step one, add this to your JavaScript of your main page:

    function callbackForJsonpApi(s) {

      window.postMessage( JSON.stringify(s), '*');

    }

And then in your Dart code:

class Jsonp { 

  void run( String url ) { 

    window.on.message.add(received, false); 

    ScriptElement s = new Element.tag('script');

    // // Jsonp call 

    s.src = url;

    document.nodes.add(s); 

  }

  received(MessageEvent e) {

    var data = JSON.parse(e.data);

    // do stuff

  }

}

We're using the magic of postMessage() between the Dart program and the main page.

I've tested both of these, give it a shot and let me know.

Thanks,

Seth

[Seth Ladd]

Apologies, I didn't test retrieving data in the first hack, and lo and behold it doesn't work.  You'll have to stick with the second example for both Dartium and JavaScript JSONP (the use of a small JavaScript function in the main page to JSONify the callback data and postMessage it back up to the Dart app)

[Seth Ladd]

I wrote up the two options with their trade-offs here: http://blog.sethladd.com/2012/03/jsonp-with-dart.html