[js]JSONPについて整理
JSONPについて整理。
JSONPとは
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の仕組み。
なるほどね。
関連記事
-
-
mautic利用時の.htaccess設定(クロスドメインとアクセス制御)
mauticをインストールは下記参照。 http://qiita.com/bez …
-
-
【ギブアップ】CentOS+casper.jsでキャプチャを取ると日本語が化けて「□」になる。
=== 追記 === casperjs、phantomjsじゃないけど、wkht …
-
-
クロスドメインのJSの利用とAjax通信の整理
jsonpとかcors設定とか、どういうときに必要か良く分からなくなったので整理 …
-
-
【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (3) Casperjsの利用
## インストールはこちら 大雑把な使い方を下記で確認。 [クイックスタート]h …
-
-
selectedを動的につけているセレクトボックスの選択解除・リセット
ちょっと、セレクトボックスの選択解除・リセットをしたい。 調べると …