QrONE - crossdomain.js

crossdomain.js とは？

crossdomain.js は、Ajax でいうところの XMLHTTPRequest を Flash 経由で行う為のライブラリです。

通常の Ajax のリクエストでは、ドメインの異なるページへのリクエストが行えませんが、Flash 経由にすることで crossdomain.xml が置かれている一般的なAPI サーバーなら直接アクセスが可能です

またJSON で E4X ライクに返値を返している為、XML の内側の要素に簡単にアクセスできて非常に便利です。

crossdomain.xml を利用してクロスドメインの壁を越えられる
E4X ライクに簡単に XML 要素にアクセス

ダウンロード

以下から入手できます。

Package	URL
crossdomain.js v1.1	http://www.qrone.org/archives/crossdomain11.zip

使い方

<script src="crossdomain.js" language="javascript"></script>

まず <head> ～ </head> 内で必要なライブラリを読み込みます。

<script language="JavaScript" type="text/javascript"><!--
crossdomain.open();
 
var _map;
crossdomain.onload = function(){
  crossdomain.request("http://api....com", 
    function(flexEvent, data){
	alert(data.xml);
    });
}
 
crossdomain.onnoflash = function(){
  // Flash 9 がインストールされていない場合
}
 
//--></script>

その後、<body> ～ </body> 内にスクリプトタグを書いてその中でまず crossdomain.open() として Flash のタグを挿入します。この Flash は 1dot の透明で position:absolute なものなので配置には影響しません。

必要に応じて crossdomain.onload のイベントを使ってください。これは Flash が起動して crossdomain を利用したクエリが送れる状態になったことを示すイベントです。

あとは…

crossdomain.request("http://api....com", 
    function(flexEvent, data){
	alert(data.xml);
    });

のようにして簡単に URL に対して GET リクエストを送れます。帰ってくるタイミングは第二引数に関数を指定してあげてください。

この data.xml に XML データが E4X 風にパースされた状態で入っています。たとえば下のような XML なら…

<root>
  <child id="A">
    <text>ここが欲しい</text>
  </child>
</root>
 
data.xml.child.text 
// = "ここが欲しい"
 
data.xml.child._id
// = "A"

のように、Attribute は前に "_" が付いた形で、Element は、"." でつないで参照していくことができます。もっと複雑な…

<root>
  <child id="A">
    <text>ここが欲しい1</text>
    <text>ここが欲しい2</text>
    <junk>いらない</junk>
    <text>
        <name>名前</name>
        <value data="B"/>
    </text>
  </child>
</root>
 
data.xml.child.text[1] 
// = "ここが欲しい2"
 
data.xml.child.junk
// = "いらない"
 
data.xml.child.text[3].name
// = "名前"
 
data.xml.child.text[3].value._data
// = "B"

といった感じです。

Flex ぽく使いたい場合

URLLoader っぽく使いたい場合は下みたいに書くこともできます。addEventListenr は一応 URLLoader でとることの出来るすべてのイベントに対応しているのでこちらのほうがより繊細な処理が可能です。

var fp = new crossdomain;
fp.addEventListener("complete", function(flexEvent, data){
  var out = "";
  try{
    if(data.xml){
      var items = data.xml.item;
      for(var i=0; i<items.length; i++){
        out += "・<a href='"+items[i].url+"'>" + items[i].title + "</a><br/>";
        if(i>9) break;
      }
    }
  }catch(e){}
  document.getElementById("auction").innerHTML = out;
  
  
});
fp.recurseLimit = 9;
fp.request("http://api.auctions.yahoo.co.jp/"
 + "AuctionWebService/V1/Search?appid=YahooDemo&query="+encodeURI(str));

上記は実際に Yahoo!Auction API を使ってみた場合。

recurseLimit というのは同じ要素が並んだときにいくつまで使うかという指定で、JSON データを小さくできるようになっていますが、通常は必要ありません。

var fp = new crossdomain;
fp.post // POST するデータ
fp.headers // ヘッダーの配列
fp.contentType // 送るデータのコンテントタイプ

とかも指定できます。

バージョン履歴

ver1.1
- HTML 側のロードが間に合わず SecurityError が出る問題を回避

ver1.0
- なんか巨大な XML を受信しようとするとおかしいことがある

ライセンス

crossdomain.js は無料 - CPL License にてご利用いただけますが、必ず自己責任の元で使ってください。このソフトを利用した事に因って生じた如何なる問題、損害に対して当方は保証しかねます。