JSONPってなに？

JSONPとは，JSON with Paddingの略称です。JSONデータを引数としてJavascriptの関数を呼び出す形式で，レスポンスを受け取る方式を指します。

たとえば，関数の名前にmethodと指定すると，以下のような内容がレスポンスとして返ってきます。

method({"color": "green"});

よって，methodという名前の関数が定義されていれば

{"color": "green"}

を引数としてmethod関数が実行されます。

このようにして，レスポンスデータとして，定義した関数をコールバックしてもらいます。

Youtube APIでは，callbackパラメータにコールバック関数の名前を指定します。試しに，Youtube APIに対してデータ形式をJSONP，最大取得件数を10，キーワードをtest，callback関数をviewとしてリクエストを送信し，レスポンスを確認してみましょう。Webブラウザのアドレスに次のように入力し，送信してください。

http://gdata.youtube.com/feeds/api/videos?callback=view&vq=test&max-results=10&alt=json-in-script

Webブラウザに次のようなレスポンスが表示されます。

view({"version":"1.0","encoding":"UTF-8",...});

callbackパラメータに指定したviewという関数を呼び出す形でデータが返ってくることが確認できます。

そして，このJSONP形式でレスポンスを返すURLを，scriptタグのsrc属性に指定すれば，Webページの読み込みとは非同期にデータを取得し，処理することができます。 このように，JSONPは実装がとても簡単です。コールバック関数を定義し，リクエストするscriptタグを生成するだけで実装できます。

<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos?vq=..." />

なぜJSONPを使うのか

JSONPのほかにAjaxを実装する方法としてXMLHttpRequestオブジェクトを使った実装方法もあります。なぜ，JSONPを使うのでしょうか（もちろんXMLHttpRequestオブジェクトを使ってもかまいません⁠）⁠。

それは，XMLHttpRequestオブジェクトを使用した方法では，セキュリティ上の制限により他のドメインのサイトへはアクセスできないからです。 たとえば，このgihyo.jpドメインからyoutube.comドメインへリクエストを送信することはできません。

これでは，他のドメインで提供されているサービスを使ってデータを生成したり，サイトを構築することができなくなります。もちろん，自ドメインのサーバ側に他のドメインへアクセスする仕組みを作り，それを呼び出すようにすれば回避できますが，JSONPにくらべ実装に手間がかかり複雑になります。

scriptタグを利用したJSONPでは，scriptタグにクロスドメインアクセスの制限がないため，クライアント側の実装だけで他ドメインのサービスや機能を簡単に呼び出すことができます（セキュリティリスクをよく考慮して実装してください⁠）⁠。