第3回 Web APIって何？　その他３-CSDN博客

動的なJSONPの利用

　さて、前ページのサンプルでは<script>要素でJSONPを利用しました。この方法だとWebページの表示時にしか外部データを取得することができません。通常のAjaxアプリケーションのように、ユーザの操作などに応じてデータを取得するにはどうすればよいでしょうか。

　基本的な考え方は<script>要素による外部JavaScriptのインポートを動的に行うというものです。つまり、ユーザがボタンをクリックするなどのイベントが発生したタイミングで、DOM操作によってHTMLに<script>要素を追加することで動的なJSONPの利用が可能になります。

　前ページのサンプルを動的なJSONPを利用するよう修正したもの（リスト2）と実行した結果が図3になります。テキストフィールドに任意のURLを入力し、「ブックマーク数を取得」ボタンをクリックすると、DOM操作によって<head>要素内に新たな<script>要素を追加しています。

おわりに

　さて、本連載では3回にわたってJSONの仕様から活用方法まで解説してきました。本連載ではJavaScriptでのJSONの利用方法を中心に取り上げてきましたが、連載の第1回でも述べた通り、多くのプログラミング言語ではすでにJSONを扱うライブラリがそろっており、JSONは言語の壁を越えたデータ交換フォーマットとしても利用され始めています。本連載がJSON活用の一助になれば幸いです。