データとかは外部で持っておきたいよねー

JS実装の中でDOM操作でアニメーションとかアレコレさせる場合は必要はないのですが
動的に変わるデータ等JS内に直接記述できないものを扱うケースも多くあります。
その時にデータ受け渡し用として利用されるのがJSON(javascript object notation)です。
xmlも同じように利用することもありますが、xmlはjsonに比べ、JS処理でのパースが複雑になっています。
その点JSONはパースを考えずに使用できるため重宝されています。

JSON

実際にどんなファイルかを見てみましょう。

[
 {
  "name":"関東",
  "value":1
 },
 {
  "name":"関西",
  "value":2
 },
 {
  "name":"北海道・東北",
  "value":3
 },
 {
  "name":"東海",
  "value":4
 },
 {
  "name":"北陸・甲信越",
  "value":5
 },
 {
  "name":"中国",
  "value":6
 },
 {
  "name":"四国",
  "value":7
 },
 {
  "name":"九州・沖縄",
  "value":8
 }
]

これが基本的なJSONの形となります。
思うことはあるでしょうか。っていうか思ってくれないと困る感じです。
要するに、配列/オブジェクトの形式で成り立っています。
正直これさえわかっていればJSONデータの作成は容易いものとなりますね。

JSONの使いドコロと使えないトコロ

というわけで、JSONファイルとして外部ファイルにまとめてデータを置いておく事で
データ更新が行われた時はJSONだけを修正すればOKとなり
JS処理内に記述するよりリスクが減ります。楽ですし
このJSONファイルの読み込みには次のセクションの非同期通信部分で触れますが
1点だけ注意が必要です。

JSONを使う上での注意点

このJSONファイルですが、通信仕様により、別サーバに設置されているJSONを
ロードすることができません。JSONファイルを扱う場合は、必ず実行元と同一サーバ内に設置する必要があります。

どうすりゃいいんだ

そこでJSONPの出番です。
JSONPとは、別サーバのJSONが読み込みできるようにする手法であり
読み込み元のJSとJSON設置側双方で処理が必要になります。
JSONPでは以下の記述方法をする必要があります。

callback(
 {
  "key1": "value1",
  "key2": "value2"
 }
);

通常のJSON形式で記述されているものが括られているのが分かります。
このcallbackとなっている部分はいわゆる関数名にあたるものとなります。
呼び出し側ではこの関数名を指定する必要があります。
ひとまずこの辺にしておきましょう。