jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

JSONPでクロスドメイン

JSONは同一ドメイン内でなければデータの送受信ができない。
場合によってはドメインを超えてデータをやり取りしたいこともある。
その仕組み？としてJSONPがあるので、そのお勉強。

JSONPとは何ぞや

JSONPもJSONと同様にデータの記述言語だと思っていました。が！JSONPはjavascriptそのものでした。

1. 呼び出す側のjavascriptにJSONデータを処理する関数を定義する。 2. 呼び出されるjavascriptファイルに、その関数の引数としてJSONデータを記述する。 3. javascriptファイルの読み込み順を「関数定義」→「関数実行」にする。
<script>タグのsrcは別ドメインでも特に問題無いので結果的にクロスドメインになるのでした。
JSONPとは1～3のような手順で、クロスドメインでJSONデータを使用する方法のことでした。

call.js
var fnc = function(val){
	alert(val[2].name);
};
data.js
fnc([{"name":"田中", "age":25, "sex":"男"},
     {"name":"佐藤", "age":42, "sex":"男"},
     {"name":"鈴木", "age":32, "sex":"女"}]);


<script src="call.js"></script>
<script src="http://XXXXX/data.js"></script>

このようにすると、javascriptは上から順番に読まれ、call.js内で定義された関数が 引数にJSONデータをセットしたdata.js内で実行され「鈴木」が表示されることになります。
この単純な仕組みを使ってクロスドメインを実現しているのでした。

読み込むスクリプト(JSONP)のタグを動的に生成する

利用したいJSONデータが記述されたファイルのスクリプトタグをHTMLファイルに記述するのは、 汎用性に乏しいものになってしまいます。
そこでDOMを使って動的にスクリプトタグを生成するようにします。 

<script src="call.js"></script>
<!--<script src="http://xxxxx/data.js"></script>-->


// 関数の定義
var fnc = function(val){
	alert(val[1].name + "：" + val[1].age + "：" + val[1].sex);
};

// スクリプトが生成される → 関数が実行される
var script = document.createElement("script");
script.src = "http://xxxxx/data.js";
var head = document.getElementsByTagName("head");
head[0].appendChild(script);

関数の定義と関数の実行の順番がきちんと守られているので、「佐藤：42：男」がalertされました。