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);
};