$.getJSONによるJSONPの実行

AjaxのXMLHttpRequstではクロスドメイン通信はセキュリティ上の理由から禁止されている。
外部サーバのサービスを利用するためにプロキシを設置してプロキシ経由でサービスを利用するのも面倒なのでJSONP(JavaScript Object Notation with Padding)がある。
JSONPは外部サーバのスクリプトをインクルードするための<script>タグを生成する。そして、外部サーバは<script>タグを介して、JSONデータを含んだ関数の呼び出しのコードをクライアントに応答する。クライアントで外部サーバからの指示に応じて呼び出される関数(JSONデータを処理する関数)を用意しておけば、外部サーバから送信されたJSONデータを処理できる。
今回は、JSONPを$.getJSONメソッドを使って行ってみた。

jQuery

<script type="text/javascript">
jQuery(function($){
/* コールバック関数 */
  var receive = function(data){
    var webtech = data.respons.tech;
    var ul = $('<ul>').appendTo('#result');
    $.each(webtech,function(){
      $('<li>',{text:(this)}).appendTo(ul);
    });
  };
/* 実行ボタンをクリックするとJSONPを実行する */
  $('#exec_btn').click(function(){
    var url = 'http://sample.sakuraweb.com/part9/jsonp.php?callback=?'; 
    $.getJSON(url,{name:'eate'},receive);
  });
});
</script>

PHP(jsonp.php)

<?php
$obj = array(
  'webtech' => array('HTML','CSS','JavaScript'),
  'jQuery' => array('jQuery','jQuery UI'),
  'eate' => array('寿司','天ぷら','ラーメン')
);
/* 生成するスクリプトに含まれる関数の引数(JSON形式) */
$data = json_encode(
          array('respons' => array(
           'name' => $_GET['name'],
           'tech' => $obj[$_GET['name']]
          ))
);

/* 関数を記述したスクリプトの生成と送信 */
header('Content-Type: text/javascript');
print "$_GET[callback]($data);";  /* $_GET[callback]は関数名 */
?>

$.getJSONによるJSONPの実行