For Want Of A Better Word

[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の仕組み。

なるほどね。

 

 

 - javascript | js

  関連記事

mautic利用時の.htaccess設定(クロスドメインとアクセス制御)

mauticをインストールは下記参照。 http://qiita.com/bez …

【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (4) Casper動くもGoogleトレンドのバグ?にはまる

casperjsで値を取るため 念のためもう一回埋め込み用のタグからURLを確認 …

selectedを動的につけているセレクトボックスの選択解除・リセット

ちょっと、セレクトボックスの選択解除・リセットをしたい。   調べると …

【Javascript】グラフ・チャート描画用のjsライブラリまとめ

ちょっとWEBでグラフを描画しようと思いまして、jsのライブラリを物色。 色々サ …

[js] chart.jsのグラフをwkhtmltopdfでpdfに保存する

表題のことをしたいとなった。   結論目的は果たされたのだけどハマリポ …