JSONPの使い方

JavaScriptで別のドメインのデータを取得したいとすると、クロスドメイン問題にぶつかると思います。
この問題を解決するためには、JSONP(JSON with paddingの略)というモノを使用することになると思います。
他にも方法はありますが、きっとこれが一番簡単なのではないでしょうか？

実際の使い方を書きます
下記URLにアクセスすると、
http://always.ddo.jp/blog/jsonp/test.jsonp

test( { "name" : "hoge", "age" : "100" } );
このような文字列が返却されます。

この文字列をよく見ると、
javascriptのtest関数に'{ "name" : "hoge", "age" : "100" }'というjson形式のデータを渡しているように見えると思います。

JSONPについては、これが全てです！

下記ソースをFirebugのコンソールなどに貼って実行してみてください。

function test(json){
    alert('Name is ' +  json.name + '. Age is ' + json.age + '.');
}
(function() {
    var ele = document.createElement('script');
    ele.type = 'text/javascript';
    ele.src = 'http://always.ddo.jp/blog/jsonp/test.jsonp';
    document.body.appendChild(ele);
})();

別のドメインの情報を取得して、ページ内で取得データを使用できるようになりました！

■解説
ソースに存在する無名関数にて、scriptタグを生成しています。
このscriptタブのsrc属性に、最初に記述したjsonpデータを返却するURLを記述します。
そうすると、帰ってきたデータがクライアントのHTML上に展開され、javascriptのtest関数を呼びます。
test関数は、自分で好きな様に記述できるので、引数を受け取って今回はalertしています。

次回はGoogleカレンダーと連携した、もう少し面白い使い方を紹介したいと思います。