読者です 読者をやめる 読者になる 読者になる

jQueryのクロスドメインではまる!

皆さんはじめまして!
アドウェイズエンジニアの小松です。

ついに入梅してしまいました(´・ω・`)
小松はこの時期がとても苦手なのでかなりつらいです。
早く夏になってほしい~~TT

さて、最近、どんなサイトでも当たり前のように使われている
JavascriptフレームワークjQuery」。

ajax処理をさくっと実装するためにjQueryをご利用になられている方も
多いのではないかと思います。

小松もそんな考えでjQueryを使うことがあります。

先日そのjQueryを使っていて、ちょっとはまってしまいました。

下記の画像のような処理を行うお仕事がありました。
img1

最後にpiyo.example.jpからもらうデータはJavascriptの配列になります。

そこで、下記のような処理でデータを取得しようと考えました。
  // [ jQueryにてajaxでHTTPリクエスト ] の部分の実装
  var url = 'hoge.example.com';
   jQuery.getScript(url, function() {
    // 配列データの加工
  });

ところが、、、

データが取得できません(´・ω・`)

むむむ、、、とりえあず、FirebugというJavascriptデバッグツールで状況を確かめてみます。
img2

どうやら最後のリダイレクトが上手にいってないようです。

今回のお仕事では処理の最後に通信先がリダイレクトにて別ドメインになります。
どうやらこれがJavascriptのクロスドメイン制限にひっかかっている様子。

jQuery.getScript()はjQuery.ajax()のshorthandなので、親を調べれば何かわかるはず。。。

と思って調べてみるとjQuery.ajax()にはこんな引数がありました。
img3

crossDomainをtrueにセットすると通信の際に強制的にクロスドメイン対応で動いてくれるようです。

早速、プログラムを直してみます(`・ω・´)=3
var url = 'hoge.exsample.com';
jQuery.ajax( url, { crossDomain: true, dataType: 'script', success: function() {
    // 配列データの加工
}});
これでよし!

結果はというと・・・
img4
無事にクロスドメインで通信できました!

大変便利なjQuery、shorthandもいっぱいあるので、使ってみたくなりますが、
クロスドメインajaxをする場合は、ちょっと気をつけないといけません!

なーんてことを感じた一件でした。


次回のアドウェイズエンジニアブログも「サービス、サービスぅ」 です(`・ω・´)b