[js]JSONPについて整理

JSONPについて整理。

ＪSＯＮＰとは

JSON with Padding

Paddingとは付け足しという意味。

なんのために使われるのか

別ドメインへのajaxリクエストは、セキュリティ上ブラウザ側がアクセスできないように制御していた。

そこを、裏技的に乗り越えて、jsonデータの受け渡しをしようとしたのがJSONP。

あくまでajaxリクエストであることと、ブラウザ側の制御であることもポイント。

注意

しかし、これは今は昔の話になりつつある様子。

“XMLHttpRequest level2″という規格に対応したブラウザであれば、WEBサーバー側で”Access-Control-Allow-Origin:”の許可設定しているホストとはクロスドメインでajax通信可能となっている様子。

WEBの過去の情報を見ていくと、IE8とかChrome7の時代(2010年頃)にこつこつ始まり、IE10の時(2013年)にはほぼ、モダンブラウザは対応済みになった様子。

なので、最新ではあまり情報もないし、使うことも無い様子。。

JSONPの仕組み

ただ、一応勉強なので仕組み自体は抑えておきたい。

ここが参考になった。

http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011

[単純にリモートのデータが欲しい]

・ajaxじゃ無理。

・しかし、クロスドメインでも相手側のJSを読むことは可能なので、リモート側のJSを読む。

・これで相手側のグローバル変数は読み込むことが出来る。

・しかし、リモートの処理とローカルの処理順が同期できない。
(相手側JSの処理の完了をまたず、後続が動く。)

そのため、

[解決策 コールバック関数の利用]

・ローカル側にコールバック関数（＝処理が終わったら実行して欲しい関数）を定義して、リモート側の処理完了時にそのコールバック関数を実行してもらう。

・その引数としてJSONテキストを渡す。

やたーー！

読み込み完了　⇒　ローカル側の後続処理実行＝callback()の実行　＋ 引数に戻り値(JSON)あり。

というのが、JSONPの仕組み。

なるほどね。