Flashを使ってJavaScriptで半クロスドメイン通信

ActionScript JavaScript

Flashを使った半クロスドメインのXMLHttpRequestのようなもの - ヒルズで働く@robarioの技ログ を見てね！
crossdomain.xmlが置かれているサーバと通信できるXMLHttpRequestのようなものを作りました。 → crossdomain.swf

特長とか

  • crossdomain.swfをロードするとJavaScript側にCrossDomainXMLHttpRequestクラスが定義されるので、あとはXMLHttpRequestと同じように使えます。
  • ポリシーファイルが/crossdomain.xmlじゃ無い場合、CrossDomainXMLHttpRequest.addPolicyFileを使って追加できます。
  • ちょっと急ぎで作ったので今のところopen,sendぐらいしかできません。
    • あと今のところsynchronousはできません。
  • crossdomain.swfの読み込みが完了しないとダメなので、function CrossDomainXMLHttpRequestが定義されるまで待つ必要があります。
    • …というのが少々面倒なので、onloadパラメータに関数名を設定しておくと定義完了直後に呼んでくれるようにしてあります。
      • でもsend()をcrossdomain.swfの読み込み完了まで遅延させればいいだけなので（というか最初はそのようにしていたので）、次のバージョンで気にしなくてもいいようになると思います。
        • (;ﾟдﾟ)ｧ.... 必要ファイルをswf１個にしたから、swfの読み込みが終わらないとtypeof CrossDomainXMLHttpRequest=='undefined'だから遅延send()とかできないじゃんorz（どうしようかな）

作業中

  • リクエストヘッダの処理実装済
  • レスポンスヘッダの処理
  • 通信エラー発生時の処理
  • readyState==3(LODING)のときにresponseTextを取れるようにする
  • abort処理
  • statusTextの処理
  • statusの処理の見直し
  • 名前を決める（CrossDomainXMLHttpRequestは長ったらしい。FlashXMLHttpRequest？うーん）
  • Cookieの処理
  • イベントディスパッチャの実装
  • send()を遅延実行させる
  • synchronousなsend
  • responseXMLとか実装

使い方

SWFObjectを使用した例

  <body>
    <div id="crossdomain_swf_container" style="position:absolute"></div>
    <script type="text/javascript" src="../vendor_js/swfobject.js"></script>
    <script type="text/javascript">
//<![CDATA[
function on_crossdomain_swf_loaded() {
    var req = new CrossDomainXMLHttpRequest();
    // req.addPolicyFile('http://example.com/crossdomain.xml');
    req.open('GET', 'http://twitter.com/statuses/public_timeline.xml', true);
    req.setRequestHeader('content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
    req.onreadystatechange = function() {
        if (req.readyState != 4) {
            return;
        }
        alert(req.responseText);
    };
    req.send('');
}

var swfobject = new SWFObject('crossdomain.swf', 'crossdomain_swf_external', '0', '0', '9', '#ffffff');
// 'crossdomain_swf_external'ってid指定してますけど、実際は何でもいいです。idを使わずに走査してますので。
swfobject.addVariable('onload', 'on_crossdomain_swf_loaded');
swfobject.write('crossdomain_swf_container');
//]]>
    </script>
  </body>

サーバ側にプロキシいらずで、使い慣れたインターフェイスで、（crossdomain.xmlがあれば）クロスドメインでGETもPOSTもPUTもDELETEも色々できるのは楽しい。