JSONPについてまとめたものです。

1. いまさら聞けないJSONPのまとめ
2015.5.25
Yujiro Araki

2. Ajaxの制約
クロスドメイン通信を行うことができない
www.foo1.com www.bar1.com
①アクセス
$.ajax({
url: 'http://www.bar1.com/‘
});
②ページ表示
③Ajax実行②の内容

3. ・JSON with padding（付け足しJSON）の略
・JSON（JavaScript Object Notation）を拡張した
プログラミングモデル
・SOP※による他サーバへの問い合わせ制限を回避
JSONPとは
引用：Web/DBプログラミング徹底解説
http://keicode.com/script/jsonp-same-origin-policy.php
※同一生成元ポリシー（Same Origin Policy）

4. 理由：src属性に設定するURLはSOP適用外＝異なるドメイン設定可能
もう少し分かりやすく言うと
script要素を利用してデータを取得

5. src属性に設定するURLはSOP適用外
script要素を利用する理由

6. script要素のsrc属性がSOP適用外であることを示す例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
Google CDN
参考：https://developers.google.com/speed/libraries/

7. { name: 'foo', price: 3000 }
JSONデータの例

8. showPrice({ name: 'foo', price: 3000 });
JSONPの例

9. <script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
showPrice({ name: 'foo', price: 3000 });
</script>
index.html
JSONPの利用（1/5）
JSONPによるクロスドメインの通信: 第1回 JSONPとjQueryを組み合わせ、強力なマッシュアップを迅速に作成する
http://www.ibm.com/developerworks/jp/web/library/wa-aj-jsonp1/

10. <script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
showPrice({ name: 'foo', price: 3000 });
</script>
この部分を他サーバ（user-domain）の外部ファイル読み込みにする
index.html
JSONPの利用（2/5）

11. <script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
</script>
<script src="http://user-domain/show.js"></script>
showPrice({ name: 'foo', price: 3000 });
show.js
index.html
JSONPの利用（3/5）

12. <script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
</script>
<script src="http://user-domain/show.js"></script>
showPrice({ name: 'foo', price: 3000 });
show.js
index.html
この部分を動的生成にする
JSONPの利用（4/5：動的生成）
動的生成にする理由：イベント発生契機に通信を行いたい場合

13. <script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
function show() {
var script = document.createElement('script');
script.src = 'http://user-domain/show.js';
(document.getElementsByTagName('head'))[0].appendChild(script);
}
</script>
<a href="#" onclick="show() return false;">click</a>
index.html
show.js
showPrice ({ name: 'foo', price: 3000 });
JSONPの利用（5/5：動的生成）

14. <script>
function callback(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
function show() {
var script = document.createElement('script');
script.src = 'http://user-domain/show.php?jsonp=callback;
(document.getElementsByTagName('head'))[0].appendChild(script);
}
</script>
<a href="#" onclick="show() return false;">click</a>
<?php
echo $_GET['jsonp'] . "({ name: 'foo', price: 3000 });";
?>
show.php（他サーバ）
index.html
クエリーパラメータ「jsonp」の値をコールバック関数名として設定
関数のパラメータにJSONを設定
JSONPの実用的な実装例

15. <script>
$.ajax({
dataType: 'jsonp',
url: "http://user-domain/hoge.php",
success: function(data){
alert("Name: " + data.name + ", Price: " + data.price);
},
});
</script>
jQueryによるAjax+JSONPのサポート：$ajax
index.html

16. <script>
$.ajax({
dataType: 'jsonp',
crossDomain: true,
jsonp : 'jsoncallback',
url: "http://user-domain/hoge.php",
success: function(data){
alert("Name: " + data.name + ", Price: " + data.price);
},
});
</script>
jQueryによるAjax+JSONPのサポート：$ajax
index.html

17. <script>
$.getJSON("http://user-domain/hoge.php?&callback=?",
function(data) {
$('div').html(data.title + data.description);
});
</script>
クエリーパラメータ「callback（名称は何でもよい）」の値に
「?」を設定することでJSONPリクエストとして扱われる。
「?」の部分はjQueryで自動生成
実際のHTTPリクエスト：
http://user-domain/hoge.php?callback
= jQuery17208957796988929256_1334645135858&_=1334645136039
<?php
echo $_GET['jsonp'] . '(' . "{ title: 'foo', description: 'bar' }" . ');';
?>
hoge.php
実行される
関数
最後の“_=[TIMESTAMP]“はキャッシュを無効にするためのもの http://api.jquery.com/jQuery.ajax/
$.ajaxでのみ有効な模様
jQueryによるAjax+JSONPのサポート：$getJSON

18. $.getJSON("http://user-domain/hoge.php?jsoncallback=?",
{
aaa : bbb,
},
function(data) {
alert("first success");
$('div').html(data.title + data.description);
})
.done(function() {
alert("second success");
})
.fail(function() {
alert("error");
})
.always(function() {
alert("complete");
});
$.getJSON

19. Google Code: jquery-jsonp
https://github.com/jaubourg/jquery-jsonp
エラーハンドリング、キャッシング、タイムアウトなど、デフォルトでは対応でき
ない機能が使えるようになるみたい
jQueryでJSONP
http://blog.mudaimemo.com/2008/09/jqueryjsonp.html
静的なJSONデータをパラメータに持つJavaScript関数を呼び出す方法