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
ミクシィ 21卒向け Android研修
ミクシィ 21卒向け Android研修
akkuma
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Takahiro YAMADA
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
Swaggerでのapi開発よもやま話
Swaggerでのapi開発よもやま話
KEISUKE KONISHI
週末趣味のAWS VPC Traffic Mirroring
週末趣味のAWS VPC Traffic Mirroring
Namba Kazuo
20191220 「アウトプットしないのは知的な便秘」の影響力
20191220 「アウトプットしないのは知的な便秘」の影響力
Typhon 666
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
アプリケーション開発者のためのAzure Databricks入門
アプリケーション開発者のためのAzure Databricks入門
Yoichi Kawasaki
Recommended
ミクシィ 21卒向け Android研修
ミクシィ 21卒向け Android研修
akkuma
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Takahiro YAMADA
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
Swaggerでのapi開発よもやま話
Swaggerでのapi開発よもやま話
KEISUKE KONISHI
週末趣味のAWS VPC Traffic Mirroring
週末趣味のAWS VPC Traffic Mirroring
Namba Kazuo
20191220 「アウトプットしないのは知的な便秘」の影響力
20191220 「アウトプットしないのは知的な便秘」の影響力
Typhon 666
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
アプリケーション開発者のためのAzure Databricks入門
アプリケーション開発者のためのAzure Databricks入門
Yoichi Kawasaki
CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方
Masaru Ichikawa
AWS Expert Online appsyncを使ったServerlessアーキテクチャ
AWS Expert Online appsyncを使ったServerlessアーキテクチャ
Amazon Web Services Japan
AngularJS for Beginners
AngularJS for Beginners
Edureka!
AWS Simple Monthly Calculator 操作説明書
AWS Simple Monthly Calculator 操作説明書
Amazon Web Services Japan
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
Hirokazu Ouchi
深い親子関係のテーブル設計
深い親子関係のテーブル設計
琢磨 三浦
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
はじめての Gatling
はじめての Gatling
Naoya Nakazawa
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
増田 亨
Spring User Guide
Spring User Guide
Muthuselvam RS
コードで学ぶドメイン駆動設計入門
コードで学ぶドメイン駆動設計入門
潤一 加藤
Azure SecOps! Azure Key Vaultを用いたクラウドのキー管理
Azure SecOps! Azure Key Vaultを用いたクラウドのキー管理
Yuki Hattori
5G時代を見据えたIoTプラットフォームSORACOMのアーキテクチャへの挑戦 | AWS DevDay Tokyo 2019
5G時代を見据えたIoTプラットフォームSORACOMのアーキテクチャへの挑戦 | AWS DevDay Tokyo 2019
SORACOM,INC
20190828 AWS Black Belt Online Seminar Amazon Aurora with PostgreSQL Compatib...
20190828 AWS Black Belt Online Seminar Amazon Aurora with PostgreSQL Compatib...
Amazon Web Services Japan
DBワークロードのAWS化とデータベースサービス関連最新情報
DBワークロードのAWS化とデータベースサービス関連最新情報
Amazon Web Services Japan
ドメイン駆動設計の基礎知識:設計のスタイル、開発のスタイル
ドメイン駆動設計の基礎知識:設計のスタイル、開発のスタイル
増田 亨
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
Masaya Tahara
SharePoint 開発入門
SharePoint 開発入門
Hiroaki Oikawa
Jggug20120901pojojson
Jggug20120901pojojson
Yasuharu Hayami
WordPressAPI
WordPressAPI
Yuki Okamoto
More Related Content
What's hot
CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方
Masaru Ichikawa
AWS Expert Online appsyncを使ったServerlessアーキテクチャ
AWS Expert Online appsyncを使ったServerlessアーキテクチャ
Amazon Web Services Japan
AngularJS for Beginners
AngularJS for Beginners
Edureka!
AWS Simple Monthly Calculator 操作説明書
AWS Simple Monthly Calculator 操作説明書
Amazon Web Services Japan
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
Hirokazu Ouchi
深い親子関係のテーブル設計
深い親子関係のテーブル設計
琢磨 三浦
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
はじめての Gatling
はじめての Gatling
Naoya Nakazawa
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
増田 亨
Spring User Guide
Spring User Guide
Muthuselvam RS
コードで学ぶドメイン駆動設計入門
コードで学ぶドメイン駆動設計入門
潤一 加藤
Azure SecOps! Azure Key Vaultを用いたクラウドのキー管理
Azure SecOps! Azure Key Vaultを用いたクラウドのキー管理
Yuki Hattori
5G時代を見据えたIoTプラットフォームSORACOMのアーキテクチャへの挑戦 | AWS DevDay Tokyo 2019
5G時代を見据えたIoTプラットフォームSORACOMのアーキテクチャへの挑戦 | AWS DevDay Tokyo 2019
SORACOM,INC
20190828 AWS Black Belt Online Seminar Amazon Aurora with PostgreSQL Compatib...
20190828 AWS Black Belt Online Seminar Amazon Aurora with PostgreSQL Compatib...
Amazon Web Services Japan
DBワークロードのAWS化とデータベースサービス関連最新情報
DBワークロードのAWS化とデータベースサービス関連最新情報
Amazon Web Services Japan
ドメイン駆動設計の基礎知識:設計のスタイル、開発のスタイル
ドメイン駆動設計の基礎知識:設計のスタイル、開発のスタイル
増田 亨
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
Masaya Tahara
SharePoint 開発入門
SharePoint 開発入門
Hiroaki Oikawa
What's hot
(20)
CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方
AWS Expert Online appsyncを使ったServerlessアーキテクチャ
AWS Expert Online appsyncを使ったServerlessアーキテクチャ
AngularJS for Beginners
AngularJS for Beginners
AWS Simple Monthly Calculator 操作説明書
AWS Simple Monthly Calculator 操作説明書
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
深い親子関係のテーブル設計
深い親子関係のテーブル設計
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
はじめての Gatling
はじめての Gatling
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
Spring User Guide
Spring User Guide
コードで学ぶドメイン駆動設計入門
コードで学ぶドメイン駆動設計入門
Azure SecOps! Azure Key Vaultを用いたクラウドのキー管理
Azure SecOps! Azure Key Vaultを用いたクラウドのキー管理
5G時代を見据えたIoTプラットフォームSORACOMのアーキテクチャへの挑戦 | AWS DevDay Tokyo 2019
5G時代を見据えたIoTプラットフォームSORACOMのアーキテクチャへの挑戦 | AWS DevDay Tokyo 2019
20190828 AWS Black Belt Online Seminar Amazon Aurora with PostgreSQL Compatib...
20190828 AWS Black Belt Online Seminar Amazon Aurora with PostgreSQL Compatib...
DBワークロードのAWS化とデータベースサービス関連最新情報
DBワークロードのAWS化とデータベースサービス関連最新情報
ドメイン駆動設計の基礎知識:設計のスタイル、開発のスタイル
ドメイン駆動設計の基礎知識:設計のスタイル、開発のスタイル
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
SharePoint 開発入門
SharePoint 開発入門
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(テーマ編):テーマを使った手間いらずなサイト制作
いまさら聞けない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