さじろーどっとねっと
<appendChildとJSONPを使ったAjax>

先ほどのJSONPは、そのまま関数の呼び出しとして使えます。

つまり、JSONPで作成された関数呼び出しのスクリプトをappendChildによって動的にロードすることによって、Ajaxを実現するのです。

手順をまとめるとこういうことになります。
1.Ajaxの起動アクションが発生
2.スクリプトエレメントを作成
3.エレメントのsrcにJSONPのファイルを指定
4.エレメントを追加(appendChild)
5.追加されたエレメントが実行される
6.エレメント内のJSONPが関数を呼び出す
7.呼び出された関数にJSONデータが引き渡される
8.呼び出された関数でデータを処理(表示)する
9.ページの情報が更新される

このような仕組みになります。

簡易スクリプトではこうなります。

function Ajax_start(){
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src = ファイル名;
document.body.appendChild(scriptTag);};
}

function ajax_callback( obj ){
document.write('name:'+ table->{'name'});
document.write('discription:'+ table->{'discription'});
}

JSONPのファイル
ajax_callback({ "name":"test_name", "discription":"test_discriptio" });

流れはこんな感じになります。

ブックマークに追加する