2014年2月27日木曜日

file_get_contentsやcURLが使えないから、jsonp使ってクロスドメイン対応的なみたいなお話

  • このエントリーをはてなブックマークに追加

サーバーによってはfile_get_contentsを禁止してたり、
cURLが入っていないとかっていうことがあったりする。
別にそれ自体は悪い事じゃないんだけど、表示用とデータベースサーバーをどうしても別にしないといけないことがある。
そのときによく使う方法としては、file_get_contents使うとかcURLとかって感じ。
で、使えないからクロスドメインでどうにか対処しようみたいな。

ってことで今回はクロスドメイン対応させるためのAjaxおよびデータ吐き出し側の書き方をば。

■js

$.ajax({
  url:"http://hogehoge.com/jsonp.php",
  type:"GET",
  dataType:"jsonp",
  data:{
    q:"test",
    t:"hoge"
  },
  success:function(result){
    //resultの処理をここで
  }
});
通常だったらdataTypeはjsonとかxmlってなるんだけど、
クロスドメインでデータを取得したい場合はjsonpと記入。
ちなみにphpから送られてくるデータは基本的にjsonになるので、
success内で処理する場合はちゃんとjsonで処理をする必要があり。

■jsonp.php
header('Content-Type: text/javascript; charset=utf-8');
echo $_GET['callback']."(".json_encode($tweets).")";
exit();

//出されるデータの例
jQuery16407214161225128919_1393494314071([{"test":hoge}])
javascriptデータを返してあげますよという事を明示するために、
Content-Type:text/javascriptをheader情報として出してあげないといけない。
それとjs内にてdataType:"jsonp"とすると自動的にjQuery16407214161225128919_1393494314071みたいに、
callbackという値が付くのでこれをjsonの頭に付けてあげて、
こいつが関数かのように括弧でjsonを囲んであげればよい。

なんかcallbackというのを頭に付けないといけないという、ここら辺が謎ではあるがこれでよい。

てな感じでやってあげるとAPIみたいにちゃんと作成が出来る。
もちろんちゃんとAPIとしてやるとしたら厳密に作ってあげる必要があるけど、さくっと作るのはこれくらいでいいんじゃないかと。

厳密なクライアントの場合だとfile_get_contensがダメ、cURLがダメということでデータを丸々取ってくるが出来ないけど、
jsonpで整形して返してあげる事でどうにかなったりすることもあるので使ってみるとよいかと。

Adsense