JSONPメモ

JSONPだとクロスドメインでもAjaxできてよいよい。
ってことで自分の備忘録かねてJSONPのやりとりメモ。

非同期javascriptで別ドメインのPHP叩いてデータもってくる。

ポイントは
PHP側
➡
・headerでContent-Typeを付与
・JSON形式のデータを()で囲う
・出力前にGETのcallback内容を出力

JS側
➡取得URLの最後に&callback=?をつける

です。

コードを見た方がわかりやすいと思うので、以下コードです。

サーバーサイド側PHP

http://example.com/json.php

<?php

	//ブラウザJSON出力
	header("Access-Control-Allow-Origin: *");
	$output = json_encode($array);

	if (isset($_GET['callback'])) { //JSONP書式

		header('Content-Type: text/javascript; charset=utf-8');
		echo $_GET['callback'] . "(" . $output . ")";

	} else { //JSON書式

		header("Content-Type: application/json;");
		echo $output;
	}

echo $_GET['callback'] . “(” . $output . “)”;
という形でjson書式の前後に()でかこってやるのがポイントです。

クライアントフロント側JS

#jquery読み込み後
<script>
var url = "http://example.com/json.php?★好きなパラメータ★&callback=?";
$.getJSON(url, function(data) {
	//成功時の処理
})
</script>

最後に&callback=?をつけるのがポイントです。