Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
いまさら聞けないJSONPのまとめ
2015.5.25
Yujiro Araki
Ajaxの制約
クロスドメイン通信を行うことができない
www.foo1.com www.bar1.com
①アクセス
$.ajax({
url: 'http://www.bar1.com/‘
});
②ページ表示
③Ajax実行②の内容
・JSON with padding(付け足しJSON)の略
・JSON(JavaScript Object Notation)を拡張した
プログラミングモデル
・SOP※による他サーバへの問い合わせ制限を回避
JSONPとは
引用:Web/D...
理由:src属性に設定するURLはSOP適用外=異なるドメイン設定可能
もう少し分かりやすく言うと
script要素を利用してデータを取得
src属性に設定するURLはSOP適用外
script要素を利用する理由
script要素のsrc属性がSOP適用外であることを示す例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
Goog...
{ name: 'foo', price: 3000 }
JSONデータの例
showPrice({ name: 'foo', price: 3000 });
JSONPの例
<script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
showPrice({ name: 'foo', pri...
<script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
showPrice({ name: 'foo', pri...
<script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
</script>
<script src="http:...
<script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
</script>
<script src="http:...
<script>
function showPrice(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
function show() {
var script...
<script>
function callback(data) {
alert("Name: " + data.name + ", Price: " + data.price);
}
function show() {
var script ...
<script>
$.ajax({
dataType: 'jsonp',
url: "http://user-domain/hoge.php",
success: function(data){
alert("Name: " + data.na...
<script>
$.ajax({
dataType: 'jsonp',
crossDomain: true,
jsonp : 'jsoncallback',
url: "http://user-domain/hoge.php",
succes...
<script>
$.getJSON("http://user-domain/hoge.php?&callback=?",
function(data) {
$('div').html(data.title + data.description...
$.getJSON("http://user-domain/hoge.php?jsoncallback=?",
{
aaa : bbb,
},
function(data) {
alert("first success");
$('div')....
Google Code: jquery-jsonp
https://github.com/jaubourg/jquery-jsonp
エラーハンドリング、キャッシング、タイムアウトなど、デフォルトでは対応でき
ない機能が使えるようになるみたい
...
Upcoming SlideShare
Loading in …5
×

いまさら聞けないJSONPのまとめ

3,285 views

Published on

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

Published in: Technology
  • Be the first to comment

いまさら聞けないJSONPのまとめ

  1. 1. いまさら聞けないJSONPのまとめ 2015.5.25 Yujiro Araki
  2. 2. Ajaxの制約 クロスドメイン通信を行うことができない www.foo1.com www.bar1.com ①アクセス $.ajax({ url: 'http://www.bar1.com/‘ }); ②ページ表示 ③Ajax実行②の内容
  3. 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. 4. 理由:src属性に設定するURLはSOP適用外=異なるドメイン設定可能 もう少し分かりやすく言うと script要素を利用してデータを取得
  5. 5. src属性に設定するURLはSOP適用外 script要素を利用する理由
  6. 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. 7. { name: 'foo', price: 3000 } JSONデータの例
  8. 8. showPrice({ name: 'foo', price: 3000 }); JSONPの例
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Google Code: jquery-jsonp https://github.com/jaubourg/jquery-jsonp エラーハンドリング、キャッシング、タイムアウトなど、デフォルトでは対応でき ない機能が使えるようになるみたい jQueryでJSONP http://blog.mudaimemo.com/2008/09/jqueryjsonp.html 静的なJSONデータをパラメータに持つJavaScript関数を呼び出す方法

×