JSONPとは

JSONPはJSON with Paddingの略称でクロスドメインの環境でも通信を行えるようにする仕組みのことです。
JSONPによる方法はいくつかありますが、ここでは次の方法をご紹介します。

受け取ったデータを処理するための関数（引数でデータを受け取る）を用意し、リクエスト先のレスポンスボディが用意した関数の呼び出しと受け取りたいデータをその関数の引数として渡すような内容になっていて、さらにその状態でJavaScriptとしてリクエストを行い、レスポンスを受け取った時にレスポンスボディの関数が実行され処理されます。

次のようにすることで、クロスドメインの環境でも非同期通信を行うことができます。

JavaScript

/**
 * JSONPでのリクエスト
 * @param {string} url リクエストするURL
 * @param {string} callbackFuncName データを受け取るための関数名
 * @param {function} callback データを受け取った後の関数
 */
var jsonpRequest = function(url, callbackFuncName, callback) {
	var scriptElem = document.createElement('script');

	scriptElem.type = 'text/javascript';
	scriptElem.src = url;

	document.getElementsByTagName('head')[0].appendChild(scriptElem);

	window[callbackFuncName] = function(json) {
		if (typeof callback === 'function') callback(json);
	};
};

// 使用
jsonpRequest('https://example.co.jp/test.php?mode=jsonp&callback=fooCallback', 'fooCallback', function(json) {
	console.log(json);
});

リクエスト先：https://example.co.jp/test.php

<?php echo 'fooCallback({ ... })'; ?>

JavaScript逆引きリファレンス一覧へ戻る