カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:DEV


jsonファイルを使ってブログツール的なものを作ってみたところ、
自分のサイトに貼り付ける分には問題なく動いていたが、別サイト
に貼り付けると動かない。。。

というクロスドメイン問題の解消方法。

クロスドメインってのは簡単にいうとホスト名等が異なる
サーバへのアクセスをブラウザが禁止する問題のこと。

この問題、jQuery1.2からJSONPネイティブサポートして
くれてるって事で使ってみたけど、少し苦闘したので、
phpでの解決方法として、メモっておく。

失敗例


mad sky panoramic (Gods Sketchpad)
Photo:mad sky panoramic (Gods Sketchpad) By Jasmic

とりあえず、javascriptから.getJSONでデータを取得しにいきます。
このリクエストへJSONPを応答するのが、json.phpになっている、
というのを前提として、最初に動かなかったのがこれ。。。

// getJSONで指定のURLからjsonデータを取得
$.getJSON('' + baseurl + 'json.php?param1=' + param1 + '&param2=' + param2 + '&callback=hogehoge',
function(data, status){ .... }
);


// output用の配列
$OUTPUT = array("result"=>$RET);
// レスポンス用header
header("Content-Type: text/javascript; charset=utf-8");
// output用の配列をjsonデータに変換
echo "hogehoge(".json_encode($OUTPUT).")";

上のように書いたのは、ここから。

jQuery1.2では、JSONPのコールバック関数を指定すれば、
別のドメインにあるJSON形式のデータを読み込む事が可能になった。
(書式:"myurl?callback=?")jQueryは?を呼び出したい関数名に
置換し、それを実行する。

jQuery.getJSON( url, data, callback ) - jQuery 日本語リファレンス


でも、これだとうまく動かなかったです。
(例が悪いかも。少し昔の事なのでどんなソースで
 取得に失敗していたのかがいまいち覚えてない、、、;;)

解決方法


結論としては、こうすれば良い。

// getJSONで指定のURLからjsonデータを取得
$.getJSON('' + baseurl + 'json.php?param1=' + param1 + '&param2=' + param2 + '&callback=?',
function(data, status){ .... }
);

// output用の配列
$OUTPUT = array("result"=>$RET);
// レスポンス用header
header("Content-Type: text/javascript; charset=utf-8");
// output用の配列をjsonデータに変換
echo $_GET['callback']."(".json_encode($OUTPUT).")";


callbackの値は「?」のままで、GETのパラメータとして、
callbackを取得してしまえば良かったみたい。

以上。

参考

第1回 JSONP と jQuery を組み合わせ、強力なマッシュアップを迅速に作成する
JSONとJSONPの違い

タグ : php クロスドメイン ajax

Comment

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...