SQLの窓

2013年11月13日


JSONP の原理と、簡単な利用方法の実際のコード( 実装は jQuery が良いですが、Access-Control-Allow-Origin: * のほうが楽だし読込み先を制限できます )

まずは、クロスドメインでもなんでも無く、JavaScript として自分のコードでその動作の基本を作成するとこうなります。
<script type="text/javascript">
var myfunc = new Function("obj", "window.mydata = obj");

myfunc({
 "jsonp1": "ようするに",
 "jsonp2": "こういうこと"
})

alert(mydata.jsonp1 + "|" + mydata.jsonp2);
</script>

次に、JSONP と呼ばれている部分を外部にしてクロスドメインするとなるとこういう事になります
<script type="text/javascript">
var myfunc = new Function("obj", "window.mydata = obj");
</script>

<script src="http://toolbox.winofsql.jp/jsonp.php" type="text/javascript"></script>

<script type="text/javascript">
alert(mydata.jsonp1 + "|" + mydata.jsonp2);
</script>
その際、jsonp.php の中はこうなっています。
<?php
header( "Content-Type: text/javascript; Charset=utf-8" );
?>
myfunc({
 "jsonp1": "ようするに",
 "jsonp2": "こういうこと"
})

さらにこれを実用的にするには、もっといろいろテクニックがいるわけですが、jsonp.php のようなコードは、そのサイトに置くだけで誰からもアクセスする事ができるようになります。

が。

そういうスクリプトはWEBサーバが管理できない場合に使えばいいと思うので、実際は PHP 内部にでも 「Access-Control-Allow-Origin: *」 をヘッダで返すようにすればいいと思うのですが。


関連する Microsoft ドキュメント

Function オブジェクト

関連する記事

jQuery で JSONP。なるほど、良くできてる。



【JavaScriptの最新記事】
posted by lightbox at 2013-11-13 00:22 | JavaScript | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり