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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

いまさら聞けない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
エラーハンドリング、キャッシング、タイムアウトなど、デフォルトでは対応でき
ない機能が使えるようになるみたい
...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

(旧版) オープンソースライセンスの基礎と実務 by Yutaka Kachi 265226 views

View on Slideshare

1 of 19 Ad

View on Slideshare

1 of 19 Ad