Y's note

愛と夢と人生について書きます

20秒で理解するJSONP

1行理解

JSONP(JSON with Padding)とはjavascriptコールバック関数を利用し外部ドメインサーバとJSONデータをやり取りする方法である。

※通常のHTMLでは同一ドメイン以外の通信が行えないという制約があるが、javascriptタグのsrc属性とJSONデータ/コールバック関数を利用して外部ドメインとデータのやり取りを可能にする技術。

やること

■クライアント

外部ドメインのサーバから受け取ったJSONデータを処理するコールバック関数の定義。

※ここで定義するコールバック関数はサーバサイドで定義される関数名と一致させる必要がある。

■サーバ側

JSONデータを引数としたクライアント側のコールバック関数の呼び出し

クライアントサンプル

<html>
<head>
<script type='text/javascript' src='http://www.yutakikuchi.com/jsonp/data.dat?callback=callbackFunc' />
var number = Object();
var callbackFunc = function( data ) {
   //alert( data );
   number = eval( data ); //javascriptの配列データが格納される。
}
</head>
</html>

※scriptタグのsrc属性でサーバサイドへのJSONデータのリクエストを行います。callback関数名はクライアント側で自由に設定できることを想定しています。

サーバサイドサンプル

<?php 
$callbackfunc = $_GET[ 'callback' ] ;
$test_data = array( 'items' => array( 1,2,3 ) );
$json_data = json_encode( $test_data );
echo $callbackfunc . "( $json_data ); ";

※以下はサーバサイドの実行結果で、通常のjavascript関数呼び出しになります。

callbackFunc( {"items":[1,2,3]} );

セキュリティ対策

悪意ある第三者から攻撃されないようにサーバサイドはIP制限や認証トークンを利用したほうが良いです。