皆さんはじめまして！
アドウェイズエンジニアの小松です。
ついに入梅してしまいました(´・ω・｀)
小松はこの時期がとても苦手なのでかなりつらいです。
早く夏になってほしい～～TT
さて、最近、どんなサイトでも当たり前のように使われている
Javascriptのフレームワーク「jQuery」。
ajax処理をさくっと実装するためにjQueryをご利用になられている方も
多いのではないかと思います。
小松もそんな考えでjQueryを使うことがあります。
先日そのjQueryを使っていて、ちょっとはまってしまいました。
下記の画像のような処理を行うお仕事がありました。
最後にpiyo.example.jpからもらうデータはJavascriptの配列になります。
そこで、下記のような処理でデータを取得しようと考えました。
// [ jQueryにてajaxでHTTPリクエスト ] の部分の実装
var url = 'hoge.example.com';
jQuery.getScript(url, function() {
// 配列データの加工
});
ところが、、、
データが取得できません(´・ω・｀)
むむむ、、、とりえあず、FirebugというJavascriptのデバッグツールで状況を確かめてみます。
どうやら最後のリダイレクトが上手にいってないようです。
今回のお仕事では処理の最後に通信先がリダイレクトにて別ドメインになります。
どうやらこれがJavascriptのクロスドメイン制限にひっかかっている様子。
jQuery.getScript()はjQuery.ajax()のshorthandなので、親を調べれば何かわかるはず。。。
と思って調べてみるとjQuery.ajax()にはこんな引数がありました。
crossDomainをtrueにセットすると通信の際に強制的にクロスドメイン対応で動いてくれるようです。
早速、プログラムを直してみます(｀・ω・´)=3
var url = 'hoge.exsample.com';
jQuery.ajax( url, { crossDomain: true, dataType: 'script', success: function() {
// 配列データの加工
}});
これでよし！
結果はというと・・・
無事にクロスドメインで通信できました！
大変便利なjQuery、shorthandもいっぱいあるので、使ってみたくなりますが、
クロスドメインでajaxをする場合は、ちょっと気をつけないといけません！
なーんてことを感じた一件でした。
次回のアドウェイズエンジニアブログも「サービス、サービスぅ」 です(｀・ω・´)ｂ