JavaScript
jsonp
JSON

jsonpを初めて知ったのですが、

jsonとの違いや、ドメインクロス制約など

学ぶことが多かったのでまとめてみます。


jsonとjsonpの違いって?


これがjson

{

"name": "mai",
"age": "26"
}

普通のjsonですね。


これがjsonp

callback({

"name" : "mai",
"age" : "26"
});

jsonとは少し書き方が違って、先頭に関数名がつきます。


どういう時に json / jsonpを使い分けるの?

クロスドメインの際に、

クロスドメイン制約の関係からjsonデータをとってきたいときだけ、jsonpを使います。

それ以外はjsonでOK。

・・・クロスドメイン?!

・・・・・・クロスドメイン制約?!

はい、次に説明しますね。


クロスドメインとクロスドメイン制約


クロスドメインって?

クロスドメインとは、

ホームページを表示したときに、

複数の場所(ドメイン)からデータを持ってくるようになっている状態のこと。

くわしくはこちら

スクリーンショット 2019-03-20 15.33.28.png


クロスドメイン制約って?

クロスドメインの際、ブラウザーのセキリュティーエラーが発生して、

Ajax通信を行なうことができないという制約です。

*詳しくはこちら

クロスドメインの場合、よく使うファイルを例にすると・・・

javascriptやcss、imgファイルなどのデータはOKなのですが、jsonはNG!

なので、jsonpを使用します。


jsonp処理の書き方

長くなりそうなので、わかりやすいページを紹介します。

*こちらを参照