製作・改造なんでもやっちゃう広くて浅い活動日誌

2017/051234567891011121314151617181920212223242526272829302017/07

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
webアプリを作る上で、データのやり取りは何かしら必要になりますが、Javascriptで他のドメインと通信するにはJSONPという仕組みがあるみたいです。

詳しい仕組みに関しては、申し訳ありませんが他をあたって下さい。
ただ、私の理解としては「Javascriptのソースを読み込むと見せかけてデータを受けとり、同時に関数も実行する」手法というものでして、このデータと実行する関数名のセットをJSONPと呼び、
callback({"name1":"date1", "name2":"date2"});
こんな感じで記述します。
すると、このJSONPが読み込まれた時点で同じ名前の関数が実行され、中のデータを使用することが出来ます。
上記の例だとcallbackが呼び出される関数で、name1,name2がデータの名前、date1,date2がそれぞれのデータの中身です。
JSONPってこんな感じ?

せっかくなのでJavascriptとCGI(Python)を使ってJSONPのサンプルを作ってみました。
あいにく、ここのブログではCGIを使用できる環境がありませんので、先日の記事のようにローカルでCGIが動くようにして、クロスドメインでもなんでもないJSONPのデータ受け渡しをしてみます。
結果の表示にはjQueryによるhtmlの書き換えを使いました。
試しに動かしてみたい方は、jQueryよりスクリプトをダウンロードし、htmlファイルと同じフォルダに設置して、ソース中のjquery-1.5.1.min.jsを自分の持っているものに書き換えて下さい。


<html>
<head>
<title>jsonpを使ったテスト</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function callback(json) {
$("#result").html(json.hoge);
}

function send() {
var s = document.createElement('script');
s.src = '/cgi-bin/jsonp.py';
document.body.appendChild(s);
return false;
}
</script>
</head>
<body>
<form onsubmit="return send()">
<input type="submit" value="送信" />
</form>
<div id="result">ここに結果が出る</div>
</body>
</html>


print "Content-Type:text/javascript"
print
print "callback({'hoge':'This is JSONP'});"


submitボタンを押すとsend()関数が呼び出され、cgi-binフォルダのjsonp.pyを呼び出します。
すると、データを引数にcallback関数が起動し、htmlが書き換えられています。

画像で申し訳ありませんが、実行結果はこんな感じです。

submit前

submit後


callback関数やjsonp.pyにいろいろ加えることで、より複雑なことが出来そうです。


フレディ VS ジェイソン [DVD]フレディ VS ジェイソン [DVD]
ロバート・イングランド,ケン・カージンガー,モニカ・キーナ,マーク・スウィフト,ダミアン・シャノン,ロニー・ユー

アミューズソフトエンタテインメント
売り上げランキング : 36184

Amazonで詳しく見る
関連記事
コメント
この記事へのコメント
QVLさま、

こちらのJSONPプログラムが動いたことに感動しました。ありがとうございました。私の目指すところは相手のクッキーに押したボタンの変数を記憶させて、それからその値に対しての計算処理をpythonで行ってから変数をjavascriptに返すということをしようと考えております。何かお知恵をお貸ししてはいただけませんでしょうか?

これからまた他のJSONPプログラムありましたら楽しみにしております。

2011/04/27(水) 00:56 | URL | JunJun #-[ 編集]
QVLさま、

度々、申し訳ありません。ただ今調べている最中なのですが、submitした値をjavascriptからcookieに覚えさせてjavascript側からpythonへデータを受け渡す方法をお知りでしたら教えてはいただけませんでしょうか?

宜しくお願い致します。
2011/04/27(水) 15:27 | URL | JunJun #-[ 編集]
JunJun様

申し訳ありませんが、本記事のタイトルにあります通り、Javascriptに関してはからっきしですのでcookieに記録させる方法はわかりません。

ただし、Javascript側からPythonにデータを渡す場合、cgiモジュールとGETメソッドを使えば比較的楽に出来たと記憶しています。
このやり方は既に調べられているかもしれませんが、別途記事を用意してみたいと思います。
2011/04/29(金) 23:27 | URL | QVL #WN5t6YfU[ 編集]
QVLさま、

お返事ありがとうございます。いろいろ試してはみましたが、まだpython側に変数を得ることに成功していません。CGIを使ってjavascript側からpython側へ送ることができるのですか?どうかGETメソッドを使っての変数の得とく方法是非教えてください。
2011/04/30(土) 01:27 | URL | JunJun #-[ 編集]
JunJun様

GETメソッドを使ってPythonにデータを送る手法を書いてみました。
http://creatornote.blog87.fc2.com/blog-entry-30.html
http://creatornote.blog87.fc2.com/blog-entry-31.html
よろしければ参考にして下さい。
2011/04/30(土) 20:31 | URL | QVL #WN5t6YfU[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://creatornote.blog87.fc2.com/tb.php/28-65ffd6c9
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。