Dartでjsonp

はじめに、まず、 Ajaxを呼ぶ先が Acess-Control-Allow-Origin をちゃんと返していれば、こんな凝ったことする必要ない です。

さて、Ajaxで呼べない時のJSONPの取り方。パッケージの中には、下記の2つのように動きそうなライブラリがあるが、動かず。

• jsonp_request
• jsonp

ちなみに、Dart VMは1.7.2 (2014/11/14)。

さて、困りました。ということで、次のようなコードを発見したのでメモ。(参照sample_jsonp)

import 'dart:html';
import 'dart:js';

void main() {
  querySelector("#button")
      ..text = "Click me!"
      ..onClick.listen(fetchJSON);
}

void fetchJSON(MouseEvent event) {
  context['myCallback'] = (res) {
    print(convert(res));
  };
  ScriptElement script = new Element.tag("script");
  script.src = "https://api.github.com/users/dart-lang/repos?callback=myCallback";
  document.body.children.add(script);
}

convert( JsObject object ) {
  return JSON.decode( context['JSON'].callMethod("stringify", [ object ]));
}

ちょっと解説。

("#button")のクリックする度にデータを取得しに行っている。

contextというのは、Dart内でJSでの変数を参照する時に使うもの。このコードではmyCallback に=以降の関数をアサインしている。
その次の後の行で<script>タグを作りだして、そのsrcにJSONPで呼ぶべきURLを渡している。

そして、ajaxで得たJsObjectをDartの文字列に変換するのにもcontextから、JSのJSON.stringigy()を呼び出している。

ふむふむ。なんとも苦肉の策。