Submit Search
Upload
いまさら聞けないJSONPのまとめ
•
5 likes
•
9,717 views
Yujiro Araki
Follow
JSONPについてまとめたものです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 19
Download now
Download to read offline
Recommended
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Django REST Framework における API 実装プラクティス | PyCon JP 2018
Django REST Framework における API 実装プラクティス | PyCon JP 2018
Masashi Shibata
Linked Open Data(LOD)の基本的な使い方
Linked Open Data(LOD)の基本的な使い方
Kouji Kozaki
PHPの今とこれから2022
PHPの今とこれから2022
Rui Hirokawa
使ってみて気づいた AGPL ライセンスの メリット・デメリット
使ってみて気づいた AGPL ライセンスの メリット・デメリット
Fumito Mizuno
Java Web, o Tutorial
Java Web, o Tutorial
Rildo (@rildosan) Santos
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
Recommended
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Django REST Framework における API 実装プラクティス | PyCon JP 2018
Django REST Framework における API 実装プラクティス | PyCon JP 2018
Masashi Shibata
Linked Open Data(LOD)の基本的な使い方
Linked Open Data(LOD)の基本的な使い方
Kouji Kozaki
PHPの今とこれから2022
PHPの今とこれから2022
Rui Hirokawa
使ってみて気づいた AGPL ライセンスの メリット・デメリット
使ってみて気づいた AGPL ライセンスの メリット・デメリット
Fumito Mizuno
Java Web, o Tutorial
Java Web, o Tutorial
Rildo (@rildosan) Santos
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
文字コードに起因する脆弱性とその対策
文字コードに起因する脆弱性とその対策
Hiroshi Tokumaru
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
Hirokazu Ouchi
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
Natsuki Yamanaka
図書館でAPIをスルメのように 味わうには
図書館でAPIをスルメのように 味わうには
Takanori Hayashi
Amazon Kinesis Analytics によるストリーミングデータのリアルタイム分析
Amazon Kinesis Analytics によるストリーミングデータのリアルタイム分析
Amazon Web Services Japan
WkWebViewのキャッシュについて調べた
WkWebViewのキャッシュについて調べた
firewood
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
JSON SchemaとPHP
JSON SchemaとPHP
Hiraku Nakano
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
Shinya Okano
ハードウェアを用いてPythonを学ぶ
ハードウェアを用いてPythonを学ぶ
Yuta Kitagami
Unicode文字列処理
Unicode文字列処理
信之 岩永
とある診断員とSQLインジェクション
とある診断員とSQLインジェクション
zaki4649
PHP AST 徹底解説
PHP AST 徹底解説
do_aki
はじめての検索エンジン&Solr 第13回Solr勉強会
はじめての検索エンジン&Solr 第13回Solr勉強会
Noritsugu Suzuki
(A7)cross site scripting
(A7)cross site scripting
OWASP Nagoya
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Masashi Shibata
Guide To AGPL
Guide To AGPL
Mikiya Okuno
EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会
Kentaro Ohkouchi
20200630 AWS Black Belt Online Seminar Amazon Cognito
20200630 AWS Black Belt Online Seminar Amazon Cognito
Amazon Web Services Japan
関数型言語ElixirのIoTシステム開発への展開
関数型言語ElixirのIoTシステム開発への展開
Hideki Takase
Jggug20120901pojojson
Jggug20120901pojojson
Yasuharu Hayami
WordPressAPI
WordPressAPI
Yuki Okamoto
More Related Content
What's hot
文字コードに起因する脆弱性とその対策
文字コードに起因する脆弱性とその対策
Hiroshi Tokumaru
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
Hirokazu Ouchi
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
Natsuki Yamanaka
図書館でAPIをスルメのように 味わうには
図書館でAPIをスルメのように 味わうには
Takanori Hayashi
Amazon Kinesis Analytics によるストリーミングデータのリアルタイム分析
Amazon Kinesis Analytics によるストリーミングデータのリアルタイム分析
Amazon Web Services Japan
WkWebViewのキャッシュについて調べた
WkWebViewのキャッシュについて調べた
firewood
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
JSON SchemaとPHP
JSON SchemaとPHP
Hiraku Nakano
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
Shinya Okano
ハードウェアを用いてPythonを学ぶ
ハードウェアを用いてPythonを学ぶ
Yuta Kitagami
Unicode文字列処理
Unicode文字列処理
信之 岩永
とある診断員とSQLインジェクション
とある診断員とSQLインジェクション
zaki4649
PHP AST 徹底解説
PHP AST 徹底解説
do_aki
はじめての検索エンジン&Solr 第13回Solr勉強会
はじめての検索エンジン&Solr 第13回Solr勉強会
Noritsugu Suzuki
(A7)cross site scripting
(A7)cross site scripting
OWASP Nagoya
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Masashi Shibata
Guide To AGPL
Guide To AGPL
Mikiya Okuno
EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会
Kentaro Ohkouchi
20200630 AWS Black Belt Online Seminar Amazon Cognito
20200630 AWS Black Belt Online Seminar Amazon Cognito
Amazon Web Services Japan
関数型言語ElixirのIoTシステム開発への展開
関数型言語ElixirのIoTシステム開発への展開
Hideki Takase
What's hot
(20)
文字コードに起因する脆弱性とその対策
文字コードに起因する脆弱性とその対策
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
図書館でAPIをスルメのように 味わうには
図書館でAPIをスルメのように 味わうには
Amazon Kinesis Analytics によるストリーミングデータのリアルタイム分析
Amazon Kinesis Analytics によるストリーミングデータのリアルタイム分析
WkWebViewのキャッシュについて調べた
WkWebViewのキャッシュについて調べた
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
JSON SchemaとPHP
JSON SchemaとPHP
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
ハードウェアを用いてPythonを学ぶ
ハードウェアを用いてPythonを学ぶ
Unicode文字列処理
Unicode文字列処理
とある診断員とSQLインジェクション
とある診断員とSQLインジェクション
PHP AST 徹底解説
PHP AST 徹底解説
はじめての検索エンジン&Solr 第13回Solr勉強会
はじめての検索エンジン&Solr 第13回Solr勉強会
(A7)cross site scripting
(A7)cross site scripting
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Guide To AGPL
Guide To AGPL
EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会
20200630 AWS Black Belt Online Seminar Amazon Cognito
20200630 AWS Black Belt Online Seminar Amazon Cognito
関数型言語ElixirのIoTシステム開発への展開
関数型言語ElixirのIoTシステム開発への展開
Similar to いまさら聞けないJSONPのまとめ
Jggug20120901pojojson
Jggug20120901pojojson
Yasuharu Hayami
WordPressAPI
WordPressAPI
Yuki Okamoto
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情
takezoe
RESTful Web API Design
RESTful Web API Design
Akinari Tsugo
Inside mobage platform
Inside mobage platform
Toru Yamaguchi
Java EE8 Report
Java EE8 Report
Norito Agetsuma
RFC7951(JSON Encoding of Data Modeled with YANG)の勉強資料
RFC7951(JSON Encoding of Data Modeled with YANG)の勉強資料
Tetsuya Hasegawa
LODを使ったサイトとプラグインを作ってみた話[WordBenchOsaka]
LODを使ったサイトとプラグインを作ってみた話[WordBenchOsaka]
Hidetaka Okamoto
Tokyowebmining5 yokkuns
Tokyowebmining5 yokkuns
Yohei Sato
Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
XPagesDay 2015 RESTの総復習
XPagesDay 2015 RESTの総復習
Masahiko Miyo
Oracle Labs 発! Parallel Graph AnalytiX(PGX)
Oracle Labs 発! Parallel Graph AnalytiX(PGX)
オラクルエンジニア通信
Visualize terms network in Lucene index
Visualize terms network in Lucene index
Koji Sekiguchi
PHP on Cloud
PHP on Cloud
Akio Katayama
codeless/serverless develop
codeless/serverless develop
Tomoyuki Obi
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Pjax1
Pjax1
Kindai University
Similar to いまさら聞けないJSONPのまとめ
(19)
Jggug20120901pojojson
Jggug20120901pojojson
WordPressAPI
WordPressAPI
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情
RESTful Web API Design
RESTful Web API Design
Inside mobage platform
Inside mobage platform
Java EE8 Report
Java EE8 Report
RFC7951(JSON Encoding of Data Modeled with YANG)の勉強資料
RFC7951(JSON Encoding of Data Modeled with YANG)の勉強資料
LODを使ったサイトとプラグインを作ってみた話[WordBenchOsaka]
LODを使ったサイトとプラグインを作ってみた話[WordBenchOsaka]
Tokyowebmining5 yokkuns
Tokyowebmining5 yokkuns
Web技術勉強会 第26回
Web技術勉強会 第26回
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
XPagesDay 2015 RESTの総復習
XPagesDay 2015 RESTの総復習
Oracle Labs 発! Parallel Graph AnalytiX(PGX)
Oracle Labs 発! Parallel Graph AnalytiX(PGX)
Visualize terms network in Lucene index
Visualize terms network in Lucene index
PHP on Cloud
PHP on Cloud
codeless/serverless develop
codeless/serverless develop
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Pjax1
Pjax1
More from Yujiro Araki
Movable Typeで承認ワークフロー
Movable Typeで承認ワークフロー
Yujiro Araki
MovableTypeテンプレートタグのまとめ
MovableTypeテンプレートタグのまとめ
Yujiro Araki
Movable Type カスタムフィールドのまとめ
Movable Type カスタムフィールドのまとめ
Yujiro Araki
Websocketのお絵かきチャットサンプル
Websocketのお絵かきチャットサンプル
Yujiro Araki
MTDDC 2012
MTDDC 2012
Yujiro Araki
MTDDC Meetup Tokyo 2011:もっとディープにMovable Type
MTDDC Meetup Tokyo 2011:もっとディープにMovable Type
Yujiro Araki
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作 - バージョン管理
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作 - バージョン管理
Yujiro Araki
Theme Framework in Depth - MT DDC Tokyo
Theme Framework in Depth - MT DDC Tokyo
Yujiro Araki
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作
Yujiro Araki
More from Yujiro Araki
(9)
Movable Typeで承認ワークフロー
Movable Typeで承認ワークフロー
MovableTypeテンプレートタグのまとめ
MovableTypeテンプレートタグのまとめ
Movable Type カスタムフィールドのまとめ
Movable Type カスタムフィールドのまとめ
Websocketのお絵かきチャットサンプル
Websocketのお絵かきチャットサンプル
MTDDC 2012
MTDDC 2012
MTDDC Meetup Tokyo 2011:もっとディープにMovable Type
MTDDC Meetup Tokyo 2011:もっとディープにMovable Type
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作 - バージョン管理
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作 - バージョン管理
Theme Framework in Depth - MT DDC Tokyo
Theme Framework in Depth - MT DDC Tokyo
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作
MT DDC Tokyo(テーマ編):テーマを使った手間いらずなサイト制作
Recently uploaded
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Recently uploaded
(8)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
いまさら聞けない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関数を呼び出す方法
Download now