JSONPの動作原理
やっと最近JSONPの動作原理を理解した。超頭悪い…。動作原理の私的メモ。JSONPって1と2の組合せの応用。いったい僕は何を勘違いしたのか…。
1.JavaScript関係の処理系は以下のような感じ
もっともJSONPでは動的にDOM処理で<script>タグを生成するテクを利用しているのでその関数実装する必要が出てきますが…
■foo.js callback({ foo:'foo', bar:'bar' }); ■foo.html <html> <head> <script type="text/javascript"> function callback(object){ for(i in object) alert(i); }; </script> <script type="text/javascript" src="foo.js"></script> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </head> </html>
2.JSONP側では以下のような処理
phpとかcgiでやるときマイムタイプ返すの忘れると偉いことに…。header('Content-type: text/javascript');や print "Content-type: text/javascript\n\n";
■foo.php?callback callback({}); ■foo.php?foo foo({});
スクリプトタグの動的生成⇔外部jsの動的呼出
id:shogo4405:20060729:1154184598の簡略版。何回でも呼出できる。
function load(uri) { var elm = document.createElement('script'); elm.type = 'text/javascript'; elm.src = uri; document.getElementsByTagName('head').item(0).appendChild(elm); };