こんにちは,
JSONとは
JSONについては第9回でも少し触れていますが,
JSON
JSONはそのシンプルさから多くの言語でネイティブにサポートされており,
JSONのサンプル
["aaa", "bbb", "ccc"]
JSONのサンプル
{"aaa":1, "bbb": 2, "ccc": 3}
JSONのサンプル
{"num": [1, 2, 3], "abc":["a", "b", "c"]}
JavaScriptとJSONの書式はよく似ていますが,
JSONはそういった曖昧さを排除してデータ記述言語としての精度と,
また,
JSONPとは
JSONPはJSON with Paddingの略称です。Paddingは
先ほどのJSONをJSONPらしくしてみると下記のようになります。
JSONPのサンプル
callback( {"num":[1,2,3], "abc":["a","b","c"]} );
{}で囲まれた部分がJSON形式になっており,
JSONPの理解
JSONPがなぜドメインを超えてデータをやり取りすることができるのか,
まず,
ローカル変数とグローバル変数
// 宣言なしで変数に代入すると常にグローバル変数に
global1 = 1;
// 関数の外では宣言をしてもグローバル変数に
var global2 = 2;
// グローバルオブジェクトのプロパティもグルーバル変数
window.global3 = 3;
// 関数の外では関数宣言もグローバル関数に
function global4(local1){ // 当然、引数はローカル変数
// 関数の中の宣言付き変数はローカル変数に
var local2 = 2;
var local3 = function(){
var local4 = 4;
// varをつけ忘れると常にグローバルに
global5 = 5;
};
var local5 = function(){
// 当然、local4は参照できない
alert(typeof local4); // undefined
alert(global5); // 5
}
local3();
global6();
}
global4(1);
さらに,
script要素とグローバル変数
<script>
global1 = 1;
</script>
<script>
alert(global1); // 1
</script>
上記はscript要素に直書きしていますが,
script要素とグローバル変数#2
<script src="global1.js">
<!--中身は global1 = 1; とだけ書かれたJSファイル-->
</script>
<script>
alert(global1); // 1
</script>
さらに,
script要素とグローバル変数#3
<script src="http://example.com/global1.js">
<!-- global1 = 1; とだけ書かれたJSファイルがあると仮定する -->
</script>
<script>
alert(global1); // 1
</script>
見事,
しかし,
さて,
動的なscriptの読み込み
function loadJS(src){
var script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
loadJS('global1.js');
alert(typeof global1); // undefined
jsファイルは読み込みましたが,
- loadJS('global1.
js'); - var script = document.
createElement('script'); - script.
src = src; - document.
body. appendChild(script); (global1. jsの読み込み開始)
- var script = document.
- alert(typeof global1); // undefined
(global1. jsを読み込み中)
(global1. jsの読み込み完了) - global1 = 1;
global1に1が代入されるのはglobal1.
JavaScriptはシングルスレッドなので,
読み込みを待つ方法としてはscript要素のonloadイベントを使う方法もありますが,
コールバックの仕組みも単純です。まず,
global2.
global2(2);
このglobal2.
動的なscriptの読み込み#2
function loadJS(src){
var script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
var global2 = function(data){
alert(data); // 2
};
loadJS('global2.js');
こうすることで,
- var global2 = function(data) …
- loadJS('global2.
js'); - var script = document.
createElement('script'); - script.
src = src; - document.
body. appendChild(script); (global2. jsの読み込み開始)
- var script = document.
(global2. jsの読み込み完了) - global2(2);
- alert(data); // 2
さて,
動的なscriptの読み込み#3
function loadJS(src){
var script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
var jsonp_callback = function(data){
//
};
loadJS('jsonp.api?callback=jsonp_callback');
var jsonp_callback2 = function(data){
//
};
loadJS('jsonp.api?callback=jsonp_callback2');