JSONPファイルのデータをJavaScriptを利用して表示する

JSONP形式のデータをJavaScriptで利用するときの例。

JSONPは、下のコード(jsonp.js)にあるようにJSON形式のデータ({key:value})をさらに関数の呼び出しで囲ったスタイルになります。なので、この関数を実行すると定義された関数が呼び出されて値を渡して実行することになります。

jsonp.js

mycallback({
		"title": "jsonp",
		"description": "jsonp test"
})

jsonp.html

jsonp.htmlにあるscriptタグでjsonp.jsを読み込むと、jsonp.jsファイルにあるmycallback(呼び出し)が実行され、jsonp.htmlにあるmycallback(jsonp)が呼び出され引数jsonpに値が渡されて、関数の中でデータを処理してブラウザに表示します。

function mycallback(jsonp) {
	var data = jsonp.title;
	document.write(data);
}
<script type="text/javascript" src="jsonp.js"></script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です