一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

JSONPについて

前回、XMLHttpRequestを使った非同期通信のとこでJSONデータをちょろちょろいじっていたので、今回はJSONPを試してみました。

まずJSONPとは、


JavaScript Object Notation with Paddingの略。
JSONデータに関数呼び出しを付加したもので、これを利用するとクロスドメインプログラミングが可能になる。


ここでクロスドメインプログラミングについてちょっと補足を入れます!

通常ブラウザでは異なるドメインのリソースを参照できないようになっており、前回書いたXHRでもそれは同様です。(画面を取得したドメイン以外のリソースを参照しようとすると例外が発生…)

まあそういう制約を設けておいてくれないと無法地帯になりますから。。
ユーザが外部サイトに対してリクエストを投げて、そのレスポンスに重要な情報が入ってくるかもしれませんし、自由に参照されてしまっては非常に危険ですからね。。

で、そんな安心な制約をわざわざ取っ払って外部サイトのデータを参照できるのがクロスドメインプログラミングです。


では早速コードのほうを!

//HTML
<head>
       <script>
	function jsonp_test(json){
		var data = document.createElement("ul");
		var conts="";
		for(var i=0; i<json.personal_data.length; i++){
            conts+="<li>"+json.personal_data[i].id+".(名前)"+json.personal_data[i].name+",(性格)"+json.personal_data[i].character+"</li>";
			}
		data.innerHTML=conts;
		document.body.appendChild(data);
	}
	</script>
</head>
<body>
	<h1>JSONPテスト</h1>
	<script type="text/javascript" src="外部サイト/jsonp.js" /></script>
</body>
//外部サイトにある想定で。。
//jsonp.js←これがコールバック関数になる。JSONデータを引数にとる関数になっとる。

jsonp_test({"personal_data":
	[
        {"id": 1, "name" : "田中","character":"真面目"},
        {"id": 2, "name" : "山田","character":"明るい"},
        {"id": 3, "name" : "山本","character":"ど変態"}
	]
});


こんな感じになります。

実際に書いてみたらJSONPってすごいシンプルでした。


JSONPデータの内容と同じ名前の関数をクライアント側で定義しておく
              ↓
・script要素のsrc属性にJSONPを出力するURLを指定。JSONPをクライアント側で読み込む。
              ↓
・クライアント側で定義してあった関数がJSONPを出力することで呼び出されて処理が実行される。


ふむ。


ここでポイントは、
script要素はクロスドメインの制約がない。

ということです。

このおかげで上記の仕組みが成り立っているのですね。そしてJSONPデータがJavaScriptだからなし得る技なんだと思います。


実務で使うイメージはあんまり沸かないけど、いい勉強になりました。ありがとうJSONP!(JSONPって言いたいだけ)

小さなことからコツコツと。