JSONとJSONPの違いって?その1

こんばんは、有村です。
気温の変化で、日々の服装に困る。

で、今日のテーマはJSONとJSONPの違いって?です!

Ajaxとか、フロントエンドならJSONを日常的に使いますね。
でも私、JSONPって、実は使ったことがなかったんです。使っても無意識のコピペくらい。
そういえば、「適当にJSONP使ったら殴る」って言われたこともありましたね…(遠い目)

なので、なんかよく分からないけどJSONPは危険なやつらしいってことと、他ドメインとのやりとり以外では使わないんだなってくらいしか理解していませんでした。
けど、なんでJSONPが危険なの?と改めて聞かれて答えられなかった&ついに使う機会に遭遇してしまったので、
少しづつ紐解いていこうと思いました。

まずは、JSONがなんの略か、から。
JavaScript Object Notation
notationは、特定の記号体系を持つ表記法のこと。なるほど。JavaScriptのオブジェクトの表記法、みたいな感じでしょうか。

MDNを見ると、

JavaScript の構文に基づいていますが、JavaScript とは異なります。

と書いてあります。あくまで別物ということですね。

で、先述のようにAjaxでJSONを読み込んで、それを基にDOMを操作したり(例えば「もっと見る」機能とか)すると思うんですが、
なぜJSONは別ドメインのものを使えないのでしょうか?
そこがクリアできれば、JSONPって要らないはずなのに。

理由は、ブラウザには同一生成元ポリシーというものがあって、自分(つまり表示中のページ)を生成したドメイン以外とは通信ができないようになっているから、らしい。
ええ…でもCSSとかJSとか、外部で読めるやん…と思ったのですが、ドンピシャで「XMLHttpRequest」が禁止されています。

Ajaxを使ってJSONデータ読み込むとき、XMLHttpRequestって使いますよね…つまり……
別ドメインのJSONを使えないのは、同一生成元ポリシーに引っかかるからなんだ!
なるほど…少しJSONちゃんのこと分かってきましたよ!

そしたら次に気になるのは、「JSONPを使えば、どうして他ドメインのJSONを使えるの?」ということなのですが…

まずはJSONをちょっと理解したところで、明日以降の続きに回したいと思います!力尽きた。

それでは、きょうはこのへんで。

JSONとJSONPの違いって?その1」への1件のフィードバック

コメントを残す

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