読者です 読者をやめる 読者になる 読者になる

ほげほげ(仮)

仮死状態

JSONでクロスドメイン通信の仕組み

JavaScript


jQuery とかを使うようになってよく見かける JSON(JavaScriptObjectNotation)という形式

クロスドメインでのajax通信を可能にするもので、原理が気になって調べてみた


まず通常のajaxXMLHttpRequest を使った通信はドメインが違う場合

セキュリティのためエラーが発生してしまう


じゃあ、なぜ JSON は平気なのか・・・?


そもそも JSON の場合は XMLHttpRequest を使っていない

まず、JSON は下のような形式で表される

{
    hoge:'sample',
    foo:10,
    bar:'あいうえお'
}

これはJavaScriotで使われる連想配列と同じ


例えば次のようなJavaScriptがあった場合

test({hoge:'sample', foo:10, bar:'あいうえお'});

function test(data) {
    alert(data.hoge + ':' + data.foo + ':' + data.bar);
}

結果は下のようにダイアログが開くだけ
f:id:STAR_ZERO:20100710213926p:image


JSON によるajaxはこれと同様のことを行えばいいだけなのだ




script タグは src 属性で別ドメインの外部JavaScriptを参照することが可能なので

それを動的に生成すればJSONによるajaxが可能になる


次のような JSON ファイルがある場合
sample.json

callback(
    {
        hoge:'sample',
        foo:10,
        bar:'あいうえお'
    }
)


下のJavaScriptを実行したらどうなるか

var script= document.createElement('script');
script.src = 'sample.json';
document.getElementsByTagName('head')[0].appendChild(script);

function callback(data) {
    alert(data.hoge + ':' + data.foo + ':' + data.bar);
}

結果はさっきと同じようにダイアログがでるはず


このようにJSONの場合は動的に script タグを作ってやることで、通信を行っている



今回の JSON ファイルは callback という関数を直接書いているが、

本来はURLパラメーターでコールバックする関数を渡してあげるのが普通である

パラメーターからサーバーサイドで動的に JSON ファイルを生成すれば

クロスドメインでも通信ができるようになる



かなり簡単にまとめたが、下のサイトが非常に分かりやすく解説してるので参考に

JSONP によるクロスドメインの通信: 第 1 回 JSONP と jQuery を組み合わせ、強力なマッシュアップを迅速に作成する


jQueryでは 5063行目付近に script タグを作っている箇所がある
(圧縮してないJSファイルでバージョン1.4.2)


ちなみに記事ではすべて JSON という表現をしたが、関数に囲まれた JSON は JSONP というのが正しい