« パラメータ指定 | トップページ | RPC呼び出し »

2007年4月30日 (月)

クロスドメイン呼び出し

Dojoでは、異なるドメインのサービスをブラウザから直接呼び出する方法として、scriptタグによる方法(ScriptSrcTransport)とIFrame(XhrIframeProxy)による方法の2つを提供している。

ScriptSrcTransport

scriptタグを用いてJavaScript/JSONサービスを呼び出すことで、異なるドメインのサービスをブラウザから直接呼び出すことができる。

scriptタグを用いて呼び出すときも、dojo.io.bindを用いる。transportプロパティとしてScriptSrcTransportを指定する点が異なる。scriptタグによる呼び出しの最も簡単な例を以下に示す。

dojo.require("dojo.io.ScriptSrcIO");

dojo.io.bind({
  url: "http://the.script.url/goes/here",
  transport: "ScriptSrcTransport"
});

上記の例では、呼び出しが完了したことを知ることができない。呼び出すサービスのレスポンスメッセージにJavaScriptの変数が含まれるときは、その変数が定義されるのを待って、通知を受けることができる。

レスポンスメッセージに含まれるJavaScriptの変数をcheckStringパラメータの値として指定する。以下の例では、変数fooが定義されたら(typeof(foo) != undefinedとなったら)、loadパラメータで指定したFunctionが呼び出される。

dojo.io.bind({
  url: "http://the.script.url/goes/here",
  transport: "ScriptSrcTransport",
  checkString: "foo",
  load: function(type, data, event, kwArgs) { alert(data);},
  error: function(type, data, event, kwArgs) { alert(data.message);},
  timeout: function() { /* Called if there is a timeout */},
  timeoutSeconds: 10
});

JSONP形式のcallback関数名を指定できるサービスのときは、jsonParamNameパラメータとしてcallback関数名を指定するパラメータ名を指定することで、呼び出しが完了した通知を受けることができる。また、mimetypeには"application/json"を指定する。

DojoのJSONP対応のAPIを利用するには、callback関数名を指定できるようになっている必要がある。callback関数名を指定するパラメータ名をjsonParamNameに指定する。

以下の例では、 livedoor クリップのJSONPによるAPIを使っている。

dojo.require("dojo.io.ScriptSrcIO");

dojo.io.bind({
  url: 'http://api.clip.livedoor.com/json/clips',
  content: {livedoor_id: "staff_clip", limit: 10},
  transport: "ScriptSrcTransport",
  jsonParamName: "callback",
  method: "get",
  mimetype: "application/json",
  load: function(type, data, event) {
    var output = dojo.byId('output');
    output.innerHTML+="タイトル:"+data.title+"<br />";
    for(i=0; i<data.clips.length; i++){
      output.innerHTML+="<br />";
      output.innerHTML+="<a href='"+data.clips[i].link+"'>"+data.clips[i].title+"</a>";
    }
  }
});

XhrIframeProxy

dojo.io.XhrIframeProxyを用いることで、JSONPではないクロスドメインのサービスを呼び出すことができる。 XhrIframeProxyはサービスと同じドメインにIFrameを配置し、配置したIFrameからサービス呼び出ししている。

XhrIframeProxyを使うときは、dojo.require("dojo.io.XhrIframeProxy")を追加する。

dojo.io.bindのiframeProxyUrlパラメータの値として、サービスが提供されているドメインと同じドメインの場所に置いたxip_server.htmlファイルの場所をdojo.io.bindの引数に追加する。xip_server.htmlはsrc/io/xip_server.htmlに置かれているので、このファイルをコピーして、サービスと同じドメイン内に置く必要がある。

また、xip_server.htmlと同じフォルダにisAllowed.jsを作成して、リクエストごとにサービス呼び出しを許可するかどうか判別する必要がある。isAllowed.jsには、isAllowedRequest(request)メソッドを実装する。以下 にisAllowed.jsの例を示す。

function isAllowedRequest(request){
/* Decide if you want to allow the request. Return true or false */
  return true;
}

以下にXhrIframeProxyの呼び出し例を示す。

dojo.require("dojo.io.XhrIframeProxy");

function init(){
  dojo.io.bind({
    iframeProxyUrl: "http://ymdmstk.cocolog-nifty.com/src/xip_server.html",
    url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
    mimetype: "text/plain",
    load: function(type, data, evt){
      dojo.debug(data);
    }
  });
}

XhrIframeProxyでは、非同期リクエストのみがサポートされる(sync:trueは無効となる)。

« パラメータ指定 | トップページ | RPC呼び出し »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/6258319

この記事へのトラックバック一覧です: クロスドメイン呼び出し:

« パラメータ指定 | トップページ | RPC呼び出し »