20秒で理解するJSONP

１行理解

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 ); ";