Your browser (Internet Explorer 6) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.
X
Post

ajaxで異なるドメインにアクセスする方法 回り道編

おせっかいメーカー制作の際、もう一箇所詰まりかけた場所があったので、それについてメモです。
ajaxで異なるドメインからデータを取得する方法についてです。


このサイトはTwitterの検索APIを利用しています。
当初の予定ではajaxでTwitterに検索クエリを飛ばし、
返ってきたデータを元にjQueryでHTMLを成型する流れを考えていました。

Search API (ツイートの検索) – Twitter API プログラミング解説

Twitterの検索APIはこれを利用しています。
で、最初はこんな感じで実装をしました。

jQuery.ajax({
    type: 'GET',
    url: 'http://search.twitter.com/search.json?(検索クエリ)',
    dataType: 'json',
    success: function(data) {
        // (成功時の処理)
    },
});

しかし、色々試してもうまくいきません。
で、調べてみて出てきたのが下記のページでした。

jQuery で Ajax(クロスドメイン) ブラウザ対応まとめ
jQueryを使ったAjax通信(クロスドメイン編) – おかひろの雑記

ここをちゃんと読めば「jsonではなくjsonpを使えば良い」と書いてあるのですが、
この時は急いで仕上げる事に必死であったためjsonpを使うという事に気付かず、
ajaxのクロスドメインには制約があるという部分しか読み取りませんでした。

で、どうやって異なるドメインからデータを取得したらいいものか……
と考えて、出てきたアイディアが次のものです。

ajaxでTwitterドメインに直接アクセスするのではなくて、
ajaxで自分のドメインにアクセスしてそこからTwitterにアクセスすればいいのではないか、と。

ブラウザ側のHTMLではこのように書きます。

var ajax_url = '/path/ajax.php'; // 自分のドメイン

jQuery.ajax({
    type: 'GET',
    url: ajax_url,
    dataType: 'json',
    success: function(data) {
        // (成功時の処理)
    },
});

そして、これを受信するサーバ側のファイルではこのように書きます

echo file_get_contents('http://search.twitter.com/search.json?(検索クエリ)');

あくまで簡略化のためにこのような書き方をしてるだけで、
実際にはもう少し細かい制御が入っています。

中継用にサーバを一つ挟むためパフォーマンスは低下するのですが、
この時は他にいい方法が思いつかなかったためこんな感じのやり方を行いました。
実際はこういう中継などせず素直にjsonpを使った方が早いかもしれません。


……このネタ本当は先週のうちにまとめておきたかったんですが、
先週木曜にPCが死亡するトラブルが発生して、それの対応に追われてそれどころじゃなくなりました。
元々PCの寿命が近い予感はしていて、ちょうど取り寄せの手配をしているタイミングだったのが幸いでした。

TrackBack URL :

Leave a comment  

name

email

website

Submit comment